{"id":13425931,"url":"https://github.com/simonw/datasette-leaflet","last_synced_at":"2025-04-19T17:52:00.053Z","repository":{"id":41827837,"uuid":"331720824","full_name":"simonw/datasette-leaflet","owner":"simonw","description":"Datasette plugin adding the Leaflet JavaScript library","archived":false,"fork":false,"pushed_at":"2024-02-17T23:58:16.000Z","size":124,"stargazers_count":7,"open_issues_count":7,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-18T07:53:34.203Z","etag":null,"topics":["datasette","datasette-io","datasette-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-21T18:41:19.000Z","updated_at":"2022-11-09T04:19:13.000Z","dependencies_parsed_at":"2024-10-20T20:19:04.051Z","dependency_job_id":null,"html_url":"https://github.com/simonw/datasette-leaflet","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"04ea172c684554cedd7e8efa40406b76ad4187d4"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonw%2Fdatasette-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonw%2Fdatasette-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonw%2Fdatasette-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonw%2Fdatasette-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonw","download_url":"https://codeload.github.com/simonw/datasette-leaflet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249753088,"owners_count":21320664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datasette","datasette-io","datasette-plugin"],"created_at":"2024-07-31T00:01:22.299Z","updated_at":"2025-04-19T17:52:00.036Z","avatar_url":"https://github.com/simonw.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# datasette-leaflet\n\n[![PyPI](https://img.shields.io/pypi/v/datasette-leaflet.svg)](https://pypi.org/project/datasette-leaflet/)\n[![Changelog](https://img.shields.io/github/v/release/simonw/datasette-leaflet?include_prereleases\u0026label=changelog)](https://github.com/simonw/datasette-leaflet/releases)\n[![Tests](https://github.com/simonw/datasette-leaflet/workflows/Test/badge.svg)](https://github.com/simonw/datasette-leaflet/actions?query=workflow%3ATest)\n[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/simonw/datasette-leaflet/blob/main/LICENSE)\n\nDatasette plugin adding the [Leaflet](https://leafletjs.com/) JavaScript library.\n\nA 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.\n\nThis library is intended to solve this problem, by providing a single plugin they can all depend on that loads Leaflet in a reusable way.\n\nPlugins that use this:\n\n- [datasette-leaflet-freedraw](https://datasette.io/plugins/datasette-leaflet-freedraw)\n- [datasette-leaflet-geojson](https://datasette.io/plugins/datasette-leaflet-geojson)\n- [datasette-cluster-map](https://datasette.io/plugins/datasette-cluster-map)\n\n## Installation\n\nYou can install this plugin like so:\n\n    datasette install datasette-leaflet\n\nUsually this plugin will be a dependency of other plugins, so it should be installed automatically when you install them.\n\n## Usage\n\nThe plugin makes `leaflet.js` and `leaflet.css` available as static files. It provides two custom template variables with the URLs of those two files.\n\n- `{{ datasette_leaflet_url }}` is the URL to the JavaScript\n- `{{ datasette_leaflet_css_url }}` is the URL to the CSS\n\nThese URLs are also made available as global JavaScript constants:\n\n- `datasette.leaflet.JAVASCRIPT_URL`\n- `datasette.leaflet.CSS_URL`\n\nThe 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:\n\n```html+jinja\n\u003cscript type=\"module\"\u003e\nimport('{{ datasette_leaflet_url }}')\n  .then((leaflet) =\u003e {\n    /* Use leaflet here */\n  });\n\u003c/script\u003e\n```\n\nYou can load the CSS like this:\n\n```html+jinja\n\u003clink rel=\"stylesheet\" href=\"{{ datasette_leaflet_css_url }}\"\u003e\n```\n\nOr dynamically like this:\n\n```html+jinja\n\u003cscript\u003e\nlet link = document.createElement('link');\nlink.rel = 'stylesheet';\nlink.href = '{{ datasette_leaflet_css_url }}';\ndocument.head.appendChild(link);\n\u003c/script\u003e\n```\n\nHere's a full example that loads the JavaScript and CSS and renders a map:\n\n```html+jinja\n\u003cscript type=\"module\"\u003e\nwindow.DATASETTE_CLUSTER_MAP_TILE_LAYER = \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\";\nwindow.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS = {\"maxZoom\": 19, \"detectRetina\": true, \"attribution\": \"\u0026copy; \u003ca href=\\\"https://www.openstreetmap.org/copyright\\\"\u003eOpenStreetMap\u003c/a\u003e contributors\"};\nlet link = document.createElement('link');\nlink.rel = 'stylesheet';\nlink.href = '{{ datasette_leaflet_css_url }}';\ndocument.head.appendChild(link);\nimport('{{ datasette_leaflet_url }}')\n  .then((leaflet) =\u003e {\n    let div = document.createElement('div');\n    div.style.height = '400px';\n    document.querySelector('.content').appendChild(div);\n    let tiles = leaflet.tileLayer(\n        window.DATASETTE_CLUSTER_MAP_TILE_LAYER,\n        window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS\n    );\n    let map = leaflet.map(div, {\n        center: leaflet.latLng(0, 0),\n        zoom: 2,\n        layers: [tiles]\n    });\n  });\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonw%2Fdatasette-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonw%2Fdatasette-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonw%2Fdatasette-leaflet/lists"}