2b:null 2c:["$","title",null,{"children":"Leaflet map with points and regions | Ernesto Laval | Observable"}] 31:[] 2f:{"id":"9b782c7b4915cfca","slug":"leaflet-map-with-points-and-regions","title":"Leaflet map with points and regions","thumbnail":"a186443c6844eddb37e11103dc9b4cee495ea60b933cfe2483d01be87df6657e","access_level":"public","create_time":"$D2018-04-20T11:37:45.250Z","update_time":"$D2018-04-27T10:21:58.679Z","view_time":null,"first_public_time":"$D2018-04-27T03:13:35.640Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"0843f5dc42ca68a0","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":"starter_2024"},"version":851,"publish_version":851,"role":null,"authored":false,"authors":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null}],"members":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Leaflet map with points and regions","cells":[{"id":0,"value":"md`\n# Leaflet map with points and regions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"mainContainer = html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"mapContainer = {\n const mapContainer = html`

`\n mainContainer.appendChild(mapContainer);\n \n d3.select(mapContainer)\n .style(\"height\", \"500px\")\n\n return mapContainer\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"map = {\n\n const centerUSA = [38.75, -100];\n const initialZoom = 4;\n \n if (true) {\n const _map = L.map(mapContainer, {\n center: centerUSA,\n zoom: initialZoom,\n zoomDelta: .25,\n zoomSnap: .25,\n minZoom: 1,\n maxZoom: 20\n });\n return _map\n }\n \n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"baseLayer = {\n return new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors',\n detectRetina: true\n }).addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"regionLayers = {\n L_curve\n \n const regionsPaths = regions.map(d => {\n return {region: d.region, path: svgPath2LeafletPath(d.path)}\n })\n \n const layers = regionsPaths.map(d => {\n const layer = L.curve(d.path,\n\t\t\t\t\t{color:'blue',fill:true}).addTo(map);\n \n layer._data = d;\n layer.on(\"mouseover\", showTooltip);\n layer.on(\"mouseout\", hideTooltip);\n \n return layer;\n })\n \n return layers \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"pointLayers = { \n \n // Create point layers\n const layers = points.map(d => {\n var circle = L.circle([+d.lat, +d.long], {\n color: 'red',\n fillColor: '#f03',\n fillOpacity: 0.5,\n radius: 500\n }).addTo(map);\n \n return circle;\n })\n \n return layers\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":" showTooltip = function(d) {\n \n d3.select(\"#tooltip\")\n .style(\"visibility\", \"visible\")\n .style(\"top\", d.layerPoint.y+5+\"px\")\n .style(\"left\", d.layerPoint.x+\"px\")\n .text(d.target._data.region)\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"hideTooltip = function(d) {\n d3.select(\"#tooltip\")\n .style(\"visibility\", \"hidden\")\n .style(\"top\", \"100px\")\n .style(\"left\", \"100px\")\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"setTooltipIndexZ = {\n regionLayers\n\n \n let maxIndexZ = 0;\n d3.select(mapContainer).selectAll(\".leaflet-pane\")\n .each(function(d) {\n debugger;\n const index = +d3.select(this).style(\"z-index\");\n \n maxIndexZ = index > maxIndexZ ? index : maxIndexZ;\n })\n \n\n let tooltip = d3.select(\"#tooltip\")\n .style(\"z-index\", maxIndexZ) \n \n return maxIndexZ\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"regions = {\n // Group the points in 3 regions (west, center, east)\n const regions = _.groupBy(points, d => +d.long > -100 ? \"east\" : +d.long > -120 ? \"center\" : \"west\")\n \n // Get Hullpoints for each region that define area sorrounding each region\n const regionsHullpoints = _.map(regions, (points,key) => {\n return {'region': key, 'hullPoints': d3.polygonHull(points.map(d => [d.lat, d.long]))}\n })\n \n \n let pathGenerator = d3.line()\n .curve(d3.curveCatmullRomClosed)\n .x((d) => d[0])\n .y((d) => d[1]);\n \n const regionsPaths = regionsHullpoints.map(d => {\n return {\n region : d.region,\n path : pathGenerator(d.hullPoints)\n }\n })\n return regionsPaths\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"points = {\n \n // Retreive data with points geolocated in the US\n // [ {id: \"45\", lat: \"29.81275013\", long: \"-95.3783701\"}, ...]\n const _points = d3.tsv(\"https://gist.githubusercontent.com/elaval/401608006b041ce1d58cbe0f8e14c796/raw/ce823235f0cb992b4a3e05efcd00a5dfdfee6ab3/points.tsv\");\n \n return _points\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"L = {\n const Leaflet = require('leaflet');\n //require(\"https://cdn.jsdelivr.net/npm/leaflet-curve@1.0.0/leaflet.curve.min.js\");\n return Leaflet;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"L_curve = L, require('leaflet-curve').catch(() => L.curve)\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"svgPath2LeafletPath = function(path) {\n let CGroups = path.split(\"C\");\n \n let pseudoPath = [];\n let origin = CGroups[0].split(\"M\")[1].split(\",\");\n \n CGroups.forEach((g,i) => {\n if (i == 0) {\n let origin = g.split(\"M\")[1].split(\",\");\n pseudoPath.push(\"M\", [+origin[0], +origin[1]])\n } else {\n let points = g.split(\",\");\n pseudoPath.push(\"C\");\n points.forEach((p,i) => {\n i % 2 == 0 ? pseudoPath.push([+points[i], +points[i+1]]) : null;\n })\n }\n });\n \n return pseudoPath; //path.split(\"C\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"leafletstyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"globalstyle = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"