I map 🗺️ & graph 📈 data 🈸
Published
Edited
Jul 8, 2018
2 forks
6 stars
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: '© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, © <a href=\"http://cartodb.com/attributions\">CartoDB</a>',
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 = `<div class="popup"><h2>${school.name}</h2>` +
`<p>${school.district} District</p><p>grades: ${school.grades_served}</p></div>`
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');
});
}
popUpCss = html`<style type="text/css">
div.popup p { margin: 4px 0; }
</style>`
L = require('leaflet@1.2.0')
leafletCSS = html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)
markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)
markerClusterCSS = html`<link href='${resolve('leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css')}' rel='stylesheet' />`
fullScreen = L, require('leaflet.fullscreen@1.4.5').catch(() => L.control.fullscreen)
fullScreenCSS = html`<link href='${resolve('leaflet.fullscreen@1.4.5/Control.FullScreen.css')}' rel='stylesheet' />`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
