Hello, Leaflet (run elsewhere), where elsewhere is here.
Last active
November 15, 2019 10:22
-
-
Save pbogden/86174064d6ffdf4ff646ba68bec5fb30 to your computer and use it in GitHub Desktop.
Observable Leaflet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://observablehq.com/@pbogden/hello-leaflet-run-elsewhere@57 | |
export default function define(runtime, observer) { | |
const main = runtime.module(); | |
main.variable(observer()).define(["md"], function(md){return( | |
md`# Hello, Leaflet (run elsewhere) | |
A quick demo of [Leaflet](https://leafletjs.com/). | |
See below for instructions to download the code and run it in another web page, | |
where you can access the map and add a layer. If you get it to work, the map | |
will fly to Washington DC and it'll add a circle marker just southeast of Dupont Circle.` | |
)}); | |
main.variable(observer("container")).define("container", ["html"], function(html){return( | |
html`<div id="mymap" style="height:500px;">` | |
)}); | |
main.variable(observer("map")).define("map", ["container","L"], function(container,L) | |
{ | |
container; | |
const map = L.map("mymap").setView([40.7299, -73.9923], 13); | |
L.tileLayer("https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png", { | |
attribution: "Wikimedia maps beta | © <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors" | |
}).addTo(map); | |
return map | |
} | |
); | |
main.variable(observer("L")).define("L", ["require","html"], async function(require,html) | |
{ | |
const L = await require("leaflet@1/dist/leaflet.js"); | |
if (!L._style) { | |
const href = await require.resolve("leaflet@1/dist/leaflet.css"); | |
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`); | |
} | |
return L; | |
} | |
); | |
main.variable(observer()).define(["md"], function(md){return( | |
md`## To run this map elsewhere: | |
1. "Download code" (from the options above) | |
2. Unzip the file that you downloaded. | |
3. Replace the default *index.html* file with the code below. | |
4. Read about why this works in the [runtime docs](https://github.com/observablehq/runtime)` | |
)}); | |
main.variable(observer()).define(["md"], function(md){return( | |
md` | |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>Hello, Leaflet</title> | |
<link rel="stylesheet" type="text/css" href="./inspector.css"> | |
<body> | |
<div id='mycontainer'></div> | |
<div id='mystuff'></div> | |
<script type="module"> | |
import {Runtime, Inspector} from "./runtime.js"; | |
import define from "./d/5899e123023fd122.js"; | |
const runtime = new Runtime(); | |
//const main = runtime.module(define, Inspector.into(document.body)); | |
let L; | |
const main = runtime.module(define, name => { | |
if (name === "container") { | |
return new Inspector(document.getElementById('mycontainer')); | |
} | |
if (name === "L") { | |
return { | |
pending() { | |
}, | |
fulfilled(value) { | |
L = value; | |
}, | |
rejected(error) { | |
} | |
} | |
}; | |
if (name === "map") { | |
// return new Inspector(document.getElementById('mystuff')); | |
const node = document.getElementById('mystuff'); | |
return { | |
pending() { | |
node.classList.add("running") | |
}, | |
fulfilled(value) { | |
node.classList.remove("running"); | |
node.innerText = value.getZoom(); | |
value.flyTo([38.9072, -77.0369]) | |
L.circleMarker([38.9072, -77.0369]).addTo(value); | |
}, | |
rejected(error) { | |
node.classList.remove("running"); | |
node.classList.add("error"); | |
node.textContent = error.message; | |
} | |
} | |
}; | |
}); | |
</script> | |
` | |
)}); | |
return main; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
./[email protected] |