<Question>: Changing used data based on zoom level ?

[nouryf]

Hi,

I would like to use the qol explorer to show data based on a zoom level ranges, for example for detailed zoom level the used .csv and .geojson will be the divisions of a county (like what qol explorer currently shows for Charlotte). If I zoom out, I would like to point to counties levels (every county showing it's data and not it's divisions) and then If I zoom out more, I'll show state level data.

The data would be already available for each zoom range levels: divisions of a county, counties and then states. No on the fly computation (sum or average, etc.) for the data.

I was wondering if this would be possible by editing the code to point to a different folder for the data based on the zoom level or may be the same current data folder but with a schema taking zoom level in consideration ?

Thanks Noury

[tobinbradley]

You can watch the zoomend event on the map, check what the zoom is, and do whatever you want to accordingly. Something like:

map.on('zoomend', () => {
  if (map.getZoom() >=12) { 
    // do something for higher zoom levels
  } else {
    // do something for lower zoom levels
  }
})

You can use map.getSource('some_layer').setData(newGeoJSON) to update the geography, then you'd have to fetch the data for that geography and run it through the painter, basically what it does when a new variable is loaded. You'd also have to tweak the code when a new variable is loaded so it knows to check the map zoom and get the data for the geography at that zoom level. Not terribly fun, but it's doable.

[nouryf]

Thank you ! Much appreciated. I'm looking at the code and had few questions.

The changes to the zoom end event I see it can be done in "src/lib/Map.svelte:" with your suggested code map.on('zoomend', () => { if (map.getZoom() >=12) { // do something for higher zoom levels map.getSource('neighborhoods').setData('highResoGeoJSON.json') } else { // do something for lower zoom levels map.getSource('neighborhoods').setData('lowResoGeoJSON.json') } })

Now looking at how/where to 'fetch the data for the new geography and run it through the painter'. I see code in store.js, specifically 'selectedMetric', 'selectedConfig' and 'selectedData'. Probably I would need a variable for each one of the three zoom levels I want to handle .. or may not. I need to play with it.

I also see code that need to be tweaked in Meta.svelte.

You can use map.getSource('some_layer').setData(newGeoJSON) to update the geography, then you'd have to fetch the data for that geography and run it through the painter, basically what it does when a new variable is loaded. You'd also have to tweak the code when a new variable is loaded so it knows to check the map zoom and get the data for the geography at that zoom level. Not terribly fun, but it's doable.

"then you'd have to fetch the data for that geography and run it through the painter, basically what it does when a new variable is loaded." --> how to run it through the painter ? --> Is the code when a new variable is loaded located at store.js ?

Thanks again

``