2d:null 2e:["$","title",null,{"children":"LeafletjS Playground | Dany Laksono | Observable"}] 33:T13e2,canvaslayerconst = { L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({ // -- initialized is called on prototype initialize: function (options) { this._map = null; this._canvas = null; this._frame = null; this._delegate = null; L.setOptions(this, options); }, delegate: function (del) { this._delegate = del; return this; }, needRedraw: function () { if (!this._frame) { this._frame = L.Util.requestAnimFrame(this.drawLayer, this); } return this; }, //------------------------------------------------------------- _onLayerDidResize: function (resizeEvent) { this._canvas.width = resizeEvent.newSize.x; this._canvas.height = resizeEvent.newSize.y; }, //------------------------------------------------------------- _updatePosition: function () { var topLeft = this._map.containerPointToLayerPoint([0, 0]); L.DomUtil.setPosition(this._canvas, topLeft); }, _onLayerDidMove: function () { this._updatePosition(); this.drawLayer(); }, //------------------------------------------------------------- getEvents: function () { var events = { resize: this._onLayerDidResize, moveend: this._onLayerDidMove, zoom: this._onLayerDidMove }; if (this._map.options.zoomAnimation && L.Browser.any3d) { events.zoomanim = this._animateZoom; } return events; }, //------------------------------------------------------------- onAdd: function (map) { this._map = map; this._canvas = L.DomUtil.create("canvas", "leaflet-layer"); this.tiles = {}; var size = this._map.getSize(); this._canvas.width = size.x; this._canvas.height = size.y; var animated = this._map.options.zoomAnimation && L.Browser.any3d; L.DomUtil.addClass( this._canvas, "leaflet-zoom-" + (animated ? "animated" : "hide") ); map._panes.overlayPane.appendChild(this._canvas); map.on(this.getEvents(), this); var del = this._delegate || this; del.onLayerDidMount && del.onLayerDidMount(); // -- callback\ this._updatePosition(); this.needRedraw(); }, //------------------------------------------------------------- onRemove: function (map) { var del = this._delegate || this; del.onLayerWillUnmount && del.onLayerWillUnmount(); // -- callback if (this._frame) { L.Util.cancelAnimFrame(this._frame); } map.getPanes().overlayPane.removeChild(this._canvas); map.off(this.getEvents(), this); this._canvas = null; }, //------------------------------------------------------------ addTo: function (map) { map.addLayer(this); return this; }, // -------------------------------------------------------------------------------- LatLonToMercator: function (latlon) { return { x: (latlon.lng * 6378137 * Math.PI) / 180, y: Math.log(Math.tan(((90 + latlon.lat) * Math.PI) / 360)) * 6378137 }; }, //------------------------------------------------------------------------------ drawLayer: function () { // -- todo make the viewInfo properties flat objects. var size = this._map.getSize(); var bounds = this._map.getBounds(); var zoom = this._map.getZoom(); var center = this.LatLonToMercator(this._map.getCenter()); var corner = this.LatLonToMercator( this._map.containerPointToLatLng(this._map.getSize()) ); var del = this._delegate || this; del.onDrawLayer && del.onDrawLayer({ layer: this, canvas: this._canvas, bounds: bounds, size: size, zoom: zoom, center: center, corner: corner }); this._frame = null; }, // -- L.DomUtil.setTransform from leaflet 1.0.0 to work on 0.0.7 //------------------------------------------------------------------------------ _setTransform: function (el, offset, scale) { var pos = offset || new L.Point(0, 0); el.style[L.DomUtil.TRANSFORM] = (L.Browser.ie3d ? "translate(" + pos.x + "px," + pos.y + "px)" : "translate3d(" + pos.x + "px," + pos.y + "px,0)") + (scale ? " scale(" + scale + ")" : ""); }, //------------------------------------------------------------------------------ _animateZoom: function (e) { var scale = this._map.getZoomScale(e.zoom); // -- different calc of animation zoom in leaflet 1.0.3 thanks @peterkarabinovic, @jduggan1 var offset = L.Layer ? this._map._latLngBoundsToNewLayerBounds( this._map.getBounds(), e.zoom, e.center ).min : this._map ._getCenterOffset(e.center) ._multiplyBy(-scale) .subtract(this._map._getMapPanePos()); L.DomUtil.setTransform(this._canvas, offset, scale); } }); return new L.CanvasLayer(); }34:T703,// leaflet_map = { // // await visibility(); // const container = html`

`; // yield container; // const tile = "Carto Positron Light"; // const attrib = "score"; // const map = L.map(container).setView([-7.8, 110.379], 13); // tileProviders(tile).addTo(map); // // 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(); // } // // 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 = // "" + // "Cambridge" + // "
" + // (props ? props[attrib] : "Hover over a feature"); // }; // info.addTo(map); // // Style function // const style = (feature, layer) => { // return { // fillColor: colourMap(feature.properties[attrib], false), // weight: 0.5, // fillOpacity: 0.9, // color: "#fff" // }; // }; // function onEachFeature(feature, layer) { // layer.on({ // mouseover: highlightFeature, // mouseout: resetHighlight // }); // } // var geolayer = L.geoJson(lsoa_scores, { // onEachFeature: onEachFeature, // style: style // }).addTo(map); // // Map utilities // map.fitBounds(geolayer.getBounds()); // layerGroup.addTo(map); // }35:T5c4,// { // layerGroup.clearLayers(); // // 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(); // } // // 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 = // "" + // "Cambridge" + // "
" + // (props ? props[attrib] : "Hover over a feature"); // }; // info.addTo(map); // // Style function // const style = (feature, layer) => { // return { // fillColor: colourMap(feature.properties[attrib], false), // weight: 0.5, // fillOpacity: 0.9, // color: "#fff" // }; // }; // function onEachFeature(feature, layer) { // layer.on({ // mouseover: highlightFeature, // mouseout: resetHighlight // }); // } // var geolayer = L.geoJson(lsoa_scores, { // onEachFeature: onEachFeature, // style: style // }).addTo(map); // return layerGroup.addLayer(marker); // }36:T417,map2 = { proj; const container = html`

`; yield container; const pixel_ratio = parseInt(window.devicePixelRatio) || 1; const max_zoom = 20; const tile_size = 512; const extent = 12367396.2185; // To the Equator const resolutions = Array(max_zoom + 1) .fill() .map((_, i) => extent / tile_size / Math.pow(2, i - 1)); //sopurce :https://tile.gbif.org/ui/3031/leaflet.html const crs = new L.Proj.CRS( "EPSG:3031", "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", { origin: [-extent, extent], projectedBounds: L.bounds( L.point(-extent, extent), L.point(extent, -extent) ), resolutions: resolutions } ); const antarcticaMap = L.map(container, { crs: crs }).setView([-90, -65], 3); L.tileLayer( "https://tile.gbif.org/3031/omt/{z}/{x}/{y}@{r}x.png?style=gbif-geyser".replace( "{r}", pixel_ratio ), { tileSize: 512 } ).addTo(antarcticaMap); }37:T7f0,{ const container = html`

`; yield container; // Initialize the Leaflet map const map = L.map(container).setView([51.5074, -0.1276], 5); // Add a tile layer (using OSM tiles) L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map); // Create a custom canvas element for the marker const customMarker = document.createElement("canvas"); customMarker.width = 50; customMarker.height = 50; // Function to draw a star and a circle on the canvas function drawCustomMarker(canvas) { const ctx = canvas.getContext("2d"); const size = canvas.width; const cx = size / 2; const cy = size / 2; const spikes = 5; const outerRadius = 20; const innerRadius = 10; // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw a star ctx.beginPath(); for (let i = 0; i < spikes; i++) { const outerX = cx + Math.cos((i * 2 * Math.PI) / spikes - Math.PI / 2) * outerRadius; const outerY = cy + Math.sin((i * 2 * Math.PI) / spikes - Math.PI / 2) * outerRadius; ctx.lineTo(outerX, outerY); const innerX = cx + Math.cos(((i + 0.5) * 2 * Math.PI) / spikes - Math.PI / 2) * innerRadius; const innerY = cy + Math.sin(((i + 0.5) * 2 * Math.PI) / spikes - Math.PI / 2) * innerRadius; ctx.lineTo(innerX, innerY); } ctx.closePath(); ctx.fillStyle = "blue"; ctx.fill(); // Draw a circle inside the star ctx.beginPath(); ctx.arc(cx, cy, 4, 0, 2 * Math.PI); ctx.fillStyle = "pink"; ctx.fill(); } // Draw the custom marker drawCustomMarker(customMarker); // Create a custom icon using the canvas const customIcon = L.divIcon({ className: "", html: customMarker.outerHTML, iconSize: [50, 50] }); // Add the custom marker to the map L.marker([51.5074, -0.1276], { icon: customIcon }).addTo(map); }38:[{"id":"7d1fe20da8ca37ac5867a1d7531060df07e97368593c8bbda6262a6153b0dd3841c86d5e040d375b9f011ee5416119d6d9f338149313f71b0092da0f64dfa93a","href":"https://static.observableusercontent.com/files/7d1fe20da8ca37ac5867a1d7531060df07e97368593c8bbda6262a6153b0dd3841c86d5e040d375b9f011ee5416119d6d9f338149313f71b0092da0f64dfa93a","name":"chross.png","type":"image/png","lastModified":1706994830570.54,"size":54554}] 31:{"id":"705e0aacdc5e7d71","slug":"leafletjs-playground","title":"LeafletjS Playground","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-03-02T18:54:47.365Z","update_time":"$D2025-05-23T21:12:06.938Z","view_time":null,"first_public_time":"$D2020-03-02T18:59:52.792Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"56ae77b65752301c","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":"starter_2024"},"version":427,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bff00548b500be1","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":null}],"members":[{"type":"individual","id":"2bff00548b500be1","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"LeafletjS Playground","cells":[{"id":0,"value":"# LeafletjS Playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"## LeafletJS Implementations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"### Basic Map settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"{\n await visibility();\n const container = html`

`;\n yield container;\n\n const map = L.map(container, {\n renderer: L.canvas()\n }).setView([-7.8, 110.379], 11);\n\n // basemap(s)\n let osmLayer = L.tileLayer(\n \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n let geojsonlayer = L.geoJson(raw_data);\n geojsonlayer.addTo(map);\n\n let heatlayer = heatLayer(twitter_data, {\n radius: heat_radius\n }).addTo(map);\n\n invalidation.then(() => {\n heatLayer.redraw().remove();\n map.remove();\n });\n\n // map.fitBounds(VanAreasLayer.getBounds());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"### Extending Layer Class","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"{\n await visibility();\n const container = html`

`;\n yield container;\n\n const map = L.map(container).setView([-7.8, 110.379], 10);\n\n // basemap(s)\n var CartoDB_Positron = L.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png\",\n {\n attribution:\n '© OpenStreetMap contributors © CARTO',\n subdomains: \"abcd\",\n maxZoom: 20\n }\n ).addTo(map);\n\n canvasLayer.addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"canvasLayer = {\n // console.log(\"sdsf\");\n const MyCanvasLayer = L.CanvasLayer.extend({\n onDrawLayer: function (info) {\n var ctx = info.canvas.getContext(\"2d\");\n console.log(d);\n ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);\n ctx.fillStyle = \"rgba(255,0,0, 0.2)\";\n for (var i = 0; i < twitter_data.length; i++) {\n var d = twitter_data[i];\n if (info.bounds.contains([d[0], d[1]])) {\n var dot = info.layer._map.latLngToContainerPoint([d[0], d[1]]);\n console.log(info.layer._map);\n ctx.beginPath();\n ctx.arc(dot.x, dot.y, 10, 0, Math.PI * 8);\n ctx.fill();\n ctx.closePath();\n }\n }\n // ctx.fillStyle = \"rgba(255,116,0, 0.8)\";\n // ctx.beginPath();\n // ctx.arc(100, 100, 10, 0, Math.PI * 2);\n // ctx.fill();\n // ctx.closePath();\n }\n });\n\n return new MyCanvasLayer();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"### Dynamic Layers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"Wraps dynamic layer in a layer group to avoid flickering due to map redraw. Useful e.g., for linked view.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"viewof long = Inputs.range([110.079, 110.779], { label: \"longitude\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"viewof lat = Inputs.range([-7.58, -7.99], { label: \"latitude\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"{\n await visibility();\n const container = html`

`;\n yield container;\n\n const map = L.map(container).setView([-7.8, 110.379], 13);\n\n // basemap(s)\n let osmLayer = L.tileLayer(\n \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n layerGroup.addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"coordinates = [lat, long]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"layerGroup = L.featureGroup()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"// layer is constructed/deconstructed by adding/removing from the layer group\n{\n layerGroup.clearLayers();\n let marker = L.marker([coordinates[0], coordinates[1]], { icon: crossHair });\n // let trackBuffFeature = L.geoJSON(trackBuff, {\n // style: (feature) => {\n // return {\n // color: \"#FF4081\",\n // weight: 1,\n // opacity: 0.8,\n // fillOpacity: 0\n // };\n // }\n // });\n\n return layerGroup.addLayer(marker);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"crossHair = L.icon({\n iconUrl: chross,\n // shadowUrl: \"leaf-shadow.png\",\n\n iconSize: [100, 100], // size of the icon\n shadowSize: [100, 100], // size of the shadow\n iconAnchor: [22, 94], // point of the icon which will correspond to marker's location\n shadowAnchor: [4, 62], // the same for the shadow\n popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"See the [spatial challenge example](https://observablehq.com/d/8aac9263995a8879)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"### Different Projections\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"proj = (L[\"Proj\"] =\n await require(\"https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"L = {\n const L = await require(\"leaflet@1.9.4/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1.9.4/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"chross = FileAttachment(\"chross.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"