javascriptangularleafletcoordinatesleaflet.markercluster

leaflet not set the marker at real position over custom map

I search info about the markers and why doesn't appear into the position coordinates. Include here in stackoverflow aren't info about my problem. The most near that found something similar it's this: link

I build the next map (using leaflet and angular):

const imageUrl = `${environment.serverUrl}/personal_route/tile/resource/{z}/{x}/{y}/?token=${localStorage.getItem('accessToken')}`;
    const mapBounds = L.bounds([this.map_bbox[0], this.map_bbox[1]], [this.map_bbox[2], this.map_bbox[3]]);
    const center_tif = mapBounds.getCenter();
    this.map = new L.Map(this.mapElement.nativeElement, {
      center: [-0.8795599031244807, 41.624567025963344],//this is the center calculated
      zoom: 1,
      crs: L.CRS.EPSG4326 //using wgs84
    });
    //add the ground
    new L.TileLayer(imageUrl, {
      maxZoom: 5,
      tms: true, // order tiles for gdal2tile.py
      noWrap: true
    }).addTo(this.map);


addMarkersToMap();

    

//here the function to add markers 
addMarkersToMap(): void {
    //this.clearMarkers();
    //add a maker in the middle of map
    const marker_2 = L.marker([-0.8795599031244807, 41.624567025963344]);
    marker_2.addTo(this.map);
}
<div #map style="height: 400px; width: 600px;"></div>

The problem cames here: the marker blue should be at the center of the map. enter image description here

But we can see that the marker dosn't appear over the center of the map. I try to make zoom and it dosn't move, still at the position -0.8795599031244807, 41.624567025963344 (neither closer nor further).

I have all the positions at wgs84 (including the map and markers). How make to use L.CRS.EPSG4326 in a good way?

¿Any ideas to fix it?

Solution

  • I changed the method of generate the tiles (at gdal2tiles.py) to:

    "zoom": "13-19"
"projection": "mercator"

    this prevent use rastercoords when create the leaflet map.

    And now build the leaflet like this way:

    let lyr = L.tileLayer(this.imageUrl, {
  tms: true,
  opacity: 1,
  minZoom: this.minZoom, //default 13
  maxZoom: this.maxZoom //default 19
});

//console.log(this.map_center);
this.map = new L.Map(this.mapElement.nativeElement, {
  center: [this.map_center.y, this.map_center.x],
  zoom: this.minZoom,
  //crs: L.CRS.EPSG4326,
  minZoom: this.minZoom,
  maxZoom: this.maxZoom,
  layers: [osm, lyr]  //here add the lyr of tiles
});

    when we call to the url of layers already appears at the site of the coords:

    enter image description here