Re: vectorLayer with Leaflet

[Pascal Barth]

Hi Jon,

To better render vector tiles, you might want to use a MapLibre renderer.

There is a library here that can do the job of linking your Leaflet and a MapLibre instance : https://github.com/maplibre/maplibre-gl-leaflet 

The style JSON is otherwise not interpreted as intended (our cartographic department works with MapLibre to define the look and feel of the style)

Hope it helps,

Cheers,

Pascal

On 18 Aug 2024, at 17:23, John-David Deubl <struk...@gmail.com> wrote:

Hello,

I am currently developing a web app to make it easier to report damage in public spaces to authorities: https://fixit.velokurierbiel.ch/ I use Leaflet and a geoAdmin layer for this, so far I have used a RasterImageLayer -> https://github.com/strukturart/fixit/blob/9a160fa101262f5853f6c77aaff6088f4dbac493/application/index.js#L48

but this is limited to zoom depth 18, which is not sufficient, so I would like to try using vectorLayer. There is a plugin for Leaflet: https://gitlab.com/jkuebart/Leaflet.VectorTileLayer/

However, I only get blue lines and the zoom depth is even more limited. I use the following URLs

let options = {
style:
"https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json",
};

const vectorLayer = vectorTileLayer(
"https://vectortiles.geo.admin.ch/tiles/ch.swisstopo.leichte-basiskarte.vt/v2.0.0/{z}/{x}/{y}.pbf",
options
);

are these correct?

greetings john

--
You received this message because you are subscribed to the Google Groups "GeoAdminCh API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geoadmin-api...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geoadmin-api/b4ee13b8-98a0-4861-878d-15872041884fn%40googlegroups.com.

[John-David Deubl]

Hello Pascal,

vectorTiles is still new to me. I will try to use maplibre-gl-leaflet.js. But what I'm worried about first is whether the URL for the .pbf is correct?

https://vectortiles.geo.admin.ch/tiles/ch.swisstopo.leichte-basiskarte.vt/v2.0.0/{z}/{x}/{y}.pbf

greetings john

[John-David Deubl]

Finally I managed to integrate a vector layer.

//https://gitlab.com/jkuebart/Leaflet.VectorTileLayer/
let options = {
minZoom: 10,
maxZoom: 22,
maxNativeZoom: 14,

fetchOptions: {
mode: "no-cors",
},
};
let vectorURL =
"https://vectortiles.geo.admin.ch/tiles/ch.swisstopo.base.vt/v1.0.0/{z}/{x}/{y}.pbf";
const vectorLayer = vectorTileLayer(vectorURL, options);

L.maplibreGL({
style:
"https://vectortiles.geo.admin.ch/styles/ch.swisstopo.basemap.vt/style.json",
}).addTo(map);