2c:null 2d:["$","title",null,{"children":"Historical Zoning Maps of Charlottesville | Rory Stolzenberg | Observable"}] 32:T1594,map = { const container = html`

`; var radios = [] var yrs = Object.keys(tilesetyears); var visible; yrs.forEach(y => { radios.push(html` ${y} `) if(tilesetyears[y].visibility == "visible"){ visible = tilesetyears[y]; } }) let check = html` ` let content = html `

${container}

Zoning Maps

${check}

` // Give the container dimensions. yield content; const map = new mapboxgl.Map({ container, center: [-78.5, 38.031], zoom: 13, style: "mapbox://styles/mapbox/light-v10", // scrollZoom: false }); map.on('load', () => { for(var x in tilesetyears){ console.log(x, tilesetyears[x]) map.addSource(x, { "type": "raster", "url": "mapbox://rorystolzenberg."+tilesetyears[x].tileset, "tileSize": 256, }) map.addLayer({ id: x, type: 'raster', source: x, layout: { visibility: tilesetyears[x].visibility }, }); } }); function switchLayer(layer) { var clickedLayer = layer.target.id; // get the label of the layer var visibility = map.getLayoutProperty(clickedLayer, "visibility"); // check whether the layer is visible if (visibility === "visible") { hideLayer(clickedLayer); layer.target.checked = false; } else { showLayer(clickedLayer); } for(var x in tilesetyears){ if(x != clickedLayer){ hideLayer(x); } } var legend = tilesetyears[clickedLayer].legend; console.log(legend, clickedLayer,document.getElementById("legend-overlay")) document.getElementById("legend-overlay").innerHTML = `

` } function toggleLayer(layer) { var clickedLayer = layer.target.id; // get the label of the layer var visibility = map.getLayoutProperty(clickedLayer, "visibility"); // check whether the layer is visible if (visibility === "visible") { hideLayer(clickedLayer); } else { showLayer(clickedLayer); } } function hideLayer(clickedLayer) { map.setLayoutProperty(clickedLayer, "visibility", "none"); } function showLayer(clickedLayer) { map.setLayoutProperty(clickedLayer, "visibility", "visible"); } // attach listener to all checkboxes var layerList = document.getElementById("menu"); var radios = layerList.querySelectorAll('input[name="viz-toggle"]'); for (var i = 0; i < radios.length; i++) { radios[i].onclick = switchLayer; } var checkbox = layerList.querySelector('input[name="viz-toggle-Current"]'); checkbox.onclick = toggleLayer; map.on("load", () => { map.addSource('Current',{ type: 'geojson', data: parcels, }) map.addLayer({ 'id': 'Current', 'type': 'fill', 'source': 'Current', // reference the data source layout: { visibility: "none" }, 'paint': { // 'fill-color': ['get','color'], // blue color fill 'fill-opacity': 0.33 } }); var exp = [ 'match', ['get', 'Zoning'], ]; for (const [zone, color] of Object.entries(zoningLegendColors)) { // Object.keys(zoningLegendColors).forEach((zone, color) => { exp.push(zone) exp.push(color) } // exp.push("#ddd") // default exp.push("#eee") // console.log(exp) map.setPaintProperty('Current', 'fill-color', exp); // var parcels1 = L.geoJSON(parcels, { // updateWhenIdle: true, // updateWhenZooming: false, // // onEachFeature: onEachFeature, // style: (feature) => { // const gpin = feature.properties.GeoParcelIdentificationNumber; // const color = "#ff0000"//gpin in gpinToFeature ? zoningColors2013Full[gpinToFeature[gpin].Zoning] || "white" : "white"; // return { // fillColor: color, // fillOpacity: 0.8, // weight: 0.05 // }; // } // }).addTo(map); }); invalidation.then(() => map.remove()); }33:T575,tilesetyears = { return { '1929': { tileset: '4wuj9mg8', visibility: "none", legend: "https://www.cvillepedia.org/images/1929_Zoning_Legend.png", }, '1939': { tileset: '4oui3wmz', visibility: "none", legend: "https://www.cvillepedia.org/images/1939_Zoning_Map_Legend.png", }, '1949': { tileset: '1dj6k2zb', visibility: "none", legend: 'https://www.cvillepedia.org/images/1949_Zoning_Legend.png', }, '1958': { tileset: '3yxjgz2m', visibility: "visible", legend: 'https://www.cvillepedia.org/images/thumb/1958_Zoning_Map_Legend.png/800px-1958_Zoning_Map_Legend.png', }, '1976': { tileset: '4whkyidt?fresh', visibility: "none", legend: 'https://www.cvillepedia.org/images/1976_Zoning_Map_Legend.png', }, '1991': { tileset: '9boqv2oa', visibility: "none", legend: "https://www.cvillepedia.org/images/thumb/1991_Zoning_Legend.png/800px-1991_Zoning_Legend.png", }, '2003': { tileset: '8gzawsf9', visibility: "none", legend: "https://www.cvillepedia.org/images/thumb/2003_Zoning_Legend_-_smaller_-_rearranged.png/800px-2003_Zoning_Legend_-_smaller_-_rearranged.png", }, '2020': { tileset: 'bumddz60', visibility: "none", legend: "https://cvillepedia.org/images/2020_Zoning_Legend.png", }, } }34:[] 30:{"id":"91e606bb09171a4f","slug":"historical-zoning-maps-charlottesville","title":"Historical Zoning Maps of Charlottesville","thumbnail":"87788b9afd389c7bd5f7464b7487f98fd28bab483627c7f4399cff7989e8941f","access_level":"public","create_time":"$D2022-08-23T02:10:49.450Z","update_time":"$D2026-06-16T16:22:43.256Z","view_time":null,"first_public_time":"$D2022-08-28T21:24:01.576Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"80a152de5519610c","login":"rorystolzenberg","name":"Rory Stolzenberg","avatar_url":"https://avatars-next.observableusercontent.com/c360e2fec7e4b4fd695b5d26154fb359993edd7a6e876054d694af6f7d0c3cc3","tier":"starter_2024"},"version":573,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"14c316a4626aa091","login":"rorystolzenberg","name":"Rory Stolzenberg","avatar_url":"https://avatars-next.observableusercontent.com/c360e2fec7e4b4fd695b5d26154fb359993edd7a6e876054d694af6f7d0c3cc3","tier":null}],"members":[{"type":"individual","id":"14c316a4626aa091","login":"rorystolzenberg","name":"Rory Stolzenberg","avatar_url":"https://avatars-next.observableusercontent.com/c360e2fec7e4b4fd695b5d26154fb359993edd7a6e876054d694af6f7d0c3cc3","tier":null,"role":"editor"},{"type":"team","id":"80a152de5519610c","login":"rorystolzenberg","name":"Rory Stolzenberg","avatar_url":"https://avatars-next.observableusercontent.com/c360e2fec7e4b4fd695b5d26154fb359993edd7a6e876054d694af6f7d0c3cc3","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Historical Zoning Maps of Charlottesville","cells":[{"id":0,"value":"# Historical Zoning Maps of Charlottesville","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":219,"value":"fullscreenButton = html`\n \n \n `;\n//viewof fullscreenButton = buttonCTA(\"Switch to fullscreen\",\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"
\n

\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":301,"value":"## Source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":370,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"zoningColors2013 = {\n return {\n \"R-1\": \"#ffffaa\",\n \"R-1U\": \"#ffffaa\",\n \"R-1S\": \"#ffff00\",\n \"R-1SU\": \"#ffff00\",\n \"R-2\": \"#ffaa00\",\n \"R-2U\": \"#ffaa00\",\n \"R-3\": \"#ff5500\",\n \"UMD\": \"#ff5500\",\n \"UHD\": \"#ff5500\",\n \"PUD\": \"#55ffaa\",\n \"B-1\": \"#ffaaaa\",\n \"B-2\": \"#ff0000\",\n \"B-3\": \"#aa0000\",\n \"D\": \"#ff55ff\",\n \"DE\": \"#ff55ff\",\n \"DN\": \"#ff55ff\",\n \"WME\": \"#ff55ff\",\n \"WMW\": \"#ff55ff\",\n \"CC\": \"#ff55ff\",\n \"URB\": \"#ff55ff\",\n \"HS\": \"#ff55ff\",\n \"HW\": \"#ff55ff\",\n \"NCC\": \"#ff55ff\",\n \"CH\": \"#ff55ff\",\n \"SS\": \"#ff55ff\",\n \"CD\": \"#ff55ff\",\n \"WSD\": \"#ff55ff\",\n \"WS\": \"#ff55ff\",\n \"M-I\": \"#aaaaaa\",\n \"IC\": \"#aaaaaa\",\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"zoningColors2013Full = {\n var allZones = Object.keys(zone_strip_historic_map)\n // return allZones\n var colors = _.clone(zoningColors2013);\n allZones.forEach(z=>{\n if(typeof zoningColors2013[zone_strip_historic_map[z]] !== 'undefined'){\n colors[z] = zoningColors2013[zone_strip_historic_map[z]]\n }\n })\n // for(var x in colors){\n // if(x.indexOf(\"R-\") !== 0){\n // colors[x] = \"#ffffff\"\n // }\n // }\n return colors\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"zone_strip_historic_map = {\n return {\n \"R-1UH\": \"R-1U\",\n \"R-1H\": \"R-1\",\n \"B-1H\": \"B-1\",\n \"UHDH\": \"UHD\",\n \"UMDH\": \"UMD\",\n \"R-2C\": \"R-2\",\n \"DNH\": \"DN\",\n \"R-1SC\": \"R-1S\",\n \"WSH\": \"WS\",\n \"R-1SH\": \"R-1S\",\n \"R-3H\": \"R-3\",\n \"R-1C\": \"R-1\",\n \"MLTPC\": \"MLTP\",\n \"R-2UH\": \"R-2U\",\n \"R-1SUH\": \"R-1SU\",\n \"DNC\": \"DN\",\n \"CDH\": \"CD\",\n \"B-3H\": \"B-3\",\n \"HS\": \"HS\",\n \"DH\": \"D\",\n \"SSH\": \"SS\",\n \"WMEH\": \"WME\",\n \"R-2H\": \"R-2\",\n \"CCH\": \"CC\",\n \"WMWH\": \"WMW\",\n \"B-1C\": \"B-1\",\n \"CHH\": \"CH\",\n \"R-1SHC\": \"R-1S\",\n \"PUDH\": \"PUD\",\n \"WMSH\": \"WMS\",\n \"HSC\": \"HS\",\n \"MLTPH\": \"MLTP\",\n \"WSDH\": \"WSD\",\n \"B-2H\": \"B-2\",\n \"MRH\": \"MR\",\n \"ICH\": \"IC\",\n \"WMNH\": \"WMN\",\n \"DEH\": \"DE\",\n \"NCCH\": \"NCC\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"zoningLegendColors = {\n return {\n \"R-A\": \"#F1E3C0\",\n \"R-B\": \"#FEE33A\",\n \"R-C\": \"#E5BF22\",\n \"RX-3\": \"#F9A424\",\n \"RX-5\": \"#C67B29\",\n \"CX-3\": \"#BC7562\",\n \"CX-5\": \"#954B37\",\n \"CX-8\": \"#683527\",\n \"NX-3\": \"#BC62A1\",\n \"NX-5\": \"#A04484\",\n \"NX-8\": \"#81376A\",\n \"NX-10\": \"#642B52\",\n \"DX\": \"#471F3A\",\n \"IX-5\": \"#8BA4BB\",\n \"IX-8\": \"#6586A4\",\n \"CV\": \"#88C29C\",\n \"CM\": \"#58897B\",\n // \"default\": \"#eee\"\n };\n // old zoning\n // return {\n // \"R-1\": \"#ffffaa\",\n // \"R-2\": \"#ffaa00\",\n // \"R-3/UMD/UHD\": \"#ff5500\",\n // \"PUD\": \"#55ffaa\",\n // \"B-1\": \"#ffaaaa\",\n // \"B-2\": \"#ff0000\",\n // \"B-3\": \"#aa0000\",\n // \"D/DE/DN etc.\": \"#ff55ff\",\n // \"M-I/IC\": \"#aaaaaa\",\n // }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"gpinToFeaturegpinToFeature = Object.fromEntries(parcels.features.map(feature => {return [feature.properties.GeoParcelIdentificationNumber, feature.properties]}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"parcels = {\n var geojson = _.clone(features)\n geojson.features = _.uniqBy(geojson.features, d=>d.properties.GeoParcelIdentificationNumber)\n geojson.features = geojson.features.filter(d => {\n d.properties.lot_sf = turf.area(d)*9.322 \n return true &&\n // (d.properties.Zoning.indexOf(\"R-\") == 0 || d.properties.Zoning.indexOf(\"MLTP\") == 0) && \n // d.properties.OwnerName.indexOf(\"CITY OF CHARL\") === -1 &&\n // d.properties.OwnerName.indexOf(\"COUNTY OF ALB\") === -1 &&\n true\n })\n // geojson.features = geojson.features.filter(d => d.properties.lot_sf > 8125)\n // geojson.features = geojson.features.filter(d => d.properties.Zoning.indexOf(\"R-1S\") == 0)\n return geojson\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"PARCELS_URL = \"https://opendata.arcgis.com/datasets/0e9946c2a77d4fc6ad16d9968509c588_72.geojson\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"features = d3.json(PARCELS_URL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"function fullscreen(cell, button) {\n console.log(\"fullscreen\", arguments)\n alert('test')\n const test = document.body.requestFullscreen || document.body.webkitRequestFullscreen;\n if (!test) {\n return false;\n }\n if (document.body.className === \"fullscreen\") {\n return false;\n }\n\n button.onclick = () => {\n const container = cell.parentNode;\n if (container.requestFullscreen) {\n container.requestFullscreen();\n }\n else if (container.webkitRequestFullscreen) {\n container.webkitRequestFullscreen();\n }\n };\n\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"fullscreen(map, fullscreenButton)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"turf = require('https://npmcdn.com/@turf/turf/turf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"mapboxgl = {\n const gl = (await import(\"https://esm.sh/mapbox-gl@2.9.2\")).default;\n if (!gl.accessToken) {\n gl.accessToken = accessToken;\n const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"// mapboxgl.clearStorage();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":385,"value":"accessToken = \"pk.eyJ1Ijoicm9yeXN0b2x6ZW5iZXJnIiwiYSI6ImNrNHcxd2N1cDBkbTEzZWxpazNucHd2bDEifQ.x5vFKce43vj-qZJuTEpgNw\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"import {height} from \"@fil/height\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"import {buttonCTA} from \"@observablehq/buttons\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"