L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
newCoastData = {
let response = await fetch('https://gist.githubusercontent.com/vigorousnorth/caceb5c4a06c6999fbc22788fc5eb1e3/raw/8fd3d9ead7aaccc266ac406a7a3a90f6d81d0240/GreaterPortland_8foot_geo.json');
let json = await response.json();
return json.features
}
newCoastMap = {
// 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` });
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([43.666,-70.263952], 15);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var FranklinStMarker = new L.marker([43.6658084,-70.2618305], { opacity: 0.01 }); //opacity may be set to zero
FranklinStMarker.bindTooltip("Exit 7 - Franklin Street", {permanent: true, className: "my-label", offset: [0, 0] }).addTo(map);
var ForestAveMarker = new L.marker([43.6608,-70.2705382], { opacity: 0.01 }); //opacity may be set to zero
ForestAveMarker.bindTooltip("Exit 6 - Route 302/Forest Avenue", {permanent: true, className: "my-label", offset: [-0, 0] }).addTo(map);
var VerandaStreetMarker = new L.marker([43.6861,-70.2513701], { opacity: 0.01 }); //opacity may be set to zero
VerandaStreetMarker.bindTooltip("Exit 9 - Veranda Street/Route 1", {permanent: true, className: "my-label", offset: [-0, 10] }).addTo(map);
let newCoast = L.geoJson(newCoastData, {
weight: 0,
color: '#009'
}).addTo(map);
newCoast.bindPopup('High tide line with 8 feet of sea level rise');
}
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.