Javascript - Leaflet markers not showing

Question

I've been trying to find solutions for this basic problem without any success.

document.addEventListener('DOMContentLoaded', function () {
  showMap()
})
var map;
function showMap() {
        map = L.map('mapid').setView([45.508991, -73.568602], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
          maxZoom: 12,
          id: 'mapbox.streets',
          accessToken: 'sk.eyJ1IjoidGlydmF4IiwiYSI6ImNqNWJ3cHdnazAzeDUyd25xMThzZXc0b3kifQ.NRP_9hz5G4k0xQAwIje5bw'
        }).addTo(map);
        var marker = L.marker([45.508991, -73.568602]).addTo(map);
        marker.bindPopup("<b>Batiment PK</b><br>Depart</br>").openPopup();
}
function onEachFeature(feature, layer) {
        var coords = feature.geometry.coordinates;
        //window.alert(coords);
        var markerLocation = new L.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
        var marker1 = L.marker(markerLocation);
        map.addLayer(marker1);


}
function printLocationOnMap(location){
    var loc = JSON.parse(location);

    L.geoJson(loc, {
        onEachFeature : onEachFeature
    }).addTo(map)
}
function search(debut, fin, rayon) {
   var url = "http://localhost:8080//activites-375e?du=" + debut + "&au=" + fin + "&rayon=" + rayon + "&lat=45.508991&lng=-73.568602";
    var client = new XMLHttpRequest();
    client.open("GET", url, false);
    client.setRequestHeader("Accept", "text/json");
    client.send(null);
    if (client.status == 200){
        printLocationOnMap(client.responseText);
    }
    else{
        alert("Oups, ça n'a pas fonctionner. \n statut : " + client.status + " " + client.statusText + "\n");
    }
    return false;
}

The parameter location in printLocationOnMap is a geoJson. (it is valide and huge but here is a sample) :

{"features":[{"geometry":{"coordinates":[45.48753749999999,-73.8837685],"type":"Point"},"type":"Feature","properties":{"name":"Parc","province": "blabla", ......}}],"type":"FeatureCollection"}

This code works without errors. In the function showMap(), the marker is working well and the popup too. But impossible to make the onEachFeature() function work properly. I saw that touching the leaflet css may work so i've tried this, but still not working...

In fact the most frustrating is that when the function printLocationOnMap() is finished i can see for a 1/4 of a second the markers but they immediatly disappear then.

Any suggestions?

Thanks

Answer 1

1. You seem to miss the callback implementation step when using XMLHttpRequest. See How to get the response of XMLHttpRequest?

2. The GeoJSON response sample you provide seems to use [latitude, longitude] order in coordinates, whereas it should be [longitude, latitude] to be compliant with GeoJSON specification. This might be the reason why you have to build a new marker in your onEachFeature function, whereas it should have been already done automatically when using L.geoJSON. Because your coordinates order is reversed, the marker is drawn somewhere in Antarctica instead of Montreal, Canada.

3. As for your marker being visible very briefly before disappearing, it is very strange indeed and might be due to how you call your search function. But bad use of XMLHttpRequest (point 1) might also play a role.