Hello world
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 |
Data source: https://visibleearth.nasa.gov/view.php?id=73909
CSV files for https://observablehq.com/@the-vern and https://observablehq.com/@mbschissell/changes-in-d-c-public-elementary-school-budgets-2017-2018
Data source for DC schools...
index.html
has been copied without modification from the OpenLayers examples:
https://openlayers.org/en/latest/examples/heatmap-earthquakes.html
This example comes directly from https://plot.ly/javascript/line-and-scatter/, and includes all the HTML needed to render in a browser.
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
x=42; | |
console.log('bar') |
Here goes...
- Plot the counties in California
- Use another projection
- Use California state plane coordinates
- Instead of counties, plot the last week's worth of earthquakes
- Turn the earthquakes red
- Turn an earthquake yellow when you mouse over it
- Turn an earthquake back to red when you move your mouse away from it
- When mousing over an earthquake, indicate the "place" and "magnitude" with the tooltip
The demo uses:
- CanvasRenderingContext2D.arc() to create a sprite from a filled disc
- CanvasRenderingContext2D.createRadialGradient() to create a sprite from a radial gradient
- Arguments: the coordinates and radii of two circles (start circle & end circle)
- Returns a CanvasGradient
- CanvasGradient.addColorStop(stop, color) determines color of gradient
NewerOlder