34:["$","title",null,{"children":"Leaflet with Heatmap and Marker Cluster | Sinau Viz | Observable"}] 3c:Tbdb,smokingMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); //let container = DOM.element('div', { style: `width:100%; height:25vh` }); //const container = d3.create("div").style("width", `100%`).style("height", `25vh`).node(); //const container = html`

`; // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Create a map object and add a layer to it. //let map = L.map(container).setView([-6.200000, 106.816666], 11); ////[latitude, longitude] const map = L.map(container).setView([-6.200000, 106.816666], 11); ////[latitude, longitude] //let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { // attribution: '© OpenStreetMap contributors' //}).addTo(map); let osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: "© OpenStreetMap contributors" }).addTo(map); //let Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { //attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance //Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'}).addTo(map); // Filter the data based on user input let selectedMapping = smoking.features.filter((d) => { if(mappingCategory.length > 0){ return mappingCategory.includes(d.properties.mapping_type) } else if (mappingCategory.length === 0) { return mappingTypes.includes(d.properties.mapping_type) } }) //convert data points to [lat,lng, intensity] let smokingPoints = selectedMapping.map(features => features.geometry.coordinates.slice().reverse().concat([0.1])); //Add heatmap layer let smokingLayer = L.heatLayer(smokingPoints, { minOpacity: 0.5, maxZoom: 22, max: 1.0, radius: 8, blur: 4, gradient: null }).addTo(map); let markers = L.markerClusterGroup({}); // Add popup on the markers let shopsLayer = L.geoJson(selectedMapping, { onEachFeature: function (feature, layer) { const d = feature.properties; layer.bindTooltip(`${d.mapping_type}`, {sticky: true}); } }); markers.addLayer(shopsLayer); map.addLayer(markers); }3d:T8d8,//L = await require("leaflet@1/dist/leaflet.js") // L = { // const L = await require('leaflet@1.9.4'); // await require('leaflet.markercluster'); // //await require('leaflet.heat'); // const leafletCSS = await require.resolve("leaflet@1/dist/leaflet.css"); // const leafletDefaultExtent = await require.resolve('leaflet.defaultextent/dist/leaflet.defaultextent.css'); // const markerclusterCSS = await require.resolve('leaflet.markercluster@1.4.1/dist/MarkerCluster.css'); // const markerclusterCSSdefault = await require.resolve('leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css'); // document.head.appendChild(L._style = html``); // document.head.appendChild(L._style = html``); // document.head.appendChild(L._style = html``); // document.head.appendChild(L._style = html``); // return L; // } // from https://observablehq.com/@pbrockmann/leaflet-synchro L = { const r = require.alias({ leaflet: "leaflet@1.9.4/dist/leaflet-src.js", "leaflet/dist/leaflet.css": "leaflet@1.8.0/dist/leaflet.css", "leaflet.markercluster": "leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js", "leaflet.markercluster/dist/MarkerCluster.css": "leaflet.markercluster@1.4.1/dist/MarkerCluster.css", "leaflet.markercluster/dist/MarkerCluster.Default.css": "leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css", "leaflet.heat": "leaflet.heat/dist/leaflet-heat.js", }); const L = await r("leaflet"); await Promise.all([ r("leaflet.markercluster").catch(() => {}), r("leaflet.heat").catch(() => {}) ]); if (!L._style) { // apply stylesheets (only once on load) L._style = true; document.head.append(htl.html` `); } return L; }3e:[{"id":"f0110b7fcc32722a3363aa50e0c14421f07f892d2c72f1ef2a9f9141feb00a19f409b331e88a5da54112041b7ee07c9e3524ba1ab6936b838a7f45623fdf5d69","href":"https://static.observableusercontent.com/files/f0110b7fcc32722a3363aa50e0c14421f07f892d2c72f1ef2a9f9141feb00a19f409b331e88a5da54112041b7ee07c9e3524ba1ab6936b838a7f45623fdf5d69","name":"iklan-penjual-rokok-simplified-3.geojson","type":"application/geo+json","lastModified":1686233996209.729,"size":32492}] 38:{"id":"8f436f61810d14e8","slug":"leaflet-with-heatmap-and-marker-cluster-exercise","title":"Leaflet with Heatmap and Marker Cluster","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-06-08T14:04:21.977Z","update_time":"$D2023-06-11T10:10:12.968Z","view_time":null,"first_public_time":"$D2023-06-08T14:04:21.977Z","has_unpublished_edits":null,"fork":{"id":"2dfffda4dfa09eed","slug":"leaflet-heatmap","title":"Leaflet-Heatmap","owner":{"id":"eac7311f5cb7336e","login":"hchen549","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"2acf95657f069270","login":"antoon","name":"Sinau Viz","avatar_url":"https://avatars-next.observableusercontent.com/8c06cec6748997c73ab57316074f68e001abba8cf9e3dd037a014ff41f001fa8","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":310,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d208f5037d47afcf","login":"antoon","name":"Sinau Viz","avatar_url":"https://avatars-next.observableusercontent.com/8c06cec6748997c73ab57316074f68e001abba8cf9e3dd037a014ff41f001fa8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d208f5037d47afcf","login":"antoon","name":"Sinau Viz","avatar_url":"https://avatars-next.observableusercontent.com/8c06cec6748997c73ab57316074f68e001abba8cf9e3dd037a014ff41f001fa8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Leaflet with Heatmap and Marker Cluster","cells":[{"id":64,"value":"# Leaflet with Heatmap and Marker Cluster","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"viewof mappingCategory = Checkbox(mappingTypes, {multiple:true, label:\"Jenis Pemetaan\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"mappingTypes = [... new Set(smoking.features.map(obj => obj.properties.mapping_type))].sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"smoking = FileAttachment(\"iklan-penjual-rokok-simplified-3.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"## Assets\n\n#### Leaflet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"#### Observable Inputs and D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"import {Checkbox} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null