31:T79e,map = { // create map container let mapContainer = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield mapContainer; // create leaflet map with attributions let map = L.map(mapContainer).setView([34.1, -118.25], 10); let osmLayer = L.tileLayer( // 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png') 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors, © CartoDB', detectRetina: false, maxZoom: 18, minZoom: 10, noWrap: false, subdomains: 'abc' }).addTo(map); // create school points for the heatmap layer let schoolPoints = schools.features.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.1])); // intensity // add heatmap layer let schoolsHeatLayer = heatLayer(schoolPoints, { minOpacity: 0.5, maxZoom: 18, max: 1.0, radius: 8, blur: 5, gradient: null }).addTo(map); // add school markers let markers = markerCluster({}); let schoolsLayer = L.geoJson(schools, { onEachFeature: function (feature, layer) { const school = feature.properties; const html = `` layer.bindPopup(html); layer.bindTooltip(`${school.name}, ${school.grades_served}`, {sticky: true}); } }); markers.addLayer(schoolsLayer); map.addLayer(markers); // map.fitBounds(markers.getBounds()); // add fullscreen toggle fullScreen({ position: 'topright', title: 'full screen', titleCancel: 'exit full screen', forceSeparateButton: true, }).addTo(map); map.on('enterFullscreen', function(){ console.log('entered fullscreen'); }); }32:[] 2f:{"title":"Charter schools in Los Angeles County","cells":[{"id":0,"value":"md`# Charter schools in Los Angeles County\n\nLeafletJS map with a heatmap and clustered markers example.\n\nData Sources: California Department of Education, [Los Angeles Times analysis](https://github.com/datadesk/california-k12-notebooks)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"schools = {\n let response = await fetch('https://cdn.rawgit.com/datadesk/california-k12-notebooks/master/output/charter_schools_in_la_county.geojson');\n let json = await response.json();\n return json\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"popUpCss = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`## Leaflet JS, CSS, and Plugins Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"leafletCSS = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"markerClusterCSS = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"fullScreen = L, require('leaflet.fullscreen@1.4.5').catch(() => L.control.fullscreen)","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"fullScreenCSS = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}