Thematic Maps by Client


Besides requesting for thematic maps from the server side, in online mapping projects, we often create thematic maps on the front-end Web client side directly. Canvas is used in front-end thematic mapping. It requires that the target browser supports Canvas, otherwise, maps cannot be displayed properly.

When creating thematic maps for front-end web clients, if your data is of large size, you are recommended to first publish your data as SuperMap REST data service and then follow the methods in this sample to create the thematic maps. If you data is of small size, you can use GeoJSON to store your data, and create thematic maps using data of GeoJSON format.

Step1 Initialize Base Map

In this sample, we create a thematic map for the dataset "BaseMap_R" of the datasource "Jingjin".

    var map, layer, themeLayer,
        url1 = "http://www.supermapol.com/iserver/services/map_City5/rest/maps/JingjinMap",
        url2 = "http://www.supermapol.com/iserver/services/data_City2/rest/data";
    var value="IbooSg6gIBmhIRaesVgjSED0",
        name = "ak";
    SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "ak");

    function init(){
        // Verify whether Canvas is supported
        if(!document.createElement('canvas').getContext){
            alert("Your browser doesn't support canvas, please upgrade");
            return;
        }

        map = new SuperMap.Map("map",{controls: [
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            })]
        });
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("Jingjin", url1, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
        layer.events.on({"layerInitialized":addLayer});

Step2 Initialize Ranges Thematic Maps

        // Define a Ranges thematic map layer
        themeLayer = new SuperMap.Layer.Range("ThemeLayer");
        themeLayer.setOpacity(0.8);

Step3 Define ranges and style

Define styles including colors, shades, etc. You can also use Canvas special effects, e.g. highlighting features when hovering over them with a mouse, querying by clicking, etc.

        //Set basic styles for the layer
        themeLayer.style = {
            shadowBlur: 16,
            shadowColor: "#000000",
            fillColor: "#FFFFFF"
        };

        // Highlight features when hovering over them with a mouse
        themeLayer.isHoverAble = true;
        //Hilghlighting style
        themeLayer.highlightStyle = {
            stroke: true,
            strokeWidth: 4,
            strokeColor: 'blue',
            fillColor: "#00EEEE",
            //shadowBlur: 6,
            //shadowColor: "#000000",
            //shadowOffsetX: 6,
            //shadowOffsetY: 6,
            fillOpacity: 0.8
        };

        // Specify the attribute field for creating thematic map
        themeLayer.themeField = "POP_DENSITY99";
        // The array for ranges and styles. 
        themeLayer.styleGroups=[
            {
                start: 0,
                end: 0.02,
                style:{
                    color: '#FDE2CA'
                }
            },
            {
                start: 0.02,
                end: 0.04,
                style:{
                    color: '#FACE9C'
                }
            },
            {
                start: 0.04,
                end: 0.06,
                style:{
                    color: '#F09C42'
                }
            },
            {
                start: 0.06,
                end: 0.1,
                style:{
                    color: '#D0770B'
                }
            },
            {
                start: 0.1,
                end: 0.2,
                style:{
                    color: '#945305'
                }
            }
        ]

        // Register mousemove event
        themeLayer.on("mousemove", evn);
    }

Step4 Create thematic map

Using the ranges and styles defined above, create a Ranges thematic map with the POP_DENSITY field of the BaseMap_R dataset from the Jingjin datasource. Different from creating a thematic map on the server side, for client-side thematic mapping, to create a thematic map, as in this sample, we do it like this: use SQL query to get the vector features (Feature), then define ranges for the POP_DENSITY field, and crate a themeLayer.

    //use SQL query to get the vector features. The data type must be  SuperMap.Feature.Vector
    function addThemeLayer() {
        clearLayer();
        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
        getFeatureParam = new SuperMap.REST.FilterParameter({
            name: "Jingjin",
            attributeFilter: "SMID > -1"
        });
        getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
            queryParameter: getFeatureParam,
            toIndex: 500,
            datasetNames:["Jingjin:BaseMap_R"]
        });
        getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url2, {
            eventListeners: {"processCompleted": processCompleted, "processFailed": processFailed}});

        getFeatureBySQLService.processAsync(getFeatureBySQLParams);
    }
    function processCompleted(getFeaturesEventArgs) {
        var result = getFeaturesEventArgs.result;
        if (result && result.features) {
            themeLayer.addFeatures(result.features);
        }

        //Show map legend
        document.getElementById("mapLegend").style.display = "block";
    }

Step5 Add thematic layer to base map

Use addLayer() to add the base map "JingjinMap" and the thematic map layer to the map container.

    function addLayer() {
        map.addLayers([layer, themeLayer]);
        map.setCenter(new SuperMap.LonLat(117.2, 40.11), 0);
    }

Step6 Add the info box for mouse events

In this sample, we use the "evn" method to realize that: when you click any feature, you get the id(SMID) of this feature: fid = e.target.refDataID, and then query values for fields including NAME, POP_DENSITY99 of this feature from themeLayer.

    //Handle events which control the displaying of information in the box
    function evn(e){
        if(e.target && e.target.refDataID){
            document.getElementById("infoBox").style.display = "block";
            var fid = e.target.refDataID;
            var fea = themeLayer.getFeatureById(fid);
            if(fea){
                document.getElementById("infoContent").innerHTML = "";
                document.getElementById("infoContent").innerHTML += "ID: " + fea.attributes.SMID + "<br/>";
                document.getElementById("infoContent").innerHTML += "District Name:" + fea.attributes.NAME + "<br/>";
                document.getElementById("infoContent").innerHTML += "Population Density:" + parseFloat(fea.attributes.POP_DENSITY99).toFixed(5) + "<br/>";
            }
        }
        else{
            document.getElementById("infoContent").innerHTML = "";
            document.getElementById("infoBox").style.display = "none";
        }
    }

Online Demo and Code Editing

You can access the online source code and visualize the demo. You can also edit the source code and change the demo.