1

I'm interested in how to host vector tiles from static server. It's easy to serve png tiles with Leaflet, but I'm failing to do so with .geojson, .pbf or .mvt tiles. I'm trying to add to a map a single point and it just doesn't appear no matter what.

I'm not bound to Leaflet or any of its plugins or gis tools, and yet I can't make it work. Here is how I failed with protomaps-leaflet plugin:

Protomaps + Leaflet attempt

Here is small HTML which renders vector tiles:

https://protomaps.github.io/protomaps-leaflet/examples/leaflet.html#0/0/0 https://github.com/protomaps/protomaps-leaflet/blob/main/examples/leaflet.html

This is how vector layer is created and added to a map:

const map = L.map('map') let hash = new L.Hash(map) if (!window.location.hash) map.setView(new L.LatLng(0,0),0) var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',flavor:'light',lang:"en"}) layer.addTo(map)

It fetches .mvt files from https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f url.

I've downloaded leaflet.html file to empty dir, changed urlpattern to ./tilesMeta/{z}/{x}/{y}.pbf, created output.geojson file:

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [0, 0] }, "properties": { "name": "Test Point" } } ] }

Created .pbf files:

& $tippecanoe --no-tile-compression -e tilesMeta -l default -z1 output.geojson

Started Http server:

python -m http.server 8000

But at http://localhost:8000/protomapEmpty.html there is an empty map canvas.

Also, I've tried creating a lot of points (in hope they will be more visible):

$feature = @' { "type": "Feature", "geometry": { "type": "Point", "coordinates": [0, 0] }, "properties": { "name": "Test Point" } } '@ | ConvertFrom-Json -Depth 9 $features = -10..10 | % { $x = $_ -10..10 | % { $feature.geometry.coordinates = $x,$_; $feature.properties.name = $x,$_ -join " " Add-Member -inp $feature -NotePropertyName id -NotePropertyValue (Get-Random -Min 0 -max 99999) -Force $feature | ConvertTo-Json -Depth 9 | ConvertFrom-Json -Depth 9 } } [pscustomobject]@{type = 'FeatureCollection'; features = $features} | ConvertTo-Json -Depth 9 > points.geojson & $tippecanoe --no-tile-compression -e tilesMeta -l default -zg .\points.geojson

Directory structure:

.\output.geojson .\points.geojson .\protomapEmpty.html .\tilesMeta\metadata.json .\tilesMeta\0\0\0.pbf .\tilesMeta\1\0\0.pbf .\tilesMeta\1\0\1.pbf .\tilesMeta\1\1\0.pbf .\tilesMeta\1\1\1.pbf

There are no errors in js console. It just doesn't display any vector tiles.

I've tried other Leaflet vector tiles plugins with no luck:

https://leafletjs.com/plugins.html#vector-tiles

These tutorials seem related, but I haven't tried them yet:

https://xycarto.com/2020/11/18/static-vector-tiles-for-small-projects/

https://xycarto.com/2021/04/30/static-vector-tiles-ii-openlayers-with-custom-projection/

I even tried downloading .mvt file from https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f and placing it into corresponding directory, but no luck (each time I was sure file extensions match url pattern).

Improve this question

1 Answer 1

Reset to default
1

I've switched to OpenLayers and got it working pretty fast.

  1. Create index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mapbox Vector Tiles</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css"> <style> .map { width: 100%; height: 400px; } .map { background: #f8f4f0; } </style> </head> <body> <div id="map" class="map"></div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script> <script> const map = new ol.Map({ layers: [ new ol.layer.VectorTile({ declutter: true, source: new ol.source.VectorTile({ format: new ol.format.MVT(), url: './tilesMeta/{z}/{x}/{y}.pbf', }) }), ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 0, }), }); </script> </body> </html>
  1. Create point.geojson
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [0, 0] }, "properties": { "name": "Test Point" } } ] }
  1. Create .pbf tiles in tilesMeta dir with tippecanoe:
& $tippecanoe --no-tile-compression -e tilesMeta -l default -z2 .\point.geojson
  1. python -m http.server 8000
  2. Visit http://localhost:8000/ , point will be visible (or many points if corresponding pwsh snippet was used from question).
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.