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.
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?
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: