30:T12d2,quickmap = function* (data, params = {}) { const { width = 800, height = 400, tile = "Carto Positron Light", attrib = "fid", title = attrib, method = "quantile", full = true, heatmap = { radius: 40, blur: 25, maxZoom: 17, gradient: { 0.4: "blue", 0.65: "lime", 1: "red" } }, choropleth = { numClass: 4, method: "jenks", colorScheme: "BuPu" } } = params; // Declare container let container = htl.html`

`; yield container; full ? fullscreen(container, { center: true }) : ""; // Declare map instance const map = L.map(container, { renderer: L.canvas(), zoomSnap: 0.25 }).setView([-7.8, 110.379], 13); map.preferCanvas = true; // use canvas rendering tileProviders(tile).addTo(map); // -- Helper functions // Highlight on hover function highlightFeature(feature) { var feature_targeted = feature.target; feature_targeted.setStyle({ color: "#fc0000" }); if (!L.Browser.ie && !L.Browser.opera) { feature_targeted.bringToFront(feature.target); } info.update(feature_targeted.feature.properties); } function resetHighlight(e) { geolayer.resetStyle(e.target); info.update(); } // OnEachFeature // iterate to all feature. store the data and highlight relevant value const stored_data = []; if (params.choropleth) { for (const feature of data.features) { const value = feature.properties[attrib]; // console.log(value); stored_data.push(value); } } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight }); } // Style function const style = (feature, layer) => { const value = feature.properties[attrib]; let newvalue; if (!params.choropleth) { newvalue = null; } else { try { newvalue = getColor( value, discr.breaks(stored_data, { method: params.choropleth.method, nb: params.choropleth.numClass, minmax: true, precision: 2 }), params.choropleth.colorScheme ); } catch (error) { console.log("error occured during style mapping"); // console.error(error); } } return { fillColor: newvalue || "lightblue", weight: 0.5, fillOpacity: 0.8, color: "#fff" }; }; // info on hover var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create("div", "info"); this.update(); return this._div; }; info.update = function (props) { this._div.innerHTML = "" + title + "
" + (props ? props[attrib] : "Hover over a feature"); }; info.addTo(map); // console.log( // discr.breaks(stored_data, { // method: params.choropleth.method, // nb: params.choropleth.numClass - 1, // minmax: true, // precision: 2 // }) // ); // legend var legend = L.control({ position: "bottomleft" }); legend.onAdd = function (map) { var div = L.DomUtil.create("div", "info legend"); var svgString; try { svgString = new XMLSerializer().serializeToString( drawLegend( title, discr.breaks([...new Set(stored_data)], { method: params.choropleth.method, nb: params.choropleth.numClass - 1, minmax: true, precision: 2 }), params.choropleth.colorScheme ) ); } catch (error) { console.log(error); svgString = ""; } div.innerHTML = svgString; return div; }; legend.addTo(map); // The Layer var geolayer = L.geoJson(data, { // filter: function (feature, layer) { // if (feature.properties) { // return feature.properties[filter] !== undefined // ? !feature.properties[filter] // : true; // } // return false; // }, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }); }, onEachFeature: onEachFeature, style: style }).addTo(map); // Map utilities map.fitBounds(geolayer.getBounds()); if (params.heatmap) { // console.log(stored_data); let heatmapLayer = new heatLayer(geoJson2heat(data), { radius: heatmap.radius, blur: heatmap.blur, maxZoom: heatmap.maxZoom, gradient: heatmap.gradient }); heatmapLayer.addTo(map); map.removeLayer(geolayer); } invalidation.then(() => { // heatLayer.redraw().remove(); map.remove(); }); }31:T2832,tileDictionary = { const tileDictionary = { "Stadia Stamen Toner": { url: "https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png", options: { maxZoom: 20, attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap' } }, "Stadia Stamen Toner Lite": { url: "https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png", options: { maxZoom: 20, attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap' } }, "Stadia Stamen Watercolor": { url: "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg", options: { maxZoom: 16, attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap' } }, "Stadia Alidade": { url: "https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png", options: { maxZoom: 20, attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap' } }, "Stadia Alidade Dark": { url: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png", options: { maxZoom: 20, attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap' } }, "Stadia Outdoors": { url: "https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png", options: { maxZoom: 20, attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap' } }, "Stadia Stamen Terrain": { url: "https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}{r}.png", options: { maxZoom: 20, attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap' } }, "Carto Positron Light": { url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", options: { attribution: '© OpenStreetMap contributors' } }, "Carto Positron Light NoLabel": { url: "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png", options: { attribution: '© OpenStreetMap contributors © CARTO', subdomains: "abcd", maxZoom: 20 } }, "Carto Dark": { url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png", options: { attribution: '© OpenStreetMap contributors © CARTO', subdomains: "abcd", maxZoom: 20 } }, "Carto Dark NoLabel": { url: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png", options: { attribution: '© OpenStreetMap contributors © CARTO', subdomains: "abcd", maxZoom: 20 } }, "Carto Voyager": { url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", options: { attribution: '© OpenStreetMap contributors © CARTO', subdomains: "abcd", maxZoom: 20 } }, "Carto Voyager NoLabel": { url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png", options: { attribution: '© OpenStreetMap contributors © CARTO', subdomains: "abcd", maxZoom: 20 } }, "OpenStreetMap Bright": { url: "https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png'", options: { attribution: '© OpenStreetMap contributors © CARTO', maxZoom: 20 } }, "OpenStreetMap Standard": { url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png", options: { attribution: '© OpenStreetMap contributors' } }, "OpenStreetMap H.O.T.": { url: "http://tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", options: { attribution: '© OpenStreetMap contributors' } }, "OpenStreetMap Monochrome": { url: "http://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png", options: { attribution: '© OpenStreetMap contributors' } }, OpenTopoMap: { url: "https://tile.opentopomap.org/{z}/{x}/{y}.png", options: { attribution: '© OpenStreetMap contributors' } }, // MapBox: { // url: "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}{r}?access_token={accessToken}", // options: { // attribution: // '© Mapbox ' + // "{attribution.OpenStreetMap} " + // 'Improve this map', // tileSize: 512, // maxZoom: 18, // zoomOffset: -1, // id: "mapbox/streets-v11", // accessToken: "" // } // }, "Google Maps": { url: "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}" }, "Google Satellite": { url: "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}" }, "Google Terrain": { url: "https://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z}" }, "Google Terrain Hybrid": { url: "https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}" }, "Google Satellite Hybrid": { url: "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}" }, "Wikimedia Map": { url: "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png" }, "Wikimedia Hike Bike Map": { url: "http://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png" }, "Esri Boundaries Places": { url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}" }, "Esri Gray (dark)": { url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}" }, "Esri Gray (light)": { url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}" }, "Esri National Geographic": { url: "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}" }, "Esri Ocean": { url: "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}" }, "Esri Satellite": { url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" }, "Esri Standard": { url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}" }, "Esri Terrain": { url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}" }, "Esri Transportation": { url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}" }, "Esri Topo World": { url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}" }, "Strava All": { url: "https://heatmap-external-b.strava.com/tiles/all/bluered/{z}/{x}/{y}.png" }, "Strava Run": { url: "https://heatmap-external-b.strava.com/tiles/run/bluered/{z}/{x}/{y}.png?v=19" }, "Open Weather Map Temperature": { url: "http://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?APPID=1c3e4ef8e25596946ee1f3846b53218a" }, "Open Weather Map Clouds": { url: "http://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?APPID=ef3c5137f6c31db50c4c6f1ce4e7e9dd" }, "Open Weather Map Wind Speed": { url: "http://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?APPID=f9d0069aa69438d52276ae25c1ee9893" }, "Bing VirtualEarth": { url: "http://ecn.t3.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1" } }; return tileDictionary; }32:T1ac4,tileProviders = (tile) => { // const tileDictionary = { // CartoLight: { // url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", // options: { // attribution: // '© OpenStreetMap contributors' // } // }, // CartoLightNoLabel: { // url: "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png", // options: { // attribution: // '© OpenStreetMap contributors © CARTO', // subdomains: "abcd", // maxZoom: 20 // } // }, // CartoDark: { // url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png", // options: { // attribution: // '© OpenStreetMap contributors © CARTO', // subdomains: "abcd", // maxZoom: 20 // } // }, // CartoDarkNoLabel: { // url: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png", // options: { // attribution: // '© OpenStreetMap contributors © CARTO', // subdomains: "abcd", // maxZoom: 20 // } // }, // CartoVoyager: { // url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", // options: { // attribution: // '© OpenStreetMap contributors © CARTO', // subdomains: "abcd", // maxZoom: 20 // } // }, // CartoVoyagerNoLabel: { // url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png", // options: { // attribution: // '© OpenStreetMap contributors © CARTO', // subdomains: "abcd", // maxZoom: 20 // } // }, // // MapBox: { // // url: "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}{r}?access_token={accessToken}", // // options: { // // attribution: // // '© Mapbox ' + // // "{attribution.OpenStreetMap} " + // // 'Improve this map', // // tileSize: 512, // // maxZoom: 18, // // zoomOffset: -1, // // id: "mapbox/streets-v11", // // accessToken: "" // // } // // }, // "Google Maps": { // url: "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}" // }, // "Google Satellite": { // url: "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}" // }, // "Google Terrain": { // url: "https://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z}" // }, // "Google Terrain Hybrid": { // url: "https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}" // }, // "Google Satellite Hybrid": { // url: "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}" // }, // "Wikimedia Map": { // url: "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png" // }, // "Wikimedia Hike Bike Map": { // url: "http://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png" // }, // "Esri Boundaries Places": { // url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}" // }, // "Esri Gray (dark)": { // url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}" // }, // "Esri Gray (light)": { // url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}" // }, // "Esri National Geographic": { // url: "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}" // }, // "Esri Ocean": { // url: "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}" // }, // "Esri Satellite": { // url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" // }, // "Esri Standard": { // url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}" // }, // "Esri Terrain": { // url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}" // }, // "Esri Transportation": { // url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}" // }, // "Esri Topo World": { // url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}" // }, // "OpenStreetMap Standard": { // url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png" // }, // "OpenStreetMap H.O.T.": { // url: "http://tile.openstreetmap.fr/hot/{z}/{x}/{y}.png" // }, // "OpenStreetMap Monochrome": { // url: "http://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png" // }, // OpenTopoMap: { // url: "https://tile.opentopomap.org/{z}/{x}/{y}.png" // }, // "Strava All": { // url: "https://heatmap-external-b.strava.com/tiles/all/bluered/{z}/{x}/{y}.png" // }, // "Strava Run": { // url: "https://heatmap-external-b.strava.com/tiles/run/bluered/{z}/{x}/{y}.png?v=19" // }, // "Open Weather Map Temperature": { // url: "http://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?APPID=1c3e4ef8e25596946ee1f3846b53218a" // }, // "Open Weather Map Clouds": { // url: "http://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?APPID=ef3c5137f6c31db50c4c6f1ce4e7e9dd" // }, // "Open Weather Map Wind Speed": { // url: "http://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?APPID=f9d0069aa69438d52276ae25c1ee9893" // }, // "CartoDb Dark Matter": { // url: "http://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png" // }, // "CartoDb Positron": { // url: "http://basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" // }, // "Bing VirtualEarth": { // url: "http://ecn.t3.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1" // } // }; var provider = { url: tileDictionary[tile].url, options: tileDictionary[tile].options }; return L.tileLayer(provider.url, provider.options); }33:[{"id":"eec5260d6f33be0d16b381f3a72e818851c78d863d2b329bda246cdcc1450c0742a88b230e4c81ba2274d48f2ad5454606a1880ad750112b749d63a8d2bad5f5","href":"https://static.observableusercontent.com/files/eec5260d6f33be0d16b381f3a72e818851c78d863d2b329bda246cdcc1450c0742a88b230e4c81ba2274d48f2ad5454606a1880ad750112b749d63a8d2bad5f5","name":"msoas.geojson","type":"application/geo+json","lastModified":1687146577576.124,"size":587875},{"id":"54d8740e438c43d0d99a9364f56a2d9e13c45a3d774bd389af78d626aea3d6ac43f895854e9cb5b8c6e8bee00a7b06acdd91c3fe94a0c514521e5cc5c8da3d79","href":"https://static.observableusercontent.com/files/54d8740e438c43d0d99a9364f56a2d9e13c45a3d774bd389af78d626aea3d6ac43f895854e9cb5b8c6e8bee00a7b06acdd91c3fe94a0c514521e5cc5c8da3d79","name":"existing_evcs.geojson","type":"application/geo+json","lastModified":1687474063977.4,"size":14976}] 2e:{"title":"Quick Map Viewer","cells":[{"id":0,"value":"# Quick Map Viewer","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"A simple utilities to quickly visualize GeoJSON data in Observablehq. Built upon [LeafletJS](leafletjs.com), and inspired by [Geoverview](https://github.com/neocarto/geoverview).","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"quickmap(msoas, {\n attrib: \"nocars\",\n title: \"Number of Cars\",\n choropleth: {\n numClass: 6,\n method: \"quantile\",\n colorScheme: \"OrRd\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1126,"value":"// quickmap(data, {\n// attrib: \"R1207FK2\",\n// title: \"Number of Cars\",\n// choropleth: {\n// numClass: 6,\n// method: \"quantile\",\n// colorScheme: \"OrRd\"\n// }\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":901,"value":"## How to use","pinned":false,"hidden":false,"mode":"md"},{"id":905,"value":"Import the library:\n\n```\nimport {quickmap} from '@danylaksono/quickmap'\n```\n\nThen simply pass the geojson data as an argument:\n\n`quickmap(geojson)`\n\nThe library will display an interactive map of the geoJSON file. Configuration can be passed as optional arguments, e.g., when you wants to display choropleth or heatmap from the data.\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":929,"value":"Parameters can be passed as follow:\n\n```\nquickmap(geojson, {\n width = 800, // width of map\n height = 400, // height of map\n tile = \"CartoLight\", // Basemap tile \n attrib = \"fid\", // Selected attribute to display\n filter = \"\", // Filter (WIP)\n heatmap = false, // Display heatmap (for points layer)\n choropleth = { // Parameters for Choropleth map\n numClass: 4, // Num of Classes\n method: \"jenks\", // Classification Method\n colorScheme: \"BuPu\" // Choropleth Scheme \n }\n});\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":935,"value":"Binning `method` is based on [Statsbreaks](https://observablehq.com/@neocartocnrs/hello-statsbreaks), which consist of the following methods: _\"jenks\", \"q6\", \"quantile\", \"equal\", \"msd\", \"geometric\"._ \n\n`colorScheme` is based on the [ColorBrewer](https://colorbrewer2.org/) sequential schemes, which are: _\n \"Blues\",\n \"Greens\",\n \"Greys\",\n \"Oranges\",\n \"Purples\",\n \"BuGn\",\n \"BuPu\",\n \"GnBu\",\n \"OrRd\",\n \"PuBuGn\",\n \"PuBu\",\n \"PuRd\",\n \"RdPu\",\n \"YlGnBu\",\n \"YlGn\",\n \"YlOrBr\",\n \"YlOrRd\",\n \"BrBG\",\n \"PRGn\",\n \"PiYG\",\n \"PuOr\",\n \"RdBu\",\n \"RdGy\",\n \"RdYlBu\",\n \"RdYlGn\",\n \"Spectral\"._","pinned":false,"hidden":false,"mode":"md"},{"id":1010,"value":"### Heatmap ","pinned":false,"hidden":false,"mode":"md"},{"id":1012,"value":"Heatmap is based on the [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat) plugin. The following configurations can be passed to the heatmap (taken verbatim from the plugin):\n\n- minOpacity - the minimum opacity the heat will start at\n- maxZoom - zoom level where the points reach maximum intensity (as intensity scales with zoom), equals maxZoom of the map by default\n- max - maximum point intensity, 1.0 by default\n- radius - radius of each \"point\" of the heatmap, 25 by default\n- blur - amount of blur, 15 by default\n- gradient - color gradient config, e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}","pinned":false,"hidden":false,"mode":"md"},{"id":1004,"value":"Example of heatmap implementation:","pinned":false,"hidden":false,"mode":"md"},{"id":1006,"value":"{\n await visibility();\n return quickmap(existing_evcs, {\n attrib: \"nocars\",\n fullscreen: true,\n heatmap: { radius: 60, blur: 45 }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"### Main and Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"// from https://github.com/Leaflet/Leaflet.heat/issues/64\ngeoJson2heat = function (geojson) {\n return geojson.features.map(function (feature) {\n return [\n parseFloat(feature.geometry.coordinates[1]),\n parseFloat(feature.geometry.coordinates[0])\n ];\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"function getColor(value, domain, colorScheme) {\n const color = d3\n .scaleThreshold()\n .domain(domain)\n .range(d3[`scheme${colorScheme}`][domain.length + 1]);\n return color(value);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"drawLegend = (attrib, domain, colorScheme) => {\n return Legend(\n d3\n .scaleThreshold()\n // .scaleSequentialQuantile()\n .domain(domain)\n .range(d3[`scheme${colorScheme}`][domain.length + 1]),\n {\n title: attrib,\n tickSize: 0\n }\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"### TODOS","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":799,"value":"### Test Data","pinned":false,"hidden":false,"mode":"md"},{"id":1000,"value":"existing_evcs = FileAttachment(\"existing_evcs.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"msoas = FileAttachment(\"msoas.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"msoas.features.forEach((feature) => {\n const code = feature.properties.code;\n feature.properties.nocars = percentNoCars[code];\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"import { percentNoCars } from \"@jwolondon/hello-census-2021\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"checkdata = Object.values(percentNoCars)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":1162,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"discr = require(\"statsbreaks\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"import { Legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"heatLayer = require(\"leaflet.heat\").catch(() => L.heatLayer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"L = {\n const L = await require(\"leaflet@latest/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@latest/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"import { fullscreen } from \"@fil/fullscreen\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"import { data } from \"@danylaksono/yogyakarta-census\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}