Leaflet not show EPSG:3857 coordinates

user_19516418 0
Viewed 80

I am totally stuck with my WGS 84 / EPSG:3857 coordinates and display them on Leaflet.

I have Geojson with coordinates.

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      "6690861",
      "682187"
    ]
  },
  "properties": {
    "id": "908",
    "message": "105",
    "date": "",
    "place": "",
    "shape": ""
  }
}

Now i want it display on Leaflet. But nothing show up. I search already 5 hours and find something about Proj4. Also no errors showing up.

My script code:

    var map = L.map('map').setView([52.2129919, 5.2793703], 8);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a>'}).addTo(map);
// GeoJSON layer (UTM15)
proj4.defs('EPSG:3857');

async function addGeoJson() {
    const response = await fetch("geojs.php");
    const data = await response.json();
    L.geoJson(data).addTo(map); 
    
var layerGroup = L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup('<h1>'+feature.properties.message+'</h1><p>Datum: '+feature.properties.date+'</p>');    
  }

}).addTo(map);
    
}
addGeoJson();

It's for my the first time i work with this coordinates. With lat/long coordinates was don't have problems. And just started with javascript.

Kind regards,

leaflet php json javascript
2 Answers

I might be a bit late, but following the documentation of Proj4, I would say that you need to add the crs to your geojson, like so :

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      "6690861",
      "682187"
    ]
  },
  "properties": {
    "id": "908",
    "message": "105",
    "date": "",
    "place": "",
    "shape": ""
  },
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:EPSG::3857"
    }
  }
}

Also, I think it's L.Proj.geoJson(data).addTo(map); instead of L.geoJson(data).addTo(map);

I tried L.geoJson on my code and it didn't show anything contrary to L.Proj.geoJson so it might be your problem here.

user_117589030

Bro, You have stored the coordinates as a string, you have to store it as an integer. Put the plus(+) symbol their so it will automatically convert to the integer. I have faced this type of problem once while showing data with the open layers. Let's try!

user_168431190
Related