Maps vector api + Leaflet

REST APIs
#1

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:

35
Screen Shot 2019-11-18 at 14.55.35.png524×546 126 KB

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 ^^

#2

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
#3

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?

#4

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
#5

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.

#6

@skarnl @brozak I’m trying to do the same, ie use Tomtom vector display API for my leaflet map. The reason for me to not use the tomtom SDK, is that I don’t really want to go all in with tomtom for drawing maps, in case changing the provider in future, etc.

Did anything changed in this topic since the last discussion? Is it possible to use vector tomtom API to draw a map using pure leaflet?

#7

That would require use of 3rd party plugins. We don’t support this.

#8

@maloleps Does it mean that vector leaflet functionality is just hardcoded in the tomtom big sdk? Is there any plan to make this sdk sliceable, ie to have vector API wrapper over pure leaflet available as a small library?
BTW, is the sdk source not available publicly? I cannot find it on TomTom · GitHub

#9

V4 is an old SDK. Current one is not based on Leaflet and from what I know we don’t plan to return or work on V4.
SDK source code is not available on public repo.

#10

@tiramizoo - TomTom map display tiles are compatible with MapLibre specification.
Leaflet is not fit for displaying vector tiles and only supports it thanks to plugins.
If you just want to consume this API for Leaflet, then you could try using GitHub - maplibre/maplibre-gl-leaflet: This is a binding from MapLibre GL JS to the familiar Leaflet API. plugin (see Motivation section of the readme for limitations related to this approach).

#11

I tried with an example from: maplibre-gl-leaflet/basic.html at main · maplibre/maplibre-gl-leaflet · GitHub
Just changed the style URL to: https://api.tomtom.com/style/1/style/21.1.0-*?map=basic_main&traffic_incidents=incidents_day&traffic_flow=flow_relative0&poi=poi_main&key=myapikey
and it works

#12

Thank you. Indeed using maplibre-gl-leaflet works.

So from what I understand, leaflet is just not designed to work with vector maps, and maplibre looks like a successor of open source tooling for maps as it’s based on WebGL and uses vector tiles.

BTW, is the tomtom SDK based on the maplibre library?