maineGovernmentGeoJson = d3.json('https://api.maptiler.com/data/6fb74804-9038-4dda-84cf-b61cd80c393f/features.json?key=TDrOHrs2NCciGho9Tbk4')
updateLayer()
mapLayers.onclick = updateLayer()
function updateLayer() {
if (mapLayers.includes("Schools")){
World.value.setLayoutProperty('schoolPoints', 'visibility', 'visible')
}
else{World.value.setLayoutProperty('schoolPoints', 'visibility', 'none')}
if (mapLayers.includes("Libraries")){
World.value.setLayoutProperty('libraryPoints', 'visibility', 'visible')
}
else{World.value.setLayoutProperty('libraryPoints', 'visibility', 'none')}
if (mapLayers.includes("Parks")){
World.value.setLayoutProperty('parkPoints', 'visibility', 'visible')
}
else{World.value.setLayoutProperty('parkPoints', 'visibility', 'none')}
if (mapLayers.includes("Daycare")){
World.value.setLayoutProperty('childCarePoints', 'visibility', 'visible')
}
else{World.value.setLayoutProperty('childCarePoints', 'visibility', 'none')}
}
viewof mapLayers = Inputs.checkbox(["Schools","Libraries","Parks","Daycare"], {value: "Schools", label: "Layers"})
viewof basemap = Inputs.radio(["voyager", "positron", "dark-matter"], {value: 'positron', label: "CARTO basemap"})
World = {
const container = yield html`<div style="height:800px;">`;
const map = (container.value = new maplibregl.Map({
//interactive: false,
boxZoom: true,
pitch: 0,
bearing: 0,
maplibreLogo: true,
container,
center: [-70.2568, 43.64],
zoom: 12,
style: `https://basemaps.cartocdn.com/gl/${basemap}-gl-style/style.json`,
scrollZoom: true
}));
map.on('load', function() {
//Loads the images to use for symbols
map.loadImage('https://i.imgur.com/Aw241O4.png',
function(error,image){
if (error) throw error;
map.addImage('schoolIcon', image)});
map.loadImage('https://i.imgur.com/UTEdNow.png',
function(error,image){
if (error) throw error;
map.addImage('libraryIcon', image)});
map.loadImage('https://i.imgur.com/qBwoy8m.png',
function(error,image){
if (error) throw error;
map.addImage('govtIcon', image)});
map.loadImage('https://i.imgur.com/qpgAMfc.png',
function(error,image){
if (error) throw error;
map.addImage('parkIcon', image)});
map.loadImage('https://i.imgur.com/mlbq8xf.png',
function(error,image){
if (error) throw error;
map.addImage('childcareIcon', image)});
//School data and layer
map.addSource('schools', {
type: 'geojson',
data: maineSchoolsGeoJson
});
map.addLayer({
id: 'schoolPoints',
type: 'symbol',
source: 'schools',
layout: {
'icon-image': 'schoolIcon',
'icon-allow-overlap': true,
'visibility': 'none'
}
});
//Library data and layer
map.addSource('libraries', {
type: 'geojson',
data: maineLibraryGeoJson
});
map.addLayer({
id: 'libraryPoints',
type: 'symbol',
source: 'libraries',
layout: {
'icon-image': 'libraryIcon',
'icon-allow-overlap': true,
'visibility': 'none'
}
});
//Govt data and layer
map.addSource('govt', {
type: 'geojson',
data: maineGovernmentGeoJson
});
map.addLayer({
id: 'govtPoints',
type: 'symbol',
source: 'govt',
layout: {
'icon-image': 'govtIcon',
'icon-allow-overlap': true,
'visibility': 'none'
}
});
//Park data and Layer
map.addSource('park', {
type: 'geojson',
data: parkGeojson
});
map.addLayer({
id: 'parkPoints',
type: 'symbol',
source: 'park',
layout: {
'icon-image': 'parkIcon',
'icon-allow-overlap': true,
'visibility': 'none'
}
});
//Childcare Data and Layer
map.addSource('childCare', {
type: 'geojson',
data: childCareGeoJson
});
map.addLayer({
id: 'childCarePoints',
type: 'symbol',
source: 'childCare',
layout: {
'icon-image': 'childcareIcon',
'icon-allow-overlap': true,
'visibility': 'none'
}
});
});
//School Popup
map.on('mouseenter', 'schoolPoints', function (e) {
popup.setLngLat(e.lngLat).setHTML('<h3>' + e.features[0].properties['School Name'] + '</h3>').addTo(map);
});
map.on('mouseleave', 'schoolPoints', function (e) {
popup.remove();
});
//Library Popup
map.on('mouseenter', 'libraryPoints', function (e) {
popup.setLngLat(e.lngLat).setHTML('<h3>' + e.features[0].properties.Name + '</h3>').addTo(map);
});
map.on('mouseleave', 'libraryPoints', function (e) {
popup.remove();
});
//Government Popup
map.on('mouseenter', 'govtPoints', function (e) {
popup.setLngLat(e.lngLat).setHTML('<h3>' + e.features[0].properties.name + '</h3>').addTo(map);
});
map.on('mouseleave', 'govtPoints', function (e) {
popup.remove();
});
//Park Popup
map.on('mouseenter', 'parkPoints', function (e) {
popup.setLngLat(e.lngLat).setHTML('<h3>' + e.features[0].properties.name + '</h3>').addTo(map);
});
map.on('mouseleave', 'parkPoints', function (e) {
popup.remove();
});
//Child Care Popup
map.on('mouseenter', 'childCarePoints', function (e) {
popup.setLngLat(e.lngLat).setHTML('<h3>' + e.features[0].properties.name + '</h3>').addTo(map);
});
map.on('mouseleave', 'childCarePoints', function (e) {
popup.remove();
});
}
popup = new maplibregl.Popup({
closeButton: false,
closeOnClick: false
});
maplibregl = require("maplibre-gl@2.1.9")
import {maineSchoolsGeoJson} from "78dd77d553b6360d"
maineSchoolsGeoJson
import {maineLibraryGeoJson} from "ee6a237b1541fa46"
parkGeojson = d3.json('https://api.maptiler.com/data/874c2842-4205-45d4-bf5c-27715979a278/features.json?key=TDrOHrs2NCciGho9Tbk4')
childCareGeoJson = d3.json('https://api.maptiler.com/data/cbed102a-adb2-4e51-91e7-87c6a2d64eac/features.json?key=TDrOHrs2NCciGho9Tbk4')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.