28:null 29:["$","title",null,{"children":"Maps - Add Zoom and Pan | Eric Field | Observable"}] 2e:[{"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}] 2c:{"id":"6a3b28a1ef4d9dbd","slug":"maps_zoom_pan","title":"Maps - Add Zoom and Pan","thumbnail":"0726764a5e69d59e9518d2f62c50debe115c29036aeb5a7b7c1e1a732e54d3ae","access_level":"public","create_time":"$D2022-04-03T22:22:27.736Z","update_time":"$D2022-04-03T22:32:30.692Z","view_time":null,"first_public_time":"$D2022-04-03T22:33:58.648Z","has_unpublished_edits":null,"fork":{"id":"e2cb5f25009e13ee","slug":"maps_layers","title":"Maps - Multiple Layers","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"stars":0,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":129,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"16d732e1a426b881","slug":"maps","title":"Maps","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"title":"Maps - Add Zoom and Pan","cells":[{"id":0,"value":"# Maps - Add Zoom and Pan","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"mapContainer","database":"$undefined"},{"id":20,"value":"map = d3.select(mapContainer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import {getMapData, drawMapLayer} from \"@emfielduva/dvlib_maps\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"world = getMapData(\"world110m\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"usstates = FileAttachment(\"gz_2010_us_states_00_20m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"cville_neighborhoods = getMapData(\"https://opendata.arcgis.com/datasets/c371ad0b81024822bad1147ff6bb24c4_51.geojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"-------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"### Add Zoom and Pan\npulling in a library function and instantiating zoom onto the map:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"import {zoomed, zoomToBounds} with {map} from \"@emfielduva/dvlib_maps\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"