Maps vector api + Leaflet

So I’m trying to get the maps api working with Leaflet.
I call the url to retrieve the pbf-version of the vector data - but somehow I can’t get the styling working. I’m currently trying to get it to work with the VectorGrid-plugin (https://github.com/Leaflet/Leaflet.VectorGrid)

In my understanding the Map Web SDK also is based on Mapbox / Leaflet, so I was wondering how that’s implemented. I looked into the (minified) code of the SDK, but can’t figure out how they do it.

Can someone give some pointers how to make this working?

const map = new Map(

L.vectorGrid
	.protobuf(
		`https://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.pbf?key=${TOMTOM_API_KEY}`,
	)
	.addTo(map);

};

The code above looks like this:

And I tried multiple ways of rendering and styling, but can’t seem to get it to work.

const vectorTileOptions = {
	vectorTileLayerStyles: {
		// A plain set of L.Path options.
    landuse: {
        weight: 2,
        fillColor: '#9bc2c4',
        fillOpacity: 1,
        fill: true
    },
    water: {
        weight: 2,
        fillColor: '#00ff00',
        fillOpacity: 1,
        fill: true
    },
			['International road']: {
				country_code: {
					weight: 2,
					fillColor: '#c41024',
					fillOpacity: 1,
					fill: true
				}
			},
			country_code: {
				weight: 2,
				fillColor: '#3372c4',
				fillOpacity: 1,
				fill: true
			},
			Motorway: {
				country_code: {
					weight: 2,
					fillColor: '#c48017',
					fillOpacity: 1,
					fill: true
				}
			}
	},
};

I hope someone can point me in the right direction ^^

Hi.

Is there any particular reason why you don’t want to use TomTom’s SDK instead?

V.4 is based on Leaflet, so if you use it, you can use Leaflet-compatible plugins with it etc.

If you are not bound to Leaflet, then you could check out our v5 library that is all about vector data, is more light-weight and better, faster, coffe-brewing etc. :wink: It is available on NPM and CDN for your convenience:

Besides, styling of the map layers can be a daunting task - you probably don’t want to do this yourself in code :wink: Have you seen this map styler tool we have? https://developer.tomtom.com/maps-api/map-styler
Style created there can be applied to vector tiles in no time - check these examples with TomTom Maps SDK for Web:
v4 - https://developer.tomtom.com/maps-sdk-web/functional-examples#vector-map-style-altering
v5 - https://developer.tomtom.com/maps-sdk-web-js/functional-examples#examples,map,setting-custom-map-style.html

1 Like

Hi Brozak,

Thanks for your quick reply.
The reason I’m looking to implement the Maps API with Leaflet is that we currently have our own implementation of Leaflet with another raster-tile-provider. But we’re looking to replace that with TomTom vector tiles, hence why I’m looking for the easiest way to switch to the vector tiles, without having to refactor our map-software to the TomTom SDK.

So I have downloaded the v4-SDK, but I can’t find (in the minified source) how the vector-data is styling / implemented with Leaflet.

Maybe you could give me some snippets showing how it’s done in v4?

I was suggesting replacing pure Leaflet library in your project with the Maps SDK for Web v4 library. Then using it for vector tiles rendering is very easy.
You will need to host the library for your project (as it is only available in downloadable form for v4), but you have to host sprites and glyphs to have vector maps rendered either way.

v4 is wrapping Leaflet, so with some imports replacement etc. it should work for your project.

1 Like

Thanks. I just discovered (almost by accident) that in v4 the mapbox-gl-leaflet plugin is used. So that’s how the Mapbox Style json is done, all this time I was under the assumption that also something like VectorGrid was used and some kind of conversion of the Mapbox Style JSON was done.

All this time I ignored this mapbox-gl-leaflet plugin (and tried to implement VectorGrid) because the mapbox-gl-leaflet plugin is marked as being experimental and not actively supported.

But this (kinda) solves my question.