Back

Custom shapes

Example showing how to create polygon type custom shapes.

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 settings = {
        container:document.getElementById("demo"),
        area: { height: null },
        data: [
            {
            id: "shapeData",
            preloaded: 
            {
                "type":"FeatureCollection",
                "features":[
                    {
                        "type":"Feature",
                        "id":"shape-1",
                        "properties": {"name":"Custom Shape 1"}, 
                        "geometry": {
                            "type":"Polygon",
                            "coordinates": [
                                [
                                    [50.20,20.65],
                                    [30.65,-22.15],
                                    [-80.83,52.10],
                                    [-40.32,70.27]
                                ]
                            ]
                        }
                    },
                    {
                        "type":"Feature",
                        "id":"shape-2",
                        "properties": {"name":"Shape 2"}, 
                        "geometry": {
                            "type":"Polygon",
                            "coordinates": [
                                [
                                    [130.65,52.15],
                                    [80.83,82.10],
                                    [40.32,50.27]
                                ]
                            ]
                        }
                    },
                    {
                        "type":"Feature",
                        "id":"shape-3",
                        "properties": {"name":"Shape 3"}, 
                        "geometry": {
                            "type":"Polygon",
                            "coordinates": [
                                [

                                    [-76.337312, 8.979521],
                                    [-43.817783, 4.792161],
                                    [-24.130284, -16.418143],
                                    [-28.349034, -37.677711],
                                    [-60.165438, -47.719352],
                                    [-89.696687, -41.994589],
                                    [-102.001373, -26.542318],
                                    [-93.212311,-2.935333]
                                ]
                            ]
                        }
                    }


                ]
            },
            format: "GeoJSON",
            perBoundsData: false
        }
        ],
        layers: [{
            type: "shapes",
            data: { id: "shapeData" },
            id: "shapesLayer",
            style: {
                selection: {
                    fillColor: "rgba(30,10,220,0.6)",
                    shadowBlur: null,
                    shadowColor: null
                },
                node: {
                    fillColor: "rgba(255,70,70,0.5)",
                    lineWidth: 1,
                    lineColor: "white"
                },
                nodeStyleFunction: function(n) {
                    //Conditional styling:
                    if(n.data.id == "shape-1") {
                        n.fillColor = "rgba(15,130,50,0.5)";
                    } else if (n.data.id == "shape-3") {
                        n.fillColor = "rgba(30,0,205,0.5)";
                    }
                    
                    //create labels as items:
                    if(!n.items.length) {
                        var item = {
                            text: n.data.shapeFeature.properties.name,
                            textStyle: {
                                fillColor: "white",
                                font: "3px Arial"
                            },
                            borderRadius: 3,
                            padding: 1,
                            backgroundStyle: {
                                fillColor: "orange",
                                //lineColor: "#dd6e00",
                                //lineWidth: 1
                            },
                            scaleWithSize:true,
                            scaleWithZoom:true
                        };

                        n.items = [item];
                    }
                }
            }
        }],
        interaction: {
            selection: {
                enabled: true
            }
        },
        navigation: {
            initialZoom: 1
        }

    };
 
    var chart = new GeoChart(settings);

Data

Data 
//No separate data for this example