Back

Selectable shapes

Specify shapes and select one or more countries by shift.

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 

    new GeoChart({
        container: document.getElementById('demo'),
        navigation: {
            initialLng: 20,
            initialLat: 48.92,
            initialZoom: 4,
            minZoom: 2
        },
        data: {
            url:"/dvsl/data/geo-chart/countries.geo.json",
            format: "GeoJSON",
            perBoundsData: false
        },
        layers: [
            {
                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)"
                    }
                }
            }
        ],
        interaction: {
            selection: {
                enabled: true
            }
        },
        advanced: {
            pointer: {
                noClickOnDoubleClick: false
            }
        }
    });

Data

Data 
//Data too large to output
Download Data