Mapbox. Vector tiles
In this video we will look at building of interactive web-map in Mapbox and addition there a layer, or more precisely, shapefile that was uploaded to geoserver as vector tile. Our final application will look so. As we see, the map is constructed in Mapbox, and here’re Moscow administrative districts. You may click on the district and see pop-up with attributive information. What should we learn and which links do we need for that? Firstly, we should learn API Mapbox: how to create such simple map, at least some constructors. Besides, we’ll use geoserver, that is expanded here in the server, and we’ll have to install an extension for vector tiles to work with types of Mapbox vector tiles, such as pbf. Hence, all links including link to the application will be available under the video, you can see all the code there. So, for starters, we should construct the map in Mapbox. It’s very easy. The structure of our document is incredibly simple. In the tag ‘head’ links to Mapbox js-file and css-file are added, the most typical style for displaying of map, i.e. width 100%, height 100% for element with id=”map”. Body of html-page consists only of one ‘div’ with id=”map”. Then let’s look at the script. First of all, for work with Mapbox we need to obtain Mapbox token. Thus, it’s possible to receive token for limited functionality, here it will be enough What we need to do is the construction of map. We open Help Window for Mapbox API, the first page Map and see which constructor Map has, which features this constructor takes into the entry and which methods uses. We may look at example, how it works. In fact, we have to do next things: to specify the element where our map will be put to, then to specify style of basemap, then to indicate the center of map (obviously, its attitude and longitude) and starting zoom. If necessary, you may look into any other options and try to turn them on. Thus, if we comment out all about the layer and save that, in our application only one map will left. It will look so. This is only basemap without layer. Then let’s comment out and see how we will add the layer of our vector tiles on the map. In fact, our layer is located within shapefile, it was published on geoserver, that is how we see it, its name is: “grnicy_ao_w1251”. We can view it in geoserver with OpenLayers. There’s column “county_nam”, where names of Moscow districts are shown. As you can see, when we click on different districts. How is it published? To find out that, we should enter layers, click on chosen layer and then apart from standerd settings of publication we can enter cashing of tiles and recognise option application/vnd.mapbox-vector-tile. That means we’ve published it as Mapbox vector tile. Why did this caption appear during publication? Before the release of layer we set up extension for vector tiles. By this link you may check how it works, i.e. you should enter this page, choose the version of your geoserver, e.g. 2.15.0, and find vector tiles in extensions and then unpack it to particular folder according to the instruction. Then option to release layers as Mapbox vector tiles will show up. Right after click on checkbox near this line and click on “Save” it will be possible to add layer as Mapbox vector tile as map. How can it be done? Here’s certain constructor. We’ll add the layer only once the load of map gonna work. Here’s our variable “map” which is responsible for the objet of class “map” in Mapbox GL, and right after the event “load” of our map occur, we’ll begin add layer on the map (method “add layer”), and within the constructor of this method, you should specify id of this layer (further we’ll return to that), and, most significantly, the source layer. The name of source layer must be the same as the name of the layer in geoserver, i.e. this name. Here style and main feature are specified: it’s source, i.e. vector type, tms scheme and link to pbf-tiles, as we can see. Here the name of our layer as well as the store of our geoserver, i.e. link to the geoserver. Projection of published layer, if we pay attention, is 900913. Here it is entered. Then we should set up min and max zoom of the display of our layer. Then refresh our map, and our layer is displayed. How we then describe the click on map, or rather, on layer? We set it up by the event of click on map and specifying id of layer. that was clicked. So click is processing by the event of click on map, not on layer. That means: map.on(‘click’ – and then id of layer, click on which we want to process, as a parameter. Then we specify only callback as function that takes to the input event as point where customer clicked, and using construction “mapboxgl.Popup” the most basic infobox is set up. This infobox is displayed in appropriate coordinates by the method “setLngLat”. Through “setHTML” we display value from column “county_nam”. Then we add this popup window, this infobox, on map. After that here, in these six lines, we add certain interactive, in order that while hovering over any object of this layer coursor will be replaced by image of probable click, hence customer will understand that object is clickable. This is done by processing of the map event, i.e. “mouseenter”, when cursor is hovering somewhere to the layer with certain id. As we remember, this is id of our layer, and as callback the method map.getCanvas and then style.cursor will be used, and we specify one of key values of cursor, i.e. “pointer”. Likewise we process event “mapon(‘mouseleave’)”, i.e. entering of cursor from the object of our layer with id ‘grnicy_ao_w1251_id’. Сursor therefore turns into basic one. Cursor style is displayed as standard arrow. So if we comment out these lines, cursor will change the image. If we save them and refresh the map, cursor will not change its image, despite that click will still be available, because we did’t comment it. The last thing added here is Navigationcontrol. Here it is. If we comment it out and refresh the map, zoom in and out by click on +/- in upper right-hand corner will disappear. We add that and also scale control that will emerge in the lowe left-hand corner. Here we may see its appearance. Navigation control was added, so upon map rotation we can always get back towards North by click on this button. We may also see the scale control. Nothing complicated, addition of there controls is described in Help. In the menu item “User Interface” we might see various types of control: navigation, geolocate, attribution, scale control that is just added. We can try to insert fullscreen control. Turn our map on again, and fullscreen control makes display of map in full screen mode possible. So Mapbox as API is rather suitable, everything is quite plain and simple, it’s all clear intuitively. To summarise: if you want to display any shapefile as Mapbox vector tile, you should: 1) construct simple map in Mapbox, you need token for that; 2) have geoserver, on which you will publish your shapefile, it can be local or non-local, but accesible; 3) install the extension of vector tiles in this geoserver in order to be able to publish layer as Mapbox vector tiles. Then using primitive layers addition builder you should correctly specify source layer (name of our layer in geoserver) and link to tiles, to our geoserver, i.e. to published layer. While working with vector tiles, we operate object not with unclickable object, we can set up on tiles handlers of clicks on different objects, оr the opening of pop-up windows with atributive information about object of this layer. To prevent map crashing and provide fast work during scroll, of course, we must display objects as vector tiles. That’s all for present. We became a bit familiar with Mapbox API, but the crucial thing is that we learned to display vector tiles. So any shapefile uploaded to geoserver can be displayed as vector tile by Mapbox and can be added to the map there. Of course, we may upload vector tiles not only to Mapbox, but also to Leaflets by plagins or to OpenLayers Tutorial video about that we’ll release a bit later. So if you have any questions, you can ask in the comments or via e-mail that is listed in our channel. Requests for next series are also appreciated!