Create Vector Tile Maps of Different Styles


The vector layer is splitted and stored in the form of vector tiles. Compared to the raster tiles, vector tiles have small size and they are easy to store and distribute, which is more suitable for the expression of objects that requires timeliness on the map, such as POIs, route information, etc.

The general online map services, like Google Maps, Mapbox, Baidu Map, etc., utilize vector tiles. SuperMap iServer can generate vector tiles in the way of distributed tiling, and publish services via map service (tileFeature resource). Meanwhile, SuperMap iClient for JavaScript can obtain the vector tiles, and encapsulate them as Tiled Vector Layer. In this case, iClient can quickly render the map on the client side, i.e., Vector Tiles.

The vector tiles can be rendered by the default style, and also can be rendered by the predefined map style sheet CartoCSS.

Sample: Vector Styles of Default Style

Step 1 Initialize the map

This sample will use vector tiles of map service map_China4003 which is published by SuperMap Online.

    var map, layer, lat, lon, geolocate, infowin,lonLat,geometryInfo, 
        url = "http://www.supermapol.com/iserver/services/map_China4003/rest/maps/China";

    var value="IbooSg6gIBmhIRaesVgjSED0",
        name = "key";
    SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "key");

    function init() {
        if(!document.createElement('canvas').getContext) {
            alert('Your browser doesn't support canvas, please uprade it');
            return;
        }

        map = new SuperMap.Map("map", {controls: [
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            })]
        });

        ……

    }

Step 2 Call vector tiles of map service by TiledVectorLayer

        layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true},{useLocalStorage:true});

Step 3 Add vector tiles layer to the map

Add the vector tiles layer to the map, and set the center point of the map and the scale level.

    function addLayer() {
        map.addLayers([layer]);
        var center = new SuperMap.LonLat(0,0);
        map.setCenter(center, 1);
    }
    ……

     layer.events.on({"layerInitialized": addLayer});

Online Demo and Code Editing

You can view the complete code online and experience the demonstration effect, and you can also edit the online code to check the result immediately.

Sample: Vector tiles of custom HelloKitty style

SuperMap JavaScript SDK supports customizing the render styles of vector tiles through CartoCSS. CaroCSS is a preprocessor for the map style defined by Mapbox. You can use the symbol styles of points, lines, polygons, and text in CartoCSS when you make vector tiles layer.

Step 0 Use CartoCSS to predefine the vector layer style

You can use CartoCSS to customize the render styles of vector tiles layer, including color, line width, opacity, etc.


        @waterColor:rgb(245,169,193);
        @roadColora:rgb(244,73,116);
        @roadColorb:rgb(244,73,116);
        @railwayColora:rgb(50,50,50);
        @railwayColorb:rgb(255,255,255);
        @vegetationColor:rgb(239,169,193);
        @continentColor:rgb(250,250,250);
        @provinceLineColor:rgb(226,195,19);


        #China_Railway_L___China400::a{

        /*The length of each segment is 15px, interval length is 15px*/
        line-color:@railwayColora;
        line-width:2.5;
        }
        #China_Railway_L___China400::b{

        /*The length of each segment is 15px, interval length is 15px*/
        line-dasharray:18,18;
        line-color:@railwayColorb;
        line-width:1.5;
        }
        /*The base map background layer*/

        #World_Division___China400{
        polygon-fill:@waterColor;
        }

        /*The layer for the rest countries except China*/

        #World_Continent___China400{
        polygon-fill:@continentColor;
        line-width:1;
        line-color:@continentColor;
        }
        #China_Province_R___China400{
        polygon-fill:@continentColor;
        line-color:rgba(0,0,0,0);
        }

        #China_Road_L___China400::one{
        line-color:@roadColora;
        line-width:2;}
        #China_Road_L___China400::two{
        line-color:@roadColorb;
        line-width:1;}

        #China_Road_L___China400___1::a{
        line-color:@roadColora;
        line-width:2;}
        #China_Road_L___China400___1::b{
        line-color:@roadColorb;
        line-width:1;}

        #China_Hyd_R___China400{
        polygon-fill:@waterColor;
        line-color:@waterColor;
        }

        #China_Vegetation_R___China400{
        polygon-fill:@vegetationColor;
        line-color:@vegetationColor;
        }
        #China_Hydside_R___China400{
        polygon-fill:@waterColor;
        line-color:@waterColor;
        }

        #China_Provinces_L___China400{
        line-dasharray:10,10;
        line-color:@provinceLineColor;
        line-width:1;
        }

        #World_Division___China400{
        polygon-fill:@waterColor;
        }

Step 1 Initialize the map

This sample will use vector tiles of map service map_China4003 which is published by SuperMap Online.

 var map, layer, lat, lon, geolocate, infowin, lonLat, geometryInfo, cartoCss,
 url = "http://www.supermapol.com/iserver/services/map_China4003/rest/maps/China";

 var value="IbooSg6gIBmhIRaesVgjSED0",
 name = "key";
 SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "key");

 function init() {
 if(!document.createElement('canvas').getContext) {
 alert('Your browser doesn't support canvas, please uprade it');
 return;
 }

 map = new SuperMap.Map("map", {controls: [
 new SuperMap.Control.ScaleLine(),
 new SuperMap.Control.Zoom(),
 new SuperMap.Control.Navigation({
 dragPanOptions: {
 enableKinetic: true
 }
 })]
 });

 ……

 }

Step 2 Create TiledVectorLayer and use custom style

Call vector tiles of map service through TiledVectorLayer, and use the predefined style in CartoCSS to render the map (CartoCSS parameters)

        cartoCss=document.getElementById("cartoCssStr").text;
        layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true},{useLocalStorage:true,cartoCss:cartoCss});

Step 3 Add vector tiles layer to the map

Add the vector tiles layer of the custom style to the map, and set the center point of the map and the scale level.

    function addLayer() {
        map.addLayers([layer]);
        var center = new SuperMap.LonLat(12957388,4853991);
        map.setCenter(center, 11);
    }
    ……
    layer.events.on({"layerInitialized": addLayer});

Online Demo and Code Editing

You can view the complete code online and experience the demonstration effect, and you can also edit the online code to check the result immediately.