CODEWITHSUNDEEP
javascriptleaflet
nas
nas

Reputation: 2417

Map not display when draw the polygon over the map

I am working on showing the nearest marker from the given point. In my example I have starting point as userlocation and from this point I need to find the nearest marker available in the array list. I found a tutorial and start working on it. But when I try to add a map to it, the map is not being displayed and when I try to zoom in or zoom out the markers are also disappearing.

This is the code so far that I have tried today. Can anybody help me what is wrong with this code.

    var userLocation = new L.LatLng(13.7563, 100.5018);
    var map = L.map('map').setView(userLocation, 6);

    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
        attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
        maxZoom: 17,
        minZoom: 9
    }).addTo(map);

    var greenIcon = L.icon({
        iconUrl: 'icon/icon.png',
        iconSize: [64, 64]
    });

    //random locations around the world
    var items = [{
        //china
        lat: "7.9519",
        lon: "98.3381"
    }, {
        //colombia
        lat: "19.9105",
        lon: "99.8406"
    }, {
        //libya
        lat: "14.9930",
        lon: "103.1029"
    }];

    drawData();

    //draw all the data on the map
    function drawData() {
        var item, o;
        //draw markers for all items
        for (item in items) {
            o = items[item];
            var loc = new L.LatLng(o.lat, o.lon);
            createPolyLine(loc, userLocation);
        }
    }

    //draw polyline
    function createPolyLine(loc1, loc2) {

        var latlongs = [loc1, loc2];
        var polyline = new L.Polyline(latlongs, {
            color: 'green',
            opacity: 1,
            weight: 1,
            clickable: false
        }).addTo(map);

        //distance
        var s = 'About ' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + 'km away from you.</p>';

        var marker = L.marker(loc1).addTo(map);
        if (marker) {
            marker.bindPopup(s);
        }
    }

Upvotes: 0

Views: 125

Answers (1)

Stedy
Stedy

Reputation: 7469

These tiles are limited to the Commonwealth of Massachusetts so your points at random locations are not showing up. Changing the points to within the Commonwealth fixes this:

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 1366px; height: 720px;"></div>
<script>


var userLocation = new L.LatLng(42.237, -71.96);
    var map = L.map('map').setView(userLocation, 6);

    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
        attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
        maxZoom: 17,
        minZoom: 9
    }).addTo(map);

    var greenIcon = L.icon({
        iconUrl: 'icon/icon.png',
        iconSize: [64, 64]
    });

    //random locations around the Commonwealth
    var items = [{
        //Georgetown
        lat: "42.703",
        lon: "-70.98"
    }, {
        //Mattapoisett
        lat: "41.6577",
        lon: "-70.807"
    }, {
        //Otis
        lat: "42.1915",
        lon: "-73.08"
    }];

    drawData();

    //draw all the data on the map
    function drawData() {
        var item, o;
        //draw markers for all items
        for (item in items) {
            o = items[item];
            var loc = new L.LatLng(o.lat, o.lon);
            createPolyLine(loc, userLocation);
        }
    }

    //draw polyline
    function createPolyLine(loc1, loc2) {

        var latlongs = [loc1, loc2];
        var polyline = new L.Polyline(latlongs, {
            color: 'green',
            opacity: 1,
            weight: 1,
            clickable: false
        }).addTo(map);

        //distance
        var s = 'About ' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + 'km away from you.</p>';

        var marker = L.marker(loc1).addTo(map);
        if (marker) {
            marker.bindPopup(s);
        }
    }
</script>
</html>

Produces the desired output:

enter image description here

Upvotes: 1

Related Questions