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'); }); }