How to make the vector tile map artifact maputnik support geoserver

Keywords: maputnik, geoserver, vector map, vector tile, mapbox, mapboxgl, map matching, map color matching

I have always wanted to build a vector map matching tool similar to Baidu and Gaode maps.

Baidu personalized map matching tool:

AutoNavi custom map matching tool:

I have searched on the Internet several times and have not found it.

I accidentally learned about Maputnik from this blog , and after fiddling with it for a while, I feel like I'm too late to meet each other. Correct! It's what I'm looking for.

What is Maputnik? What's the use?

Maputnik is an open source visual editor of Mapbox style specifications. It is the same thing as Mapbox studio of Mapbox, personalized map editor of Baidu Maps, and custom map editor of AutoNavi Maps. They are all used to edit vector tiles. The style of the map, which is used with the map.

With Maputnik, you can publish maps like this,

Publish vector tiles with geoserver
Use Maputnik to configure the map style for the above vector tiles
Use mapbox to call vector tiles, and apply the above map style, render the map display in the foreground

Compared with mapbox studio, Maputnik is open source and can be used locally for free. You no longer need to upload your own map data to the mapbox server. Accordingly, you are not subject to the monthly limit on the amount of data uploaded by the mapbox free account. Limit on the number of map calls.

maputnik official website: https://maputnik.github.io/

Maputnik github地址：https://github.com/maputnik/editor

Maputnik official online experience address: https://maputnik.github.io/editor/

The background of Maputnik's creation , the author wanted to create a set of open source GIS solutions against mapbox.

Problems encountered

I encountered a problem when loading the vector tiles released by geoserver with Maputnik version 1.7.0. The loaded layer did not display. This problem has troubled me for several days. I went to Baidu and Google on the Internet. There were very few relevant information and no answer.

Is it possible that the weapons that I have encountered hard to encounter will pass by like this? No, I don't allow it!

The effort paid off. After a few days of tossing, I finally discovered the problem. Let me talk about it in detail.

Troubleshoot

When I found that the map was not displayed, I habitually opened the developer tools of the browser, and found that when zooming or dragging the map, the browser requested tiles, but they were not successful.

Copy one of the requested addresses, open it in the browser alone, and see the error message returned by geoserver that the requested tile exceeds the data range.

The api of Maputnik map uses mapboxgl, so it may be easier to troubleshoot the problem by calling the published vector tiles directly with mapboxgl. There are still many articles on the Internet about how mapboxgl calls geoserver vector tiles. I wrote an example for reference. Run the example, and the resulting tiles can be correctly requested and displayed.

Code:

var map = new mapboxgl.Map({
    
    
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v10',
	zoom: 3,
	center: [108.34942054748535,37.83543237333567]
});

map.on('load', function() {
    
    
	map.addLayer({
    
    
		"id": "mapillary",
		"type": "line",
		"source": {
    
    
			"type": "vector",
			'scheme':'tms',
			"tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
		},
		"source-layer": "city_region",
		"paint": {
    
    
			"line-opacity": 0.6,
			"line-color": "rgb(53, 175, 109)",
			"line-width": 2
		}
	}, 'waterway-label');
});

effect:

This is a bit interesting, it seems that there is still a problem with the call configuration of Maputnik. Open the browser developer tool and find that the number in the tile address of the sample request is much larger than the number in maputnik.

Drag the map in maputnik. Find the same tile number as in the example, and find that the map ran to the southern hemisphere.

What could be the reason for this? Could it be that the size of the requested tiles is different, for example, one is 256x256 and the other is 512x512. Usually this situation will also cause the above problems, and the number will be exactly half the difference.

But now the number is not half the difference, so how many vector tiles are released by geoserver? What are the rules for requesting in Maputnik? With this question in mind, I decided to study the api of mapboxgl to see if I could find anything.

In the code of the above example, the data source is configured through source

"source": {
    
    
	"type": "vector",
	'scheme':'tms',
	"tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
},

There are three parameters, typeand tilesthe meaning of sum is easy to understand. schemeWhat does it mean?

Check the api of mapboxgl, the explanation of the scheme is as follows:

This xyzand tmsare what does it mean?

Baidu later felt that this blog was fairly clear. They are two protocols for requesting tiles. Different protocols have different rules for tile numbering. In the xyzprotocol, Y is calculated from the top, and in the tmsprotocol, Y is calculated from the top . Calculate from the bottom. mapboxgl uses the xyzprotocol by default , while the geoserver publishes the tmsprotocol. So it needs to be defined schemeas when calling tms.

The problem is found here, and I feel that I have seen the dawn of dawn.

So if the setting in the example is schemeset to xyz, will there be the same error as Maputnik? After trying, the answer is yes, the map also ran to the southern hemisphere.

The truth becomes clear. Because there is no configuration schemeoption on the Maputnik interface , and the schemedefault is the xyzprotocol, it only supports the xyzprotocol, not the tmsprotocol, so the tiles cannot be requested, and the map cannot be displayed correctly.

How to solve

The problem is found, the next step is how to solve it. There are two ideas:

geoserver publishes a xyzprotocol vector tile service.
Modify the source code of Maputnik and add schemeoptions to make it support the tmsprotocol.

I searched for the first idea, but I didn’t find any related tutorials. I personally feel that the second idea is simpler. You schemecan solve the problem by adding a drop-down box at the place of the red box in the figure below.

Download the source code of maputnik, do a research, and find that you can modify the following two locations:

1. Add a drop-down box control here

2. schemeSet the default value here

ok, come, take two steps

step

Two steps

Haha, the effect is leveraged! The problem is solved perfectly.

to sum up

Maputnik is a vector tile matching tool, which can replace mapbox studio and use it for free.
By default, Maputnik only supports vector tiles of the xyz protocol, and does not support the vector tiles of the tms protocol released by geoserver.
Maputnik's map api uses mapboxgl, and mapboxgl can support the tms protocol by setting the source scheme option.
By modifying the Maputnik source code and adding the scheme option, Maputnik can support the tms protocol vector tiles released by geoserver.

Source code

Maputik source code that supports tms vector tiles

Original address: http://gisarmory.xyz/blog/index.html?blog=maputnikGeoserverVectorTiles

Pay attention to the " GIS Weapon Library " public account and get more high-quality GIS articles in the first time.

This article uses the Creative Commons Attribution-Non-Commercial Use-Share 4.0 International License Agreement to license the same way . Welcome to reprint, use, and republish, but be sure to keep the article's signature "GIS Weapon Library" (including link: http://gisarmory.xyz/blog/ ), and it must not be used for commercial purposes. The modified works based on this article must be the same License issuance.