eyeseast / datasette-geojson-map Goto Github PK

This looks very promising: https://protomaps.com/blog/serverless-maps-now-open-source

Leaflet integration: https://protomaps.com/docs/frontends/leaflet

https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext} is no longer available.

There is another deprecated url that puts up a comment rendering the map useless.

(that other URL was: "https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}{r}.{ext}") and I planned a little pull request....)

But at this point you have to create an account on https://stadiamaps.com/. And even with a free account, you are required to submit a domain name. (I didn't figure out how to use localhost. If I wanted to could probably create a hosts file but that would go beyond the scope of this README.

Is there another source of free, accessible basemaps?

UPDATE:

At the bottom of the onboarding form (where it was asking for my domain name) they had a note

Running into difficulties? Not sure what to do?
Don't panic! Our real human support is here to help.

But when I clicked the Get Help button nothing happened. Sigh. (Could be just a time-of-day issue...)
(That was on https://stadiamaps.com/stamen/onboarding/setup-authentication/ )

New hotness: http://flatgeobuf.org/

Unfortunately, simplestyle isn't working for me. 

I'm using a similar structure as the boston example. 

  The default map does display:

Do you have any suggestions for things I can try?

Probably also switch to Poetry. Need to get a better handle on this.

Height is set to 400 pixels in CSS here: https://github.com/eyeseast/datasette-geojson-map/blob/main/datasette_geojson_map/static/map.css#L2

Making this configurable would require an inline style, but I think that's fine.

The current configuration setup assumes one tile layer:

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

What if I configured more than one layer, as an array. Then I could add a layer switch control.

datasette-geojson-map:
    tile_layers: 
        name: Stamen Terrain
        url: https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}
        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

    name: OSM
    url: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
    options:
        attribution: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors

This probably means rolling my own simple-style-spec implementation, but I'm fine with that.

Right now, a map will fit bounds of visible features on load.

But in a view like this, I might want to direct your attention without changing the actual query.

There's a very old plugin that does this. Not sure if it's worth just writing a plugin myself.

I don't know why I'm getting broken marker images. For some reason they point to mapbox. Which is weird, because I don't see mapbox in the code. The file it's trying to access is:
https://a.tiles.mapbox.com/v3/marker/[email protected]

visiting that yields:

{
"message": "Not Authorized",
"error_detail": "Direct access not allowed"
}

I'm guessing there is some issue with leaflet.

../-/databases

../-/metadata

{}

../-/settings

{
    "default_page_size": 100,
    "max_returned_rows": 1000,
    "num_sql_threads": 3,
    "sql_time_limit_ms": 1000,
    "default_facet_size": 30,
    "facet_time_limit_ms": 200,
    "facet_suggest_time_limit_ms": 50,
    "allow_facet": true,
    "default_allow_sql": true,
    "allow_download": true,
    "suggest_facets": true,
    "default_cache_ttl": 5,
    "cache_size_kb": 0,
    "allow_csv_stream": true,
    "max_csv_mb": 100,
    "truncate_cells_html": 2048,
    "force_https_urls": false,
    "template_debug": false,
    "trace_debug": false,
    "base_url": "/"
}

../-/plugins

[
{
"name": "datasette-cluster-map",
"static": true,
"templates": false,
"version": "0.17.2",
"hooks": [
"extra_body_script",
"extra_js_urls"
]
},
{
"name": "datasette-enrichments",
"static": false,
"templates": true,
"version": "0.2",
"hooks": [
"actor_from_request",
"permission_allowed",
"register_routes",
"table_actions"
]
},
{
"name": "datasette-enrichments-gpt",
"static": false,
"templates": true,
"version": "0.3",
"hooks": [
"register_enrichments"
]
},
{
"name": "datasette-enrichments-jinja",
"static": false,
"templates": false,
"version": "0.1",
"hooks": [
"register_enrichments"
]
},
{
"name": "datasette-enrichments-opencage",
"static": false,
"templates": false,
"version": "0.1",
"hooks": [
"register_enrichments"
]
},
{
"name": "datasette-geojson",
"static": false,
"templates": false,
"version": "0.4.0",
"hooks": [
"prepare_connection",
"register_output_renderer"
]
},
{
"name": "datasette-geojson-map",
"static": true,
"templates": false,
"version": "0.4.0",
"hooks": [
"extra_body_script",
"extra_css_urls",
"extra_js_urls"
]
},
{
"name": "datasette-leaflet",
"static": true,
"templates": false,
"version": "0.2.2",
"hooks": [
"extra_body_script",
"extra_template_vars"
]
},
{
"name": "datasette-upload-csvs",
"static": false,
"templates": true,
"version": "0.8.3",
"hooks": [
"menu_links",
"permission_allowed",
"register_routes"
]
},
{
"name": "datasette-vega",
"static": true,
"templates": false,
"version": "0.6.2",
"hooks": [
"extra_css_urls",
"extra_js_urls"
]
}
]

This import was probably a bad idea: https://github.com/eyeseast/datasette-geojson-map/blob/main/datasette_geojson_map/__init__.py#L6

That ended up breaking with PR that changed how Leaflet URLs get generated: simonw/datasette-leaflet#9. I could run the plugin hook inside this plugin to generate the right URLs, but that still feels like the wrong way to do it. I could re-run the logic in datasette-leaflet to build the right URL, but I don't want to.

So client-side is probably the best way to ensure the right CSS and JS files are loaded.

Could I add a view that generates a map on its own page? This would make maps embeddable direct from datasette. Not sure if that's really what I want to encourage, but it might be cool.

Right now, I run a query and the map fits the bounds of the returned features. But, if I have a bounding box, I could go the other way and search features within that box. This is especially fast if I have a spatial index.

This isn't super useful:

Nor is a popup with 40 rows that's too tall for the map viewport.

That's making it loose the actual SQL query. Oops.

I prefer the data inspection method used on mapshaper.org.

1. The info box is available on hover
2. The info box is located so as not to obscure the map when the field count is large.

Might be nice to have a plugin metadata option to enable these features.

Lots of options here: https://leafletjs.com/reference.html#map

Need to decide what makes sense to configure.

In the documentation.
The link displayed in the example is wrong: wget -O neighborhoods.geojson https://opendata.arcgis.com/datasets/3525b0ee6e6b427f9aab5d0a1d0a1a28_0

I should be able to use plugin configuration to set a base layer, at least. Probably need custom attribution, too.

Here's how to get it: https://docs.datasette.io/en/stable/internals.html#plugin-config-plugin-name-database-none-table-none

This would involve setting the pointToLayer option.

It would also be an extension of simple-style-spec, so again, writing my own version of that.

If I want to use Mapbox tiles (and probably others) I need to pass an API key with each request. Is there a way to keep this out of version control with metadata? Or pass it as an environment variable?

It's worth noting that Mapbox is pretty explicit that access tokens aren't secret. The best case might be to use a deployment-specific token that only allows requests from a specific set of domains.

Docs: https://docs.datasette.io/en/1.0a8/javascript_plugins.html#javascript-plugins

Maybe with this: https://github.com/Leaflet/Leaflet.VectorGrid

Github does it so we can, too.

Here's the spec: https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0

Not sure if this requires using the old mapbox.js. Would rather not add a dependency, especially an old one.