OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

leaflet not set the marker at real position over custom map

  • Thread starter Thread starter Robert Blasco Villarroya
  • Start date Start date
R

Robert Blasco Villarroya

Guest
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):


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

<p>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: <a href="https://stackoverflow.com/questions/72562108/leaflet-map-in-angular-markers-in-wrong-position">link</a></p>
<p>I build the next map (using leaflet and angular):</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div #map style="height: 400px; width: 600px;"></div></code></pre>
</div>
</div>
</p>
<p>The problem cames here: the marker blue should be at the center of the map.
<a href="https://i.sstatic.net/ynlaDS0w.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ynlaDS0w.png" alt="enter image description here" /></a></p>
<p>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 <code>-0.8795599031244807, 41.624567025963344</code> (neither closer nor further).</p>
<p>I have all the positions at wgs84 (including the map and markers). How make to use L.CRS.EPSG4326 in a good way?</p>
<p>¿Any ideas to fix it?</p>
 

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top