Back

Selectable shapes

JavaScript map chart with selectable countries as the shape layer. The shape layer is referenced from data in GeoJSON format. 'selection' enabled, which means that you can click on a country to select it. Select multiple countries with Shift+click. In a real use case, this would apply a selection to all nodes within a shape.

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