GeoJson Features

Wijmaps provides the abililty to add shapes on the maps using remote GeoJson files. This feature allows you to import data from a local file and load data from external domains.

GeoJson features may include points enabling you to add addresses and locations, line-strings that can be used to represent streets, boundaries, polygons that let you mark political borders of countries and provinces and multi-part collections of these types.

For example, the following script local GeoJson format files to display maps.

Google Chrome browser doesn't support loading of local Json files.

Live Widget
Script

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { $("#maps").wijmaps({ center: { x: 0, y: 0 }, zoom: 1, targetZoom: 1, layers: [{ type: "vector", dataType: "geoJson", data: "../Resources/countries.geo.json", placemark: { labelVisibility: "hidden" } }, { type: "vector", dataType: "geoJson", data: "../Resources/us.geo.json", placemark: { labelVisibility: "hidden" }, shapeCreated: function (e, d) { d.shape.attr("fill", "#00F").attr("fill-opacity", 0.2); } }] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
            $("#maps").wijmaps({
                center: { x: 0, y: 0 },
                zoom: 1,
                targetZoom: 1,
                layers: [{
                    type: "vector",
                    dataType: "geoJson",
                    data: "../Resources/countries.geo.json",
                    placemark: {
                        labelVisibility: "hidden"
                    }
                },
                        {
                            type: "vector",
                            dataType: "geoJson",
                            data: "../Resources/us.geo.json",
                            placemark: {
                                labelVisibility: "hidden"
                            },
                            shapeCreated: function 
                               (e, d) {
                                d.shape.attr("fill", "#00F").attr("fill-opacity", 0.2);
                            }

                        }]
            });

        });
    });
    </script>