Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonw/datasette-leaflet
Datasette plugin adding the Leaflet JavaScript library
https://github.com/simonw/datasette-leaflet
datasette datasette-io datasette-plugin
Last synced: 3 months ago
JSON representation
Datasette plugin adding the Leaflet JavaScript library
- Host: GitHub
- URL: https://github.com/simonw/datasette-leaflet
- Owner: simonw
- Created: 2021-01-21T18:41:19.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-17T23:58:16.000Z (11 months ago)
- Last Synced: 2024-10-06T20:30:48.299Z (3 months ago)
- Topics: datasette, datasette-io, datasette-plugin
- Language: JavaScript
- Homepage:
- Size: 121 KB
- Stars: 7
- Watchers: 4
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# datasette-leaflet
[](https://pypi.org/project/datasette-leaflet/)
[](https://github.com/simonw/datasette-leaflet/releases)
[](https://github.com/simonw/datasette-leaflet/actions?query=workflow%3ATest)
[](https://github.com/simonw/datasette-leaflet/blob/main/LICENSE)
Datasette plugin adding the [Leaflet](https://leafletjs.com/) JavaScript library.
A growing number of Datasette plugins depend on the Leaflet JavaScript mapping library. They each have their own way of loading Leaflet, which could result in loading it multiple times (with multiple versions) if more than one plugin is installed.
This library is intended to solve this problem, by providing a single plugin they can all depend on that loads Leaflet in a reusable way.
Plugins that use this:
- [datasette-leaflet-freedraw](https://datasette.io/plugins/datasette-leaflet-freedraw)
- [datasette-leaflet-geojson](https://datasette.io/plugins/datasette-leaflet-geojson)
- [datasette-cluster-map](https://datasette.io/plugins/datasette-cluster-map)
## Installation
You can install this plugin like so:
datasette install datasette-leaflet
Usually this plugin will be a dependency of other plugins, so it should be installed automatically when you install them.
## Usage
The plugin makes `leaflet.js` and `leaflet.css` available as static files. It provides two custom template variables with the URLs of those two files.
- `{{ datasette_leaflet_url }}` is the URL to the JavaScript
- `{{ datasette_leaflet_css_url }}` is the URL to the CSS
These URLs are also made available as global JavaScript constants:
- `datasette.leaflet.JAVASCRIPT_URL`
- `datasette.leaflet.CSS_URL`
The JavaScript is packaed as a [JavaScript module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). You can dynamically import the JavaScript from a custom template like this:
```html+jinja
import('{{ datasette_leaflet_url }}')
.then((leaflet) => {
/* Use leaflet here */
});
```
You can load the CSS like this:
```html+jinja
```
Or dynamically like this:
```html+jinja
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '{{ datasette_leaflet_css_url }}';
document.head.appendChild(link);
```
Here's a full example that loads the JavaScript and CSS and renders a map:
```html+jinja
window.DATASETTE_CLUSTER_MAP_TILE_LAYER = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS = {"maxZoom": 19, "detectRetina": true, "attribution": "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"};
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '{{ datasette_leaflet_css_url }}';
document.head.appendChild(link);
import('{{ datasette_leaflet_url }}')
.then((leaflet) => {
let div = document.createElement('div');
div.style.height = '400px';
document.querySelector('.content').appendChild(div);
let tiles = leaflet.tileLayer(
window.DATASETTE_CLUSTER_MAP_TILE_LAYER,
window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS
);
let map = leaflet.map(div, {
center: leaflet.latLng(0, 0),
zoom: 2,
layers: [tiles]
});
});
```