eyeseast / datasette-geojson-map

Render a map for any query with a geometry column
24 stars 1 forks source link

broken marker images #26

Closed mroswell closed 3 months ago

mroswell commented 10 months ago

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/pin-m+7e7e7e@2x.png

visiting that yields:

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

I'm guessing there is some issue with leaflet.

Screen Shot 2024-01-12 at 11 28 32 PM

../-/databases

Screen Shot 2024-01-12 at 11 23 45 PM

../-/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" ] } ]

mroswell commented 10 months ago

I've figured out a work-around (which is to bypass the datasette-geojson-map plugin, and use the datasette-cluster-map plugin, as follows):

SELECT *,
    JSON_EXTRACT(geometry, '$.coordinates[1]') AS latitude,
    JSON_EXTRACT(geometry, '$.coordinates[0]') AS longitude 
FROM vacant_bldg_rehabs;
Kobold commented 4 months ago

It looks like leaflet-simplestyle's "Maki markers" depend on Mapbox icons Mapbox no longer serves 😅 . Here's a link to upstream source [1]. To address the issue, I cloned this plugin repo, made the change below to turn off Maki markers, then setup.py installed my local copy of the plugin. Here's the change:

diff --git a/datasette_geojson_map/static/map.js b/datasette_geojson_map/static/map.js
index aef544d..07137ea 100644
--- a/datasette_geojson_map/static/map.js
+++ b/datasette_geojson_map/static/map.js
@@ -22,7 +22,7 @@ async function render() {
    parent.insertBefore(container, parent.firstElementChild);

    const map = createMap(L, container);
-   const layer = L.geoJSON(geojson, { useSimpleStyle: true, useMakiMarkers: true })
+   const layer = L.geoJSON(geojson, { useSimpleStyle: true })
        .addTo(map)
        .bindPopup(popup);
    const bounds = layer.getBounds();

After this, markers display as expected.

[1] https://github.com/rowanwins/leaflet-simplestyle/blob/08c19856252fe644bc9ae0c97fadeca9e1f729ea/src/simplestyle.js#L80