marker update with wrong position on map

[williams9438]

when i use this library for displaying marker on the map it get displayed on the point on the map but when i use the native function it is displayed correctly. please help me look into it

code that display on the wrong point on the map

-data return from 'http://localhost:8000/company_user/location/1'
{"geometry": {"type": "Point", "coordinates": [6.4816961423227815,3.372369035580695]}, "type": "Feature", "properties": {}}

var map = L.map('map', {
    'center': [0, 0],
    'zoom': 0,
    'layers': [
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    })
  ]
});

var geojsonMarkerOptions = {
    radius: 18,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

var realtime = L.realtime({
    url: 'http://localhost:8000/company_user/location/1',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map);

realtime.on('update', function(e) {
    var coordPart = function(v, dirs) {
            return dirs.charAt(v >= 0 ? 0 : 1) +
                (Math.round(Math.abs(v) * 100) / 100).toString();
        },
        popupContent = function(fId) {
            var feature = e.features[fId],
                c = feature.geometry.coordinates;
            return 'Wander drone at ' +
                coordPart(c[1], 'NS') + ', ' + coordPart(c[0], 'EW');
        },
        bindFeaturePopup = function(fId) {
            realtime.getLayer(fId).bindPopup(popupContent(fId));
        },
        updateFeaturePopup = function(fId) {
            realtime.getLayer(fId).getPopup().setContent(popupContent(fId));
        };

    map.fitBounds(realtime.getBounds(), {maxZoom: 5});

    Object.keys(e.enter).forEach(bindFeaturePopup);
    Object.keys(e.update).forEach(updateFeaturePopup);
});
</script>```  

#Native code that display correctly on the map
```<script type="text/javascript"> 
var map = L.map('map').setView([6.4816961423227815, 3.372369035580695], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([6.4816961423227815, 3.372369035580695]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();
</script>```  

[williams9438]

I have solved the problem. For anyone having similar issue the problem is withe the latlng object variable return the wrong coordinate (the the latlng return lnglat instead of latlng) which result in the placement of marker on the wrong part of the map.

pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions)
    }

So to solve this just use the feature object to get the coordinate instead of the latlng

[perliedman]

Yeah, Leaflet and GeoJSON's swapped axis order (lat/lng in leaflet vs lng/lat in GeoJSON) is a very common source of confusion. You just have to keep remembering which format/API you're working with (and try flipping the axis order when strange things happen 😉).

Any particular reason to keep this open? Closing for now, and will consider reopening if you think it's still an issue.

[williams9438]

I just wanted you to see this in case I didn't know about the issue.