Add Meridians

The wijmaps widget allows you to add parallels and meridians to the map. Meridians represent degrees of longitude, and also shows the distance of a place from the prime meridian, and Parallels represent degrees of latitude, and distance from the equator. Using such maps enable you to find out exact location of a particular place.

You can use the vector layer on top of a Tile Source to draw geometries, shapes, polygons, paths with geo coordinates.

Live Widget
Script

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { var vectors = getVectorsData(); var layers = [ { "type": "vector", "data": { "vectors": vectors }, "placemark": { labelVisibility: "visible" } } ]; $("#maps").wijmaps({ "source": "bingMapsAerialSource", "zoom": 1 }).wijmaps({ "layers": layers }); }); }); function getVectorsData() { var vectors = [], lbl; for (var lon = -180; lon <= 180; lon += 30) { vectors.push({ "type": "polyline", "coordinates": [lon, 85, lon, -85], "stroke": "#d3d3d3", "strokeOpacity": 0.6, "strokeWidth": "1", "strokeDashArray": "- " }); lbl = Math.abs(lon).toString() + "°"; if (lon > 0) lbl += "E"; else if (lon < 0) lbl += "W"; vectors.push({ "type": "placemark", "coordinates": [lon, 0], "name": lbl }); } for (var lat = -80; lat <= 80; lat += 20) { vectors.push({ "type": "polyline", "coordinates": [-180, lat, 180, lat], "stroke": "#d3d3d3", "strokeOpacity": 0.6, "strokeWidth": "1", "strokeDashArray": "- " }); lbl = Math.abs(lat).toString() + "°"; if (lat > 0) lbl += "N"; else if (lat < 0) lbl += "S"; vectors.push({ "type": "placemark", "coordinates": [0, lat], "name": lbl }); } return vectors; } </script> <style type="text/css"> span.wijmo-wijmaps-vectorlayer-marklabel { font-size: 9px; color: #CCCCCC; white-space: nowrap; } </style>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
            var vectors = getVectorsData();
            var layers = [
                {
                    "type": "vector",
                    "data": {
                        "vectors": vectors
                    },
                    "placemark": {
                        labelVisibility: "visible"
                    }
                }
            ];
            $("#maps").wijmaps({
                "source": "bingMapsAerialSource",
                "zoom": 1
            }).wijmaps({
                "layers": layers
            });
        });
    });

    function getVectorsData() {
        var vectors = [], lbl;
        for (var lon = -180; lon <= 180; lon += 30) {
            vectors.push({
                "type": "polyline",
                "coordinates": [lon, 85, lon, -85],
                "stroke": "#d3d3d3",
                "strokeOpacity": 0.6,
                "strokeWidth": "1",
                "strokeDashArray": "- "
            });

            lbl = Math.abs(lon).toString() + "°";
            if (lon > 0)
                lbl += "E";
            else if (lon < 0)
                lbl += "W";

            vectors.push({
                "type": "placemark",
                "coordinates": [lon, 0],
                "name": lbl
            });
        }

        for (var lat = -80; lat <= 80; lat += 20) {
            vectors.push({
                "type": "polyline",
                "coordinates": [-180, lat, 180, lat],
                "stroke": "#d3d3d3",
                "strokeOpacity": 0.6,
                "strokeWidth": "1",
                "strokeDashArray": "- "
            });

            lbl = Math.abs(lat).toString() + "°";
            if (lat > 0)
                lbl += "N";
            else if (lat < 0)
                lbl += "S";

            vectors.push({
                "type": "placemark",
                "coordinates": [0, lat],
                "name": lbl
            });
        }
        return vectors;
    }

    </script>
    <style type="text/css">
        span.wijmo-wijmaps-vectorlayer-marklabel
        {
            font-size: 9px;
            color: #CCCCCC;
            white-space: nowrap;
        }
    </style>

Reference

wijmaps API