repos: 331720824

This data as json

id	node_id	name	full_name	private	owner	html_url	description	fork	created_at	updated_at	pushed_at	homepage	size	stargazers_count	watchers_count	language	has_issues	has_projects	has_downloads	has_wiki	has_pages	forks_count	archived	disabled	open_issues_count	license	topics	forks	open_issues	watchers	default_branch	permissions	temp_clone_token	organization	network_count	subscribers_count	readme	readme_html	allow_forking	visibility	is_template	template_repository	web_commit_signoff_required	has_discussions
331720824	MDEwOlJlcG9zaXRvcnkzMzE3MjA4MjQ=	datasette-leaflet	simonw/datasette-leaflet	0	9599	https://github.com/simonw/datasette-leaflet	Datasette plugin adding the Leaflet JavaScript library	0	2021-01-21T18:41:19Z	2021-04-20T16:27:35Z	2021-02-01T22:20:28Z		124	3	3	JavaScript	1	1	1	1	0	0	0	0	2		["datasette", "datasette-plugin", "datasette-io"]	0	2	3	main	{"admin": false, "push": false, "pull": false}			0	1	# datasette-leaflet [![PyPI](https://img.shields.io/pypi/v/datasette-leaflet.svg)](https://pypi.org/project/datasette-leaflet/) [![Changelog](https://img.shields.io/github/v/release/simonw/datasette-leaflet?include_prereleases&label=changelog)](https://github.com/simonw/datasette-leaflet/releases) [![Tests](https://github.com/simonw/datasette-leaflet/workflows/Test/badge.svg)](https://github.com/simonw/datasette-leaflet/actions?query=workflow%3ATest) [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](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 <script type="module"> import('{{ datasette_leaflet_url }}') .then((leaflet) => { /* Use leaflet here */ }); </script> ``` You can load the CSS like this: ```html+jinja <link rel="stylesheet" href="{{ datasette_leaflet_css_url }}"> ``` Or dynamically like this: ```html+jinja <script> let link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '{{ datasette_leaflet_css_url }}'; document.head.appendChild(link); </script> ``` Here's a full example that loads the JavaScript and CSS and renders a map: ```html+jinja <script type="module"> 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] }); }); </script> ```	<div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg" itemprop="text"><h1><a id="user-content-datasette-leaflet" class="anchor" aria-hidden="true" href="#user-content-datasette-leaflet"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>datasette-leaflet</h1> <p><a href="https://pypi.org/project/datasette-leaflet/" rel="nofollow"><img src="https://camo.githubusercontent.com/50da3783cf231c9646e762bf20cfd464779db8b979de8627d491b9b4589e37c6/68747470733a2f2f696d672e736869656c64732e696f2f707970692f762f6461746173657474652d6c6561666c65742e737667" alt="PyPI" data-canonical-src="https://img.shields.io/pypi/v/datasette-leaflet.svg" style="max-width:100%;"></a> <a href="https://github.com/simonw/datasette-leaflet/releases"><img src="https://camo.githubusercontent.com/8b54c9ff200877b23b90a28f91e1d361b5881fd92bf524df8b412176ce98a505/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f73696d6f6e772f6461746173657474652d6c6561666c65743f696e636c7564655f70726572656c6561736573266c6162656c3d6368616e67656c6f67" alt="Changelog" data-canonical-src="https://img.shields.io/github/v/release/simonw/datasette-leaflet?include_prereleases&label=changelog" style="max-width:100%;"></a> <a href="https://github.com/simonw/datasette-leaflet/actions?query=workflow%3ATest"><img src="https://github.com/simonw/datasette-leaflet/workflows/Test/badge.svg" alt="Tests" style="max-width:100%;"></a> <a href="https://github.com/simonw/datasette-leaflet/blob/main/LICENSE"><img src="https://camo.githubusercontent.com/1698104e976c681143eb0841f9675c6f802bb7aa832afc0c7a4e719b1f3cf955/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d417061636865253230322e302d626c75652e737667" alt="License" data-canonical-src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" style="max-width:100%;"></a></p> <p>Datasette plugin adding the <a href="https://leafletjs.com/" rel="nofollow">Leaflet</a> JavaScript library.</p> <p>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.</p> <p>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.</p> <p>Plugins that use this:</p> <ul> <li><a href="https://datasette.io/plugins/datasette-leaflet-freedraw" rel="nofollow">datasette-leaflet-freedraw</a></li> <li><a href="https://datasette.io/plugins/datasette-leaflet-geojson" rel="nofollow">datasette-leaflet-geojson</a></li> <li><a href="https://datasette.io/plugins/datasette-cluster-map" rel="nofollow">datasette-cluster-map</a></li> </ul> <h2><a id="user-content-installation" class="anchor" aria-hidden="true" href="#user-content-installation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Installation</h2> <p>You can install this plugin like so:</p> <div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="datasette install datasette-leaflet "><pre><code>datasette install datasette-leaflet </code></pre></div> <p>Usually this plugin will be a dependency of other plugins, so it should be installed automatically when you install them.</p> <h2><a id="user-content-usage" class="anchor" aria-hidden="true" href="#user-content-usage"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Usage</h2> <p>The plugin makes <code>leaflet.js</code> and <code>leaflet.css</code> available as static files. It provides two custom template variables with the URLs of those two files.</p> <ul> <li><code>{{ datasette_leaflet_url }}</code> is the URL to the JavaScript</li> <li><code>{{ datasette_leaflet_css_url }}</code> is the URL to the CSS</li> </ul> <p>These URLs are also made available as global JavaScript constants:</p> <ul> <li><code>datasette.leaflet.JAVASCRIPT_URL</code></li> <li><code>datasette.leaflet.CSS_URL</code></li> </ul> <p>The JavaScript is packaed as a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules" rel="nofollow">JavaScript module</a>. You can dynamically import the JavaScript from a custom template like this:</p> <div class="highlight highlight-text-html-django position-relative" data-snippet-clipboard-copy-content="<script type="module"> import('{{ datasette_leaflet_url }}') .then((leaflet) => { /* Use leaflet here / }); </script> "><pre><<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>module<span class="pl-pds">"</span></span>><span class="pl-s1"></span> <span class="pl-s1"><span class="pl-k">import</span>(<span class="pl-s"><span class="pl-pds">'</span>{{ datasette_leaflet_url }}<span class="pl-pds">'</span></span>)</span> <span class="pl-s1"> .<span class="pl-c1">then</span>((<span class="pl-smi">leaflet</span>) <span class="pl-k">=></span> {</span> <span class="pl-s1"> <span class="pl-c"><span class="pl-c">/</span> Use leaflet here <span class="pl-c">*/</span></span></span> <span class="pl-s1"> });</span> <span class="pl-s1"></span></<span class="pl-ent">script</span>></pre></div> <p>You can load the CSS like this:</p> <div class="highlight highlight-text-html-django position-relative" data-snippet-clipboard-copy-content="<link rel="stylesheet" href="{{ datasette_leaflet_css_url }}"> "><pre><<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>{{ datasette_leaflet_css_url }}<span class="pl-pds">"</span></span>></pre></div> <p>Or dynamically like this:</p> <div class="highlight highlight-text-html-django position-relative" data-snippet-clipboard-copy-content="<script> let link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '{{ datasette_leaflet_css_url }}'; document.head.appendChild(link); </script> "><pre><<span class="pl-ent">script</span>><span class="pl-s1"></span> <span class="pl-s1"><span class="pl-k">let</span> link <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">createElement</span>(<span class="pl-s"><span class="pl-pds">'</span>link<span class="pl-pds">'</span></span>);</span> <span class="pl-s1"><span class="pl-smi">link</span>.<span class="pl-c1">rel</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>stylesheet<span class="pl-pds">'</span></span>;</span> <span class="pl-s1"><span class="pl-smi">link</span>.<span class="pl-c1">href</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>{{ datasette_leaflet_css_url }}<span class="pl-pds">'</span></span>;</span> <span class="pl-s1"><span class="pl-c1">document</span>.<span class="pl-smi">head</span>.<span class="pl-c1">appendChild</span>(link);</span> <span class="pl-s1"></span></<span class="pl-ent">script</span>></pre></div> <p>Here's a full example that loads the JavaScript and CSS and renders a map:</p> <div class="highlight highlight-text-html-django position-relative" data-snippet-clipboard-copy-content="<script type="module"> 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": "&copy; <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] }); }); </script> "><pre><<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>module<span class="pl-pds">"</span></span>><span class="pl-s1"></span> <span class="pl-s1"><span class="pl-c1">window</span>.<span class="pl-c1">DATASETTE_CLUSTER_MAP_TILE_LAYER</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png<span class="pl-pds">"</span></span>;</span> <span class="pl-s1"><span class="pl-c1">window</span>.<span class="pl-c1">DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS</span> <span class="pl-k">=</span> {<span class="pl-s"><span class="pl-pds">"</span>maxZoom<span class="pl-pds">"</span></span><span class="pl-k">:</span> <span class="pl-c1">19</span>, <span class="pl-s"><span class="pl-pds">"</span>detectRetina<span class="pl-pds">"</span></span><span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-s"><span class="pl-pds">"</span>attribution<span class="pl-pds">"</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>&copy; <a href=<span class="pl-cce">\"</span>https://www.openstreetmap.org/copyright<span class="pl-cce">\"</span>>OpenStreetMap</a> contributors<span class="pl-pds">"</span></span>};</span> <span class="pl-s1"><span class="pl-k">let</span> link <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">createElement</span>(<span class="pl-s"><span class="pl-pds">'</span>link<span class="pl-pds">'</span></span>);</span> <span class="pl-s1"><span class="pl-smi">link</span>.<span class="pl-c1">rel</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>stylesheet<span class="pl-pds">'</span></span>;</span> <span class="pl-s1"><span class="pl-smi">link</span>.<span class="pl-c1">href</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>{{ datasette_leaflet_css_url }}<span class="pl-pds">'</span></span>;</span> <span class="pl-s1"><span class="pl-c1">document</span>.<span class="pl-smi">head</span>.<span class="pl-c1">appendChild</span>(link);</span> <span class="pl-s1"><span class="pl-k">import</span>(<span class="pl-s"><span class="pl-pds">'</span>{{ datasette_leaflet_url }}<span class="pl-pds">'</span></span>)</span> <span class="pl-s1"> .<span class="pl-c1">then</span>((<span class="pl-smi">leaflet</span>) <span class="pl-k">=></span> {</span> <span class="pl-s1"> <span class="pl-k">let</span> div <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">createElement</span>(<span class="pl-s"><span class="pl-pds">'</span>div<span class="pl-pds">'</span></span>);</span> <span class="pl-s1"> <span class="pl-smi">div</span>.<span class="pl-c1">style</span>.<span class="pl-c1">height</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>400px<span class="pl-pds">'</span></span>;</span> <span class="pl-s1"> <span class="pl-c1">document</span>.<span class="pl-c1">querySelector</span>(<span class="pl-s"><span class="pl-pds">'</span>.content<span class="pl-pds">'</span></span>).<span class="pl-c1">appendChild</span>(div);</span> <span class="pl-s1"> <span class="pl-k">let</span> tiles <span class="pl-k">=</span> <span class="pl-smi">leaflet</span>.<span class="pl-en">tileLayer</span>(</span> <span class="pl-s1"> <span class="pl-c1">window</span>.<span class="pl-c1">DATASETTE_CLUSTER_MAP_TILE_LAYER</span>,</span> <span class="pl-s1"> <span class="pl-c1">window</span>.<span class="pl-c1">DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS</span></span> <span class="pl-s1"> );</span> <span class="pl-s1"> <span class="pl-k">let</span> map <span class="pl-k">=</span> <span class="pl-smi">leaflet</span>.<span class="pl-en">map</span>(div, {</span> <span class="pl-s1"> center<span class="pl-k">:</span> <span class="pl-smi">leaflet</span>.<span class="pl-en">latLng</span>(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>),</span> <span class="pl-s1"> zoom<span class="pl-k">:</span> <span class="pl-c1">2</span>,</span> <span class="pl-s1"> layers<span class="pl-k">:</span> [tiles]</span> <span class="pl-s1"> });</span> <span class="pl-s1"> });</span> <span class="pl-s1"></span></<span class="pl-ent">script</span>></pre></div> </article></div>

Links from other tables

4 rows from repo in releases