Back

Changing shapes based on zoom level

This example demonstrates how to load / replace country, area or region shapes based on some condition.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
var currentLevel = 0;    
var currentZoom = 1;
var currentGroup = "business"; //or "geographic"

    var chart = new GeoChart({
        container: document.getElementById('demo'),
        navigation: {
            initialLng: 20,
            initialLat: 48.92,
            initialZoom: currentZoom,
            minZoom: 1,
            maxZoom: 8
        },
        area: { 
            height: 500,
            style: {
                fillColor: "#14ccff"
            }
        },
        background: {
            enabled: false
        },
        data: [
            {
                id: "shapesData",
                url: geoJsonUrl(),
                perBoundsData: false,
                perZoomData: false,
                perDrilldownData: false,
                format: "GeoJSON"
            }
        ],
        layers: [
            {
                id: "shapesLayer",
                data: { id: "shapesData" },
                type: "shapes",
                style: {
                    node: {
                        fillColor: "rgba(0, 153, 204, 0.2)",
                        lineColor: "rgba(255, 255, 255, 0.6)",
                        lineWidth: 1
                    },
                    selection: {
                        fillColor: "rgba(47, 195, 47, 0.7)"
                    },
                    nodeStyleFunction: function(n) {
                        if(n.id == "EMEA") {
                            n.fillColor = "rgba(255, 135, 22, 0.7)";
                        } else if(n.id == "Eastern Europe") {
                            n.fillColor =  "rgba(193, 38, 193, 0.7)";
                        } else if(n.id == "Miscellaneous Europe") {
                            n.fillColor =  "rgba(255, 255, 0, 0.7)";
                        } else if(n.id == "LV") {
                            n.fillColor = "#9C313B";
                        }
                    }
                }
            }
        ],
        events: {
            onPositionChange: function(e,args) {
                zl = chart.zoomLevel();
                if(zl != currentZoom) {
                    changeZoomLevel(zl);
                }
            },
            onClick: function(e,args) {
                if(args.clickNode) {
                    var arr = ["EMEA", "Eastern Europe", "Miscellaneous Europe", "LV"];
                    if(arr.indexOf(args.clickNode.id) >= 0) {
                        chart.zoomLevel(currentZoom + 1);
                    }
                }
            }
        },
        interaction: {
            selection: {
                enabled: true
            }
        }
    });

function geoJsonUrl() {
    //returns path to new shapes json file. In this example it depends on "group" and "level":
    return "/dvsl/data/geo-chart/shapes/" + currentGroup + "/level" + currentLevel + ".json";
};

function changeZoomLevel(zl) {
    //set new zoom level:
    currentZoom = zl;

    var lvl = calculateLevel(zl);
    //check if currentLevel must be changed, if so, only then update shapes:
    if(currentLevel != lvl) {
        currentLevel = lvl;
        var url = geoJsonUrl();
        changeData(url, {});
    }
}

//logic on when do we want to change shapes:
//In this context "level" is not zoomLevel but index of shapes file.
function calculateLevel(zl) {
    var level = 0;
    if(currentGroup == "business") {
        if(zl >= 3 && zl <= 4) {
            level = 1;
        } else if(zl == 5) {
            level = 2;
        } else if(zl >= 6) {
            level = 3;
        }
    } else if(currentGroup == "geographic") {
        if(zl >= 2 && zl <= 4) {
            level = 1;
        } else if(zl >= 5) {
            level = 2;
        }
    }
    return level;
}

function changeData(url, data) {
    chart.updateSettings({
        data: [{ id: "shapesData", url: url }]
    });
}

Data

Data 
//No separate data for this example