CODEWITHSUNDEEP
leaflet
R.Kam
R.Kam

Reputation: 3

Why is this leaflet polyline not showing?

I am a newbie to leaflet. Trying to draw a polyline in a leaflet map. I can see the map but not the polyline, is there something obvious am doing wrong? Following is what I have tried.

var map = new L.map('map');
         // create the tile layer with correct attribution
        var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
        var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 20, attribution: osmAttrib}); 

        map.setView( new L.LatLng(36.037794380614635, -78.96096701410059),15);
        map.addLayer(osm);

        const  coords =  [
            [
                -78.936167,
                36.0203309
            ],
            [
                -78.9363688,
                36.0203325
            ],
            [
                -78.9364922,
                36.0203341
            ],
            [
                -78.9366325,
                36.0203357
            ]
        ];

        var polylineOptions = {
               color: 'black',
                weight: 6,
               opacity: 0.9
             };

         var polyline = new L.polyline(coords, polylineOptions).addTo(map);

My code is here: enter link description here

Upvotes: 0

Views: 2724

Answers (1)

brokethebuildagain
brokethebuildagain

Reputation: 2191

Your code is working fine; you just have your lat/long swapped in either your setView function or your coordinates for your polyline, depending on what you're trying to do. Swapping the coords puts the lines closer to the map's initial position:

    const  coords =  [
        [
            36.0203309,
            -78.936167
        ],
        [
            36.0203325,
            -78.9363688
        ],
        [
            36.0203341,
            -78.9364922
        ],
        [
            36.0203357,
            -78.9366325
        ]
    ];

This is probably what you were looking for. You have to move the map a bit southeast to find your line. :)

Upvotes: 2

Related Questions