home / content / repos

repos: 382986564

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
382986564 MDEwOlJlcG9zaXRvcnkzODI5ODY1NjQ= datasette-geojson-map eyeseast/datasette-geojson-map 0 25778 https://github.com/eyeseast/datasette-geojson-map Render a map for any query with a geometry column 0 2021-07-05T01:54:13Z 2022-03-04T00:16:17Z 2022-04-27T20:39:47Z   3651 9 9 Python 1 1 1 1 0 0 0 0 10   ["datasette-io", "datasette-plugin", "geojson", "gis", "leafletjs", "mapping"] 0 10 9 main {"admin": false, "maintain": false, "push": false, "triage": false, "pull": false}     0 1 # datasette-geojson-map [![PyPI](https://img.shields.io/pypi/v/datasette-geojson-map.svg)](https://pypi.org/project/datasette-geojson-map/) [![Changelog](https://img.shields.io/github/v/release/eyeseast/datasette-geojson-map?include_prereleases&label=changelog)](https://github.com/eyeseast/datasette-geojson-map/releases) [![Tests](https://github.com/eyeseast/datasette-geojson-map/workflows/Test/badge.svg)](https://github.com/eyeseast/datasette-geojson-map/actions?query=workflow%3ATest) [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/eyeseast/datasette-geojson-map/blob/main/LICENSE) Render a map for any query with a geometry column ## Installation Install this plugin in the same environment as Datasette. $ datasette install datasette-geojson-map ## Usage Start by loading a GIS file. For example, you might use [geojson-to-sqlite](https://pypi.org/project/geojson-to-sqlite/) or [shapefile-to-sqlite](https://pypi.org/project/shapefile-to-sqlite/) to load [neighborhood boundaries](https://bostonopendata-boston.opendata.arcgis.com/datasets/3525b0ee6e6b427f9aab5d0a1d0a1a28_0/explore) into a SQLite database. ```sh wget -O neighborhoods.geojson https://opendata.arcgis.com/datasets/3525b0ee6e6b427f9aab5d0a1d0a1a28_0.geojson geojson-to-sqlite boston.db neighborhoods neighborhoods.geojson ``` (The command above uses Spatialite, but that's not required.) Start up `datasette` and navigate to the `neighborhoods` table. ```sh datasette serve boston.db # in another terminal tab open http://localhost:8001/boston/neighborhoods ``` You should see a map centered on Boston with each neighborhood outlined. Clicking a boundary will bring up a popup with details on that feature. ![Boston neighbhorhoods map](img/boston-neighborhoods-map.png) This plugin relies on (and will install) [datasette-geojson](https://github.com/eyeseast/datasette-geojson). Any query that includes a `geometry` column will produce a map of the results. This also includes single row views. Run the included `demo` project to see it live. ## Configuration This project uses the same map configuration as [datasette-cluster-map](https://github.com/simonw/datasette-cluster-map). Here's how you would use [Stamen's terrain tiles](http://maps.stamen.com/terrain/#12/37.7706/-122.3782): ```yaml plugins: datasette-geojson-map: tile_layer: https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext} tile_layer_options: attribution: >- Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>. subdomains: abcd minZoom: 1 maxZoom: 16 ext: jpg ``` Options: - `tile_layer`: Use a URL template that can be passed to a [Leaflet Tilelayer](https://leafletjs.com/reference-1.7.1.html#tilelayer) - `tile_layer_options`: All options will be passed to the tile layer. See [Leaflet documentation](https://leafletjs.com/reference-1.7.1.html#tilelayer) for more on possible values here. ## Styling map features Map features can be styled using the [simplestyle-spec](https://github.com/mapbox/simplestyle-spec). This requires setting specific fields on returned rows. Here's an example: ```sql SELECT Name, geometry, "#ff0000" as fill, "#0000ff" as stroke, 0.2 as stroke-width, from neighborhoods ``` That will render a neighborhood map where each polygon is filled in red, outlined in blue and lines are 0.2 pixels wide. A more useful approach would use the `CASE` statement to color features based on data: ```sql SELECT Name, geometry, CASE Name WHEN "Roslindale" THEN "#ff0000" WHEN "Dorchester" THEN "#0000ff" ELSE "#dddddd" END fill FROM neighborhoods ``` This will fill Roslindale in red, Dorchester in blue and all other neighborhoods in gray. ## Development To set up this plugin locally, first checkout the code. Then create a new virtual environment: cd datasette-geojson-map python3 -mvenv venv source venv/bin/activate Or if you are using `pipenv`: pipenv shell Now install the dependencies and test dependencies: 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-geojson-map" class="anchor" aria-hidden="true" href="#user-content-datasette-geojson-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-geojson-map</h1> <p dir="auto"><a href="https://pypi.org/project/datasette-geojson-map/" rel="nofollow"><img src="https://camo.githubusercontent.com/1534879e09b364c34ab31432e489c7be09c28cdc94c68a85f1ffefc9b2a0f8df/68747470733a2f2f696d672e736869656c64732e696f2f707970692f762f6461746173657474652d67656f6a736f6e2d6d61702e737667" alt="PyPI" data-canonical-src="https://img.shields.io/pypi/v/datasette-geojson-map.svg" style="max-width: 100%;"></a> <a href="https://github.com/eyeseast/datasette-geojson-map/releases"><img src="https://camo.githubusercontent.com/d45ff62474954cad3f625bc2d1e121eec6e3b2797d55917af6419fb819b45cef/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f65796573656173742f6461746173657474652d67656f6a736f6e2d6d61703f696e636c7564655f70726572656c6561736573266c6162656c3d6368616e67656c6f67" alt="Changelog" data-canonical-src="https://img.shields.io/github/v/release/eyeseast/datasette-geojson-map?include_prereleases&amp;label=changelog" style="max-width: 100%;"></a> <a href="https://github.com/eyeseast/datasette-geojson-map/actions?query=workflow%3ATest"><img src="https://github.com/eyeseast/datasette-geojson-map/workflows/Test/badge.svg" alt="Tests" style="max-width: 100%;"></a> <a href="https://github.com/eyeseast/datasette-geojson-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">Render a map for any query with a geometry column</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">Install this plugin in the same environment as Datasette.</p> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="$ datasette install datasette-geojson-map"><pre class="notranslate"><code class="notranslate">$ datasette install datasette-geojson-map </code></pre></div> <h2 dir="auto"><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 dir="auto">Start by loading a GIS file.</p> <p dir="auto">For example, you might use <a href="https://pypi.org/project/geojson-to-sqlite/" rel="nofollow">geojson-to-sqlite</a> or <a href="https://pypi.org/project/shapefile-to-sqlite/" rel="nofollow">shapefile-to-sqlite</a> to load <a href="https://bostonopendata-boston.opendata.arcgis.com/datasets/3525b0ee6e6b427f9aab5d0a1d0a1a28_0/explore" rel="nofollow">neighborhood boundaries</a> into a SQLite database.</p> <div class="highlight highlight-source-shell position-relative overflow-auto" data-snippet-clipboard-copy-content="wget -O neighborhoods.geojson https://opendata.arcgis.com/datasets/3525b0ee6e6b427f9aab5d0a1d0a1a28_0.geojson geojson-to-sqlite boston.db neighborhoods neighborhoods.geojson"><pre>wget -O neighborhoods.geojson https://opendata.arcgis.com/datasets/3525b0ee6e6b427f9aab5d0a1d0a1a28_0.geojson geojson-to-sqlite boston.db neighborhoods neighborhoods.geojson</pre></div> <p dir="auto">(The command above uses Spatialite, but that's not required.)</p> <p dir="auto">Start up <code>datasette</code> and navigate to the <code>neighborhoods</code> table.</p> <div class="highlight highlight-source-shell position-relative overflow-auto" data-snippet-clipboard-copy-content="datasette serve boston.db # in another terminal tab open http://localhost:8001/boston/neighborhoods"><pre>datasette serve boston.db <span class="pl-c"><span class="pl-c">#</span> in another terminal tab</span> open http://localhost:8001/boston/neighborhoods</pre></div> <p dir="auto">You should see a map centered on Boston with each neighborhood outlined. Clicking a boundary will bring up a popup with details on that feature.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer" href="img/boston-neighborhoods-map.png"><img src="img/boston-neighborhoods-map.png" alt="Boston neighbhorhoods map" style="max-width: 100%;"></a></p> <p dir="auto">This plugin relies on (and will install) <a href="https://github.com/eyeseast/datasette-geojson">datasette-geojson</a>. Any query that includes a <code>geometry</code> column will produce a map of the results. This also includes single row views.</p> <p dir="auto">Run the included <code>demo</code> project to see it live.</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">This project uses the same map configuration as <a href="https://github.com/simonw/datasette-cluster-map">datasette-cluster-map</a>. Here's how you would use <a href="http://maps.stamen.com/terrain/#12/37.7706/-122.3782" rel="nofollow">Stamen's terrain tiles</a>:</p> <div class="highlight highlight-source-yaml position-relative overflow-auto" data-snippet-clipboard-copy-content="plugins: datasette-geojson-map: tile_layer: https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext} tile_layer_options: attribution: &gt;- Map tiles by &lt;a href=&quot;http://stamen.com&quot;&gt;Stamen Design&lt;/a&gt;, under &lt;a href=&quot;http://creativecommons.org/licenses/by/3.0&quot;&gt;CC BY 3.0&lt;/a&gt;. Data by &lt;a href=&quot;http://openstreetmap.org&quot;&gt;OpenStreetMap&lt;/a&gt;, under &lt;a href=&quot;http://www.openstreetmap.org/copyright&quot;&gt;ODbL&lt;/a&gt;. subdomains: abcd minZoom: 1 maxZoom: 16 ext: jpg"><pre><span class="pl-ent">plugins</span>: <span class="pl-ent">datasette-geojson-map</span>: <span class="pl-ent">tile_layer</span>: <span class="pl-s">https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}</span> <span class="pl-ent">tile_layer_options</span>: <span class="pl-ent">attribution</span>: <span class="pl-s">&gt;-</span> <span class="pl-s"> Map tiles by &lt;a href="http://stamen.com"&gt;Stamen Design&lt;/a&gt;, </span> <span class="pl-s"> under &lt;a href="http://creativecommons.org/licenses/by/3.0"&gt;CC BY 3.0&lt;/a&gt;. </span> <span class="pl-s"> Data by &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;, </span> <span class="pl-s"> under &lt;a href="http://www.openstreetmap.org/copyright"&gt;ODbL&lt;/a&gt;.</span> <span class="pl-s"></span> <span class="pl-ent">subdomains</span>: <span class="pl-s">abcd</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">jpg</span></pre></div> <p dir="auto">Options:</p> <ul dir="auto"> <li><code>tile_layer</code>: Use a URL template that can be passed to a <a href="https://leafletjs.com/reference-1.7.1.html#tilelayer" rel="nofollow">Leaflet Tilelayer</a></li> <li><code>tile_layer_options</code>: All options will be passed to the tile layer. See <a href="https://leafletjs.com/reference-1.7.1.html#tilelayer" rel="nofollow">Leaflet documentation</a> for more on possible values here.</li> </ul> <h2 dir="auto"><a id="user-content-styling-map-features" class="anchor" aria-hidden="true" href="#user-content-styling-map-features"><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>Styling map features</h2> <p dir="auto">Map features can be styled using the <a href="https://github.com/mapbox/simplestyle-spec">simplestyle-spec</a>. This requires setting specific fields on returned rows. Here's an example:</p> <div class="highlight highlight-source-sql position-relative overflow-auto" data-snippet-clipboard-copy-content="SELECT Name, geometry, &quot;#ff0000&quot; as fill, &quot;#0000ff&quot; as stroke, 0.2 as stroke-width, from neighborhoods"><pre><span class="pl-k">SELECT</span> Name, geometry, <span class="pl-s"><span class="pl-pds">"</span>#ff0000<span class="pl-pds">"</span></span> <span class="pl-k">as</span> fill, <span class="pl-s"><span class="pl-pds">"</span>#0000ff<span class="pl-pds">"</span></span> <span class="pl-k">as</span> stroke, <span class="pl-c1">0</span>.<span class="pl-c1">2</span> <span class="pl-k">as</span> stroke<span class="pl-k">-</span>width, <span class="pl-k">from</span> neighborhoods</pre></div> <p dir="auto">That will render a neighborhood map where each polygon is filled in red, outlined in blue and lines are 0.2 pixels wide.</p> <p dir="auto">A more useful approach would use the <code>CASE</code> statement to color features based on data:</p> <div class="highlight highlight-source-sql position-relative overflow-auto" data-snippet-clipboard-copy-content="SELECT Name, geometry, CASE Name WHEN &quot;Roslindale&quot; THEN &quot;#ff0000&quot; WHEN &quot;Dorchester&quot; THEN &quot;#0000ff&quot; ELSE &quot;#dddddd&quot; END fill FROM neighborhoods"><pre><span class="pl-k">SELECT</span> Name, geometry, CASE Name WHEN <span class="pl-s"><span class="pl-pds">"</span>Roslindale<span class="pl-pds">"</span></span> THEN <span class="pl-s"><span class="pl-pds">"</span>#ff0000<span class="pl-pds">"</span></span> WHEN <span class="pl-s"><span class="pl-pds">"</span>Dorchester<span class="pl-pds">"</span></span> THEN <span class="pl-s"><span class="pl-pds">"</span>#0000ff<span class="pl-pds">"</span></span> ELSE <span class="pl-s"><span class="pl-pds">"</span>#dddddd<span class="pl-pds">"</span></span> END fill <span class="pl-k">FROM</span> neighborhoods</pre></div> <p dir="auto">This will fill Roslindale in red, Dorchester in blue and all other neighborhoods in gray.</p> <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-geojson-map python3 -mvenv venv source venv/bin/activate"><pre class="notranslate"><code class="notranslate">cd datasette-geojson-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 class="notranslate"><code class="notranslate">pipenv shell </code></pre></div> <p dir="auto">Now install the dependencies and test dependencies:</p> <div class="snippet-clipboard-content position-relative overflow-auto" data-snippet-clipboard-copy-content="pip install -e '.[test]'"><pre class="notranslate"><code class="notranslate">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 class="notranslate"><code class="notranslate">pytest </code></pre></div> </article></div> 1 public 0      

Links from other tables

  • 5 rows from repo in releases
Powered by Datasette · Queries took 1.145ms