repos: 130236762

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
130236762	MDEwOlJlcG9zaXRvcnkxMzAyMzY3NjI=	datasette-cluster-map	simonw/datasette-cluster-map	0	9599	https://github.com/simonw/datasette-cluster-map	Datasette plugin that shows a map for any data with latitude/longitude columns	0	2018-04-19T15:31:55Z	2021-12-07T21:55:01Z	2021-12-07T19:39:02Z		97	40	40	JavaScript	1	1	1	1	0	10	0	0	12	apache-2.0	["datasette", "datasette-io", "datasette-plugin", "leafletjs"]	10	12	40	main	{"admin": false, "maintain": false, "push": false, "triage": false, "pull": false}			10	2	# datasette-cluster-map [![PyPI](https://img.shields.io/pypi/v/datasette-cluster-map.svg)](https://pypi.org/project/datasette-cluster-map/) [![Changelog](https://img.shields.io/github/v/release/simonw/datasette-cluster-map?include_prereleases&label=changelog)](https://github.com/simonw/datasette-cluster-map/releases) [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/simonw/datasette-cluster-map/blob/main/LICENSE) A [Datasette plugin](https://docs.datasette.io/en/stable/plugins.html) that detects tables with `latitude` and `longitude` columns and then plots them on a map using [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster). More about this project: [Datasette plugins, and building a clustered map visualization](https://simonwillison.net/2018/Apr/20/datasette-plugins/). ## Demo [global-power-plants.datasettes.com](https://global-power-plants.datasettes.com/global-power-plants/global-power-plants) hosts a demo of this plugin running against a database of 33,000 power plants around the world. ![Cluster map demo](https://static.simonwillison.net/static/2020/global-power-plants.png) ## Installation Run `datasette install datasette-cluster-map` to add this plugin to your Datasette virtual environment. Datasette will automatically load the plugin if it is installed in this way. If you are deploying using the `datasette publish` command you can use the `--install` option: datasette publish cloudrun mydb.db --install=datasette-cluster-map If any of your tables have a `latitude` and `longitude` column, a map will be automatically displayed. ## Configuration If your columns are called something else you can configure the column names using [plugin configuration](https://docs.datasette.io/en/stable/plugins.html#plugin-configuration) in a `metadata.json` file. For example, if all of your columns are called `xlat` and `xlng` you can create a `metadata.json` file like this: ```json { "title": "Regular metadata keys can go here too", "plugins": { "datasette-cluster-map": { "latitude_column": "xlat", "longitude_column": "xlng" } } } ``` Then run Datasette like this: datasette mydata.db -m metadata.json This will configure the required column names for every database loaded by that Datasette instance. If you want to customize the column names for just one table in one database, you can do something like this: ```json { "databases": { "polar-bears": { "tables": { "USGS_WC_eartag_deployments_2009-2011": { "plugins": { "datasette-cluster-map": { "latitude_column": "Capture Latitude", "longitude_column": "Capture Longitude" } } } } } } } ``` You can also use a custom SQL query to rename those columns to `latitude` and `longitude`, [for example](https://polar-bears.now.sh/polar-bears?sql=select+%2C%0D%0A++++%22Capture+Latitude%22+as+latitude%2C%0D%0A++++%22Capture+Longitude%22+as+longitude%0D%0Afrom+%5BUSGS_WC_eartag_deployments_2009-2011%5D): ```sql select , "Capture Latitude" as latitude, "Capture Longitude" as longitude from [USGS_WC_eartag_deployments_2009-2011] ``` The map defaults to being displayed above the main results table on the page. You can use the `"container"` plugin setting to provide a CSS selector indicating an element that the map should be appended to instead. ## Custom tile layers You can customize the tile layer used by the maps using the `tile_layer` and `tile_layer_options` configuration settings. For example, to use the [Stamen Watercolor tiles](http://maps.stamen.com/watercolor/#12/37.7706/-122.3782) you can use these settings: ```json { "plugins": { "datasette-cluster-map": { "tile_layer": "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}", "tile_layer_options": { "attribution": "Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a> — Map data © <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors", "subdomains": "abcd", "minZoom": 1, "maxZoom": 16, "ext": "jpg" } } } } ``` The [Leaflet Providers preview list](https://leaflet-extras.github.io/leaflet-providers/preview/index.html) has details of many other tile layers you can use. ## Custom marker popups The marker popup defaults to displaying the data for the underlying database row. You can customize this by including a `popup` column in your results containing JSON that defines a more useful popup. The JSON in the popup column should look something like this: ```json { "image": "https://niche-museums.imgix.net/dodgems.heic?w=800&h=400&fit=crop", "alt": "Dingles Fairground Heritage Centre", "title": "Dingles Fairground Heritage Centre", "description": "Home of the National Fairground Collection, Dingles has over 45,000 indoor square feet of vintage fairground rides... and you can go on them! Highlights include the last complete surviving and opera", "link": "/browse/museums/26" } ``` Each of these columns is optional. - `title` is the title to show at the top of the popup - `image` is the URL to an image to display in the popup - `alt` is the alt attribute to use for that image - `description` is a longer string of text to use as a description - `link` is a URL that the marker content should link to You can use the SQLite `json_object()` function to construct this data dynamically as part of your SQL query. Here's an example: ```sql select json_object( 'image', photo_url \|\| '?w=800&h=400&fit=crop', 'title', name, 'description', substr(description, 0, 200), 'link', '/browse/museums/' \|\| id ) as popup, latitude, longitude from museums where id in (26, 27) order by id ``` [Try that example here](https://www.niche-museums.com/browse?sql=select+json_object%28%0D%0A++%27image%27%2C+photo_url+%7C%7C+%27%3Fw%3D800%26h%3D400%26fit%3Dcrop%27%2C%0D%0A++%27title%27%2C+name%2C%0D%0A++%27description%27%2C+substr%28description%2C+0%2C+200%29%2C%0D%0A++%27link%27%2C+%27%2Fbrowse%2Fmuseums%2F%27+%7C%7C+id%0D%0A++%29+as+popup%2C%0D%0A++latitude%2C+longitude+from+museums) or take a look at [this demo built using a SQL view](https://dogsheep-photos.dogsheep.net/public/photos_on_a_map). ## How I deployed the demo datasette publish cloudrun global-power-plants.db \ --service global-power-plants \ --metadata metadata.json \ --install=datasette-cluster-map \ --extra-options="--config facet_time_limit_ms:1000" ## Development To set up this plugin locally, first checkout the code. Then create a new virtual environment: cd datasette-cluster-map python3 -mvenv venv source venv/bin/activate Or if you are using `pipenv`: pipenv shell Now install the dependencies and tests: pip install -e '.[test]' To run the tests: pytest	<div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg" itemprop="text"><h1 dir="auto"><a id="user-content-datasette-cluster-map" class="anchor" aria-hidden="true" href="#user-content-datasette-cluster-map"><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-cluster-map</h1> <p dir="auto"><a href="https://pypi.org/project/datasette-cluster-map/" rel="nofollow"><img src="https://camo.githubusercontent.com/6450215f6eeea9441e8212cad322848645a5fe49b0a77613b19c24aaf36eec9b/68747470733a2f2f696d672e736869656c64732e696f2f707970692f762f6461746173657474652d636c75737465722d6d61702e737667" alt="PyPI" data-canonical-src="https://img.shields.io/pypi/v/datasette-cluster-map.svg" style="max-width: 100%;"></a> <a href="https://github.com/simonw/datasette-cluster-map/releases"><img src="https://camo.githubusercontent.com/1e99ad2a8a1efa327c27477d9f56b3288ab98216a2860019b872ecdcff59e7e5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f73696d6f6e772f6461746173657474652d636c75737465722d6d61703f696e636c7564655f70726572656c6561736573266c6162656c3d6368616e67656c6f67" alt="Changelog" data-canonical-src="https://img.shields.io/github/v/release/simonw/datasette-cluster-map?include_prereleases&label=changelog" style="max-width: 100%;"></a> <a href="https://github.com/simonw/datasette-cluster-map/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 dir="auto">A <a href="https://docs.datasette.io/en/stable/plugins.html" rel="nofollow">Datasette plugin</a> that detects tables with <code>latitude</code> and <code>longitude</code> columns and then plots them on a map using <a href="https://github.com/Leaflet/Leaflet.markercluster">Leaflet.markercluster</a>.</p> <p dir="auto">More about this project: <a href="https://simonwillison.net/2018/Apr/20/datasette-plugins/" rel="nofollow">Datasette plugins, and building a clustered map visualization</a>.</p> <h2 dir="auto"><a id="user-content-demo" class="anchor" aria-hidden="true" href="#user-content-demo"><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>Demo</h2> <p dir="auto"><a href="https://global-power-plants.datasettes.com/global-power-plants/global-power-plants" rel="nofollow">global-power-plants.datasettes.com</a> hosts a demo of this plugin running against a database of 33,000 power plants around the world.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://camo.githubusercontent.com/8b609bcc80b913862801a773ae46d03393ad3f9e1f7c03a015dfc1123097ed71/68747470733a2f2f7374617469632e73696d6f6e77696c6c69736f6e2e6e65742f7374617469632f323032302f676c6f62616c2d706f7765722d706c616e74732e706e67"><img src="https://camo.githubusercontent.com/8b609bcc80b913862801a773ae46d03393ad3f9e1f7c03a015dfc1123097ed71/68747470733a2f2f7374617469632e73696d6f6e77696c6c69736f6e2e6e65742f7374617469632f323032302f676c6f62616c2d706f7765722d706c616e74732e706e67" alt="Cluster map demo" data-canonical-src="https://static.simonwillison.net/static/2020/global-power-plants.png" style="max-width: 100%;"></a></p> <h2 dir="auto"><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 dir="auto">Run <code>datasette install datasette-cluster-map</code> to add this plugin to your Datasette virtual environment. Datasette will automatically load the plugin if it is installed in this way.</p> <p dir="auto">If you are deploying using the <code>datasette publish</code> command you can use the <code>--install</code> option:</p> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="datasette publish cloudrun mydb.db --install=datasette-cluster-map "><pre><code>datasette publish cloudrun mydb.db --install=datasette-cluster-map </code></pre></div> <p dir="auto">If any of your tables have a <code>latitude</code> and <code>longitude</code> column, a map will be automatically displayed.</p> <h2 dir="auto"><a id="user-content-configuration" class="anchor" aria-hidden="true" href="#user-content-configuration"><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>Configuration</h2> <p dir="auto">If your columns are called something else you can configure the column names using <a href="https://docs.datasette.io/en/stable/plugins.html#plugin-configuration" rel="nofollow">plugin configuration</a> in a <code>metadata.json</code> file. For example, if all of your columns are called <code>xlat</code> and <code>xlng</code> you can create a <code>metadata.json</code> file like this:</p> <div class="highlight highlight-source-json position-relative overflow-auto" data-snippet-clipboard-copy-content="{ "title": "Regular metadata keys can go here too", "plugins": { "datasette-cluster-map": { "latitude_column": "xlat", "longitude_column": "xlng" } } } "><pre>{ <span class="pl-ent">"title"</span>: <span class="pl-s"><span class="pl-pds">"</span>Regular metadata keys can go here too<span class="pl-pds">"</span></span>, <span class="pl-ent">"plugins"</span>: { <span class="pl-ent">"datasette-cluster-map"</span>: { <span class="pl-ent">"latitude_column"</span>: <span class="pl-s"><span class="pl-pds">"</span>xlat<span class="pl-pds">"</span></span>, <span class="pl-ent">"longitude_column"</span>: <span class="pl-s"><span class="pl-pds">"</span>xlng<span class="pl-pds">"</span></span> } } }</pre></div> <p dir="auto">Then run Datasette like this:</p> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="datasette mydata.db -m metadata.json "><pre><code>datasette mydata.db -m metadata.json </code></pre></div> <p dir="auto">This will configure the required column names for every database loaded by that Datasette instance.</p> <p dir="auto">If you want to customize the column names for just one table in one database, you can do something like this:</p> <div class="highlight highlight-source-json position-relative overflow-auto" data-snippet-clipboard-copy-content="{ "databases": { "polar-bears": { "tables": { "USGS_WC_eartag_deployments_2009-2011": { "plugins": { "datasette-cluster-map": { "latitude_column": "Capture Latitude", "longitude_column": "Capture Longitude" } } } } } } } "><pre>{ <span class="pl-ent">"databases"</span>: { <span class="pl-ent">"polar-bears"</span>: { <span class="pl-ent">"tables"</span>: { <span class="pl-ent">"USGS_WC_eartag_deployments_2009-2011"</span>: { <span class="pl-ent">"plugins"</span>: { <span class="pl-ent">"datasette-cluster-map"</span>: { <span class="pl-ent">"latitude_column"</span>: <span class="pl-s"><span class="pl-pds">"</span>Capture Latitude<span class="pl-pds">"</span></span>, <span class="pl-ent">"longitude_column"</span>: <span class="pl-s"><span class="pl-pds">"</span>Capture Longitude<span class="pl-pds">"</span></span> } } } } } } }</pre></div> <p dir="auto">You can also use a custom SQL query to rename those columns to <code>latitude</code> and <code>longitude</code>, <a href="https://polar-bears.now.sh/polar-bears?sql=select+%2C%0D%0A++++%22Capture+Latitude%22+as+latitude%2C%0D%0A++++%22Capture+Longitude%22+as+longitude%0D%0Afrom+%5BUSGS_WC_eartag_deployments_2009-2011%5D" rel="nofollow">for example</a>:</p> <div class="highlight highlight-source-sql position-relative overflow-auto" data-snippet-clipboard-copy-content="select , "Capture Latitude" as latitude, "Capture Longitude" as longitude from [USGS_WC_eartag_deployments_2009-2011] "><pre><span class="pl-k">select</span> <span class="pl-k">*</span>, <span class="pl-s"><span class="pl-pds">"</span>Capture Latitude<span class="pl-pds">"</span></span> <span class="pl-k">as</span> latitude, <span class="pl-s"><span class="pl-pds">"</span>Capture Longitude<span class="pl-pds">"</span></span> <span class="pl-k">as</span> longitude <span class="pl-k">from</span> [USGS_WC_eartag_deployments_2009<span class="pl-k">-</span><span class="pl-c1">2011</span>]</pre></div> <p dir="auto">The map defaults to being displayed above the main results table on the page. You can use the <code>"container"</code> plugin setting to provide a CSS selector indicating an element that the map should be appended to instead.</p> <h2 dir="auto"><a id="user-content-custom-tile-layers" class="anchor" aria-hidden="true" href="#user-content-custom-tile-layers"><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>Custom tile layers</h2> <p dir="auto">You can customize the tile layer used by the maps using the <code>tile_layer</code> and <code>tile_layer_options</code> configuration settings. For example, to use the <a href="http://maps.stamen.com/watercolor/#12/37.7706/-122.3782" rel="nofollow">Stamen Watercolor tiles</a> you can use these settings:</p> <div class="highlight highlight-source-json position-relative overflow-auto" data-snippet-clipboard-copy-content="{ "plugins": { "datasette-cluster-map": { "tile_layer": "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}", "tile_layer_options": { "attribution": "Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a> &mdash; Map data &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors", "subdomains": "abcd", "minZoom": 1, "maxZoom": 16, "ext": "jpg" } } } } "><pre>{ <span class="pl-ent">"plugins"</span>: { <span class="pl-ent">"datasette-cluster-map"</span>: { <span class="pl-ent">"tile_layer"</span>: <span class="pl-s"><span class="pl-pds">"</span>https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}<span class="pl-pds">"</span></span>, <span class="pl-ent">"tile_layer_options"</span>: { <span class="pl-ent">"attribution"</span>: <span class="pl-s"><span class="pl-pds">"</span>Map tiles by <a href=<span class="pl-cce">\"</span>http://stamen.com<span class="pl-cce">\"</span>>Stamen Design</a>, <a href=<span class="pl-cce">\"</span>http://creativecommons.org/licenses/by/3.0<span class="pl-cce">\"</span>>CC BY 3.0</a> &mdash; Map data &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 class="pl-ent">"subdomains"</span>: <span class="pl-s"><span class="pl-pds">"</span>abcd<span class="pl-pds">"</span></span>, <span class="pl-ent">"minZoom"</span>: <span class="pl-c1">1</span>, <span class="pl-ent">"maxZoom"</span>: <span class="pl-c1">16</span>, <span class="pl-ent">"ext"</span>: <span class="pl-s"><span class="pl-pds">"</span>jpg<span class="pl-pds">"</span></span> } } } }</pre></div> <p dir="auto">The <a href="https://leaflet-extras.github.io/leaflet-providers/preview/index.html" rel="nofollow">Leaflet Providers preview list</a> has details of many other tile layers you can use.</p> <h2 dir="auto"><a id="user-content-custom-marker-popups" class="anchor" aria-hidden="true" href="#user-content-custom-marker-popups"><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>Custom marker popups</h2> <p dir="auto">The marker popup defaults to displaying the data for the underlying database row.</p> <p dir="auto">You can customize this by including a <code>popup</code> column in your results containing JSON that defines a more useful popup.</p> <p dir="auto">The JSON in the popup column should look something like this:</p> <div class="highlight highlight-source-json position-relative overflow-auto" data-snippet-clipboard-copy-content="{ "image": "https://niche-museums.imgix.net/dodgems.heic?w=800&h=400&fit=crop", "alt": "Dingles Fairground Heritage Centre", "title": "Dingles Fairground Heritage Centre", "description": "Home of the National Fairground Collection, Dingles has over 45,000 indoor square feet of vintage fairground rides... and you can go on them! Highlights include the last complete surviving and opera", "link": "/browse/museums/26" } "><pre>{ <span class="pl-ent">"image"</span>: <span class="pl-s"><span class="pl-pds">"</span>https://niche-museums.imgix.net/dodgems.heic?w=800&h=400&fit=crop<span class="pl-pds">"</span></span>, <span class="pl-ent">"alt"</span>: <span class="pl-s"><span class="pl-pds">"</span>Dingles Fairground Heritage Centre<span class="pl-pds">"</span></span>, <span class="pl-ent">"title"</span>: <span class="pl-s"><span class="pl-pds">"</span>Dingles Fairground Heritage Centre<span class="pl-pds">"</span></span>, <span class="pl-ent">"description"</span>: <span class="pl-s"><span class="pl-pds">"</span>Home of the National Fairground Collection, Dingles has over 45,000 indoor square feet of vintage fairground rides... and you can go on them! Highlights include the last complete surviving and opera<span class="pl-pds">"</span></span>, <span class="pl-ent">"link"</span>: <span class="pl-s"><span class="pl-pds">"</span>/browse/museums/26<span class="pl-pds">"</span></span> }</pre></div> <p dir="auto">Each of these columns is optional.</p> <ul dir="auto"> <li><code>title</code> is the title to show at the top of the popup</li> <li><code>image</code> is the URL to an image to display in the popup</li> <li><code>alt</code> is the alt attribute to use for that image</li> <li><code>description</code> is a longer string of text to use as a description</li> <li><code>link</code> is a URL that the marker content should link to</li> </ul> <p dir="auto">You can use the SQLite <code>json_object()</code> function to construct this data dynamically as part of your SQL query. Here's an example:</p> <div class="highlight highlight-source-sql position-relative overflow-auto" data-snippet-clipboard-copy-content="select json_object( 'image', photo_url \|\| '?w=800&h=400&fit=crop', 'title', name, 'description', substr(description, 0, 200), 'link', '/browse/museums/' \|\| id ) as popup, latitude, longitude from museums where id in (26, 27) order by id "><pre><span class="pl-k">select</span> json_object( <span class="pl-s"><span class="pl-pds">'</span>image<span class="pl-pds">'</span></span>, photo_url <span class="pl-k">\|\|</span> <span class="pl-s"><span class="pl-pds">'</span>?w=800&h=400&fit=crop<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>title<span class="pl-pds">'</span></span>, name, <span class="pl-s"><span class="pl-pds">'</span>description<span class="pl-pds">'</span></span>, substr(description, <span class="pl-c1">0</span>, <span class="pl-c1">200</span>), <span class="pl-s"><span class="pl-pds">'</span>link<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>/browse/museums/<span class="pl-pds">'</span></span> <span class="pl-k">\|\|</span> id ) <span class="pl-k">as</span> popup, latitude, longitude <span class="pl-k">from</span> museums <span class="pl-k">where</span> id <span class="pl-k">in</span> (<span class="pl-c1">26</span>, <span class="pl-c1">27</span>) <span class="pl-k">order by</span> id</pre></div> <p dir="auto"><a href="https://www.niche-museums.com/browse?sql=select+json_object%28%0D%0A++%27image%27%2C+photo_url+%7C%7C+%27%3Fw%3D800%26h%3D400%26fit%3Dcrop%27%2C%0D%0A++%27title%27%2C+name%2C%0D%0A++%27description%27%2C+substr%28description%2C+0%2C+200%29%2C%0D%0A++%27link%27%2C+%27%2Fbrowse%2Fmuseums%2F%27+%7C%7C+id%0D%0A++%29+as+popup%2C%0D%0A++latitude%2C+longitude+from+museums" rel="nofollow">Try that example here</a> or take a look at <a href="https://dogsheep-photos.dogsheep.net/public/photos_on_a_map" rel="nofollow">this demo built using a SQL view</a>.</p> <h2 dir="auto"><a id="user-content-how-i-deployed-the-demo" class="anchor" aria-hidden="true" href="#user-content-how-i-deployed-the-demo"><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>How I deployed the demo</h2> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="datasette publish cloudrun global-power-plants.db \ --service global-power-plants \ --metadata metadata.json \ --install=datasette-cluster-map \ --extra-options="--config facet_time_limit_ms:1000" "><pre><code>datasette publish cloudrun global-power-plants.db \ --service global-power-plants \ --metadata metadata.json \ --install=datasette-cluster-map \ --extra-options="--config facet_time_limit_ms:1000" </code></pre></div> <h2 dir="auto"><a id="user-content-development" class="anchor" aria-hidden="true" href="#user-content-development"><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>Development</h2> <p dir="auto">To set up this plugin locally, first checkout the code. Then create a new virtual environment:</p> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="cd datasette-cluster-map python3 -mvenv venv source venv/bin/activate "><pre><code>cd datasette-cluster-map python3 -mvenv venv source venv/bin/activate </code></pre></div> <p dir="auto">Or if you are using <code>pipenv</code>:</p> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="pipenv shell "><pre><code>pipenv shell </code></pre></div> <p dir="auto">Now install the dependencies and tests:</p> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="pip install -e '.[test]' "><pre><code>pip install -e '.[test]' </code></pre></div> <p dir="auto">To run the tests:</p> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="pytest "><pre><code>pytest </code></pre></div> </article></div>	1	public	0

Links from other tables

20 rows from repo in releases