31:[{"id":"5bffca711a2b45090494c77bab30bfa36859ecb5a0619c7d93e1da8f8089be61df96021c578b53cfbd2c3f6611e2567183fec5ed9a66876b50bb47123b2c56b9","href":"https://static.observableusercontent.com/files/5bffca711a2b45090494c77bab30bfa36859ecb5a0619c7d93e1da8f8089be61df96021c578b53cfbd2c3f6611e2567183fec5ed9a66876b50bb47123b2c56b9","name":"gz_2010_us_states_00_20m.json","type":"application/json","lastModified":1649024547736.826,"size":1426336}] 2f:{"title":"Maps - Add Zoom and Pan","cells":[{"id":0,"value":"# Maps - Add Zoom and Pan","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":20,"value":"map = d3.select(mapContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"import {getMapData, drawMapLayer} from \"@emfielduva/dvlib_maps\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"world = getMapData(\"world110m\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"usstates = FileAttachment(\"gz_2010_us_states_00_20m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"cville_neighborhoods = getMapData(\"https://opendata.arcgis.com/datasets/c371ad0b81024822bad1147ff6bb24c4_51.geojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"mapLayers = {\n let mapLayers = [];\n \n mapLayers[\"countries\"] = drawMapLayer(map,\"countries\",world.features,world.idField);\n mapLayers[\"usstates\"] = drawMapLayer(map,\"usstates\",usstates.features,\"properties.NAME\");\n mapLayers[\"cville_neighborhoods\"] = drawMapLayer(map,\"cville_neighborhoods\",cville_neighborhoods.features,\"properties.NAME\");\n\n mapLayers[\"countries\"].on(\"click\", zoomToBounds); // this is added here to enable zooming to a clicked feature element.\n mapLayers[\"usstates\"].on(\"click\", zoomToBounds);\n\n return mapLayers;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":34,"value":"-------","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"### Add Zoom and Pan\npulling in a library function and instantiating zoom onto the map:","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"in this import, I'm importing two cells at once, and telling it to use this notebook's 'map' element.","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"import {zoomed, zoomToBounds} with {map} from \"@emfielduva/dvlib_maps\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"This first one adds a general zoom (scroll-wheel) and pan (mouse click and drag) to the entire map. Go try it.","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"map.call(d3.zoom()\n .scaleExtent([1,1000]) //how far to be able zoom out,in\n .on(\"zoom\", zoomed));","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"**for zoomToBounds** see the addition of the .on(\"click\", zoomToBounds) to two layers in the above mapLayers cell.","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"and while you're at it, go pan and scroll-wheel in to find the **Charlottesville, VA neighborhood boundaries layer**, which is really small on the world-map scale, but zooming gets us there.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}