2d:null 2e:["$","title",null,{"children":"🍃dot density map in leaflet | joelondon | Observable"}] 33:T94b,map = { // yield container early: allows div to be placed on the page. let container = DOM.element('div', { style: `width:${width}px; height:${width / 1.6}px` }); yield container; // Leaflet uses div .offsetWidth and .offsetHeight to size the map. let map = L.map(container, { renderer: L.canvas() }); let osmLayer = L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' } ).addTo(map); // dot density generation options let options = { maxIterations: 50, distance: 20, numDots: 20 }; // geneerate dots let dots = []; let geojsonLayer = L.geoJson(geojson, { weight: 1, color: '#432', onEachFeature: (feature, layer) => { layer.bindPopup(feature.properties.name); layer.bindTooltip(feature.properties.name); let bounds = layer.getBounds(); let width = Math.abs(bounds._northEast.lng - bounds._southWest.lng); let height = Math.abs(bounds._northEast.lat - bounds._southWest.lat); outer: for (let i = 0; i < options.maxIterations; i++) { let p = [ bounds._southWest.lat + Math.random() * height, bounds._southWest.lng + Math.random() * width ]; if ( pip.pointInLayer(p, L.geoJSON(layer.toGeoJSON()), true).length > 0 ) { // // check distance to other dots // for (let j = 0; j < dots.length; j++) { // let dx = p[0] - dots[j][0], // dy = p[1] - dots[j][1]; // if (Math.sqrt(dx * dx + dy * dy) < options.distance) continue outer; // } // // check distance to polygon edge // for (let j = 0; j < feature.geometry.coordinates[0].length - 1; j++) { // if ( // distPointEdge( // p, // feature.geometry.coordinates[0][j], // feature.geometry.coordinates[0][j + 1] // ) < options.edgeDistance // ) // continue outer; // } dots.push(p); L.circleMarker(p, { radius: 1, weight: 1, color: 'black' }).addTo( map ); if (dots.length == options.numDots) break; } } } }).addTo(map); map.fitBounds(geojsonLayer.getBounds()); }34:[{"id":"110f3a8f34c7c546748ff00623e922ca9d1947a2c36981eb0a56b2a6944123d24f13fb7791a48339b36031349ff9f6a11d7736877b32d77227141e26c9c3d7c9","href":"https://static.observableusercontent.com/files/110f3a8f34c7c546748ff00623e922ca9d1947a2c36981eb0a56b2a6944123d24f13fb7791a48339b36031349ff9f6a11d7736877b32d77227141e26c9c3d7c9","name":"london-boroughs.geojson","type":"application/geo+json","lastModified":1626730873075.976,"size":1925824}] 31:{"id":"26f297f93ae2f461","slug":"dot-density-map-in-leaflet","title":"🍃dot density map in leaflet","thumbnail":"8b25a9a7b816767bb7125f625a2e7859db1c2ea8aefc94b73cec5086e1e316c2","access_level":"public","create_time":"$D2019-01-29T23:46:08.647Z","update_time":"$D2021-07-21T11:20:27.147Z","view_time":null,"first_public_time":"$D2019-03-14T10:33:04.207Z","has_unpublished_edits":null,"fork":{"id":"43395ed6a6e0de74","slug":"leaflet","title":"🍃 Leaflet","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":2,"starred":false,"owner":{"type":"team","id":"6edb1ee17def6298","login":"joelondon","name":"joelondon","avatar_url":"https://avatars-next.observableusercontent.com/1b5d1840f05e85f3b4385baf46d8db8872cd62175354f438fe517a84e9159486","tier":"starter_2024"},"version":473,"publish_version":473,"role":null,"authored":false,"authors":[{"type":"individual","id":"d8a94c1087e1b5bd","login":"joelondon","name":"joelondon","avatar_url":"https://avatars-next.observableusercontent.com/1b5d1840f05e85f3b4385baf46d8db8872cd62175354f438fe517a84e9159486","tier":null}],"members":[{"type":"individual","id":"d8a94c1087e1b5bd","login":"joelondon","name":"joelondon","avatar_url":"https://avatars-next.observableusercontent.com/1b5d1840f05e85f3b4385baf46d8db8872cd62175354f438fe517a84e9159486","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"🍃dot density map in leaflet","cells":[{"id":0,"value":"md`# 🍃dot density map in leaflet\n\nbased on [@floledermann/dot-density-maps-with-d3](https://observablehq.com/@floledermann/dot-density-maps-with-d3), which in turn is based on the [dot density algorithm in qgis](https://docs.qgis.org/2.8/en/docs/user_manual/processing_algs/qgis/vector_creation_tools/randompointsinsidepolygonsfixed.html)\n\n## including leaflet\n\n1. first, include Leaflet with \\`require()\\` to pull it from https://unpkg.com\n2. also include Leaflet CSS as a link tag, also pulling from unpkg.\n3. also include \\`leaflet-pip\\`\n\n### todo\n\n1. try \\`d3.polygonContains(polygon, p)\\` instead of \\`leaflet-pip\\` to see if it matches any more quickly (as per [@floledermann/dot-density-maps-with-d3](https://beta.observablehq.com/@floledermann/dot-density-maps-with-d3))\n2. try to space the points evenly (also in \\`@floledermann/dot-density-maps-with-d3\\`)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"L = require('leaflet@1.4.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"pip = require('https://bundle.run/leaflet-pip@1.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"pip.bassackwards = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`## Data on a map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"geojson = FileAttachment(\"london-boroughs.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"// ported from https://stackoverflow.com/q/30559799\nfunction distPointEdge(p, l1, l2) {\n let A = p[0] - l1[0],\n B = p[1] - l1[1],\n C = l2[0] - l1[0],\n D = l2[1] - l1[1];\n\n let dot = A * C + B * D;\n let len_sq = C * C + D * D;\n\n // alpha is proportion of closest point on the line between l1 and l2\n let alpha = -1;\n if (len_sq != 0)\n //in case of 0 length line\n alpha = dot / len_sq;\n\n // points on edge closest to p\n let X, Y;\n\n if (alpha < 0) {\n X = l1[0];\n Y = l1[1];\n } else if (alpha > 1) {\n X = l2[0];\n Y = l2[1];\n } else {\n X = l1[0] + alpha * C;\n Y = l1[1] + alpha * D;\n }\n\n let dx = p[0] - X;\n let dy = p[1] - Y;\n\n return Math.sqrt(dx * dx + dy * dy);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"