Vector Types

The wijmaps vector layer provides the ability to connect various geographical coordinates using placemark, polyline and polygon.

For example, use the script and markup below to connect three countries, India, China and Mynamar, with a polyline and polygon. Select the Polyline or Polygon option from the dropdown at the bottom of the live widget to see the effect.

Live Widget
Script
Markup

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { $("#maps").wijmaps({ source: "bingMapsRoadSource", layers: [{ type: "vector" }] }); }); }); function switchDataSourceType(source) { switch (source) { case "Polyline": setFunctionDataSource(); break; case "Polygon": setObjectDataSource(); break; } } function setFunctionDataSource() { var layers = $.extend({}, $("#maps").wijmaps("option", "layers")); layers[0].data = funcDataSource; $("#maps").wijmaps({ "targetCenter": { x: 88.4, y: 22.2 }, "zoom": 3, "layers": layers }); } function setObjectDataSource() { var layers = $.extend({}, $("#maps").wijmaps("option", "layers")); layers[0].data = objectDataSource(); $("#maps").wijmaps({ "targetCenter": { x: 110.4, y: 31.2 }, "zoom": 3, "layers": layers }); } function funcDataSource() { return { "vectors": [ { "type": "polyline", "stroke": "green", strokeWidth: "3", "coordinates": [ 78.0000, 21.0000,96.0000, 22.0000, 103.0000, 35.0000] }, ] }; } function objectDataSource() { return { "vectors": [ { "type": "polygon", "stroke": "#00CCFF", strokeWidth: "3", "coordinates": [78.0000, 21.0000,96.0000, 22.0000, 103.0000, 35.0000, 78.0000, 21.0000] }, ] }; } </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
                $("#maps").wijmaps({
                    source: "bingMapsRoadSource",
                    layers: [{
                        type: "vector"                       
                    }]
                });
            });
        });
        function switchDataSourceType(source) {
            switch (source) {
               
                case "Polyline":
                    setFunctionDataSource();
                    break;
                case "Polygon":
                    setObjectDataSource();
                    break;
            }
        }
        function setFunctionDataSource() {
            var layers = $.extend({}, $("#maps").wijmaps("option", "layers"));
            layers[0].data = funcDataSource;
            $("#maps").wijmaps({
                "targetCenter": { x: 88.4, y: 22.2 },
                "zoom": 3,
                "layers": layers
            });
        }
        function setObjectDataSource() {
            var layers = $.extend({}, $("#maps").wijmaps("option", "layers"));
            layers[0].data = objectDataSource();
            $("#maps").wijmaps({
                "targetCenter": { x: 110.4, y: 31.2 },
                "zoom": 3,
                "layers": layers
            });
        }
        function funcDataSource() {
            return {
                "vectors": [
                    {
                        "type": "polyline", "stroke": "green", strokeWidth: "3",
                        "coordinates": [ 78.0000, 21.0000,96.0000, 22.0000, 103.0000, 35.0000]
                    },
        ]
            };
        }
        function objectDataSource() {
            return {
            
             "vectors": [
                    {
                        "type": "polygon", "stroke": "#00CCFF", strokeWidth: "3",
                        "coordinates": [78.0000, 21.0000,96.0000, 22.0000, 103.0000, 35.0000, 78.0000, 21.0000]
                    },             
                ]
            };
        }
    </script>

Markup	Copy Code
<div id="maps" style="width:600px; height: 400px;"></div> <select onchange="switchDataSourceType(this.value)"> <option>Polyline</option> <option>Polygon</option> </select>