CODEWITHSUNDEEP
javascriptleafletpopup
Yustinus Windy
Yustinus Windy

Reputation: 13

Leafletjs Popup Layer not correct position on page load

please help me. My popups Leaflet JS don't seem right than the marker position on page load. Here is my code 

var arrIcon = new LeafIcon({iconUrl: './dist/images/ruasjalan/icon_jalan.png'});

var data = [{"id":6,"nama":"Kyai Maja","lat":"-8.066713041117994","lng":"111.89851999282838"},{"id":5,"nama":"Jl. Panglima Sudirman","lat":"-8.058592256820186","lng":"111.90756797703217"}];

var markers = {};

for (var i = 0; i < data.length; i++) {
    var ruas = data[i];
    var popupLocation = new L.LatLng(ruas.lat, ruas.lng);
    var popupContent = '<div align="center"><b>' + ruas.nama + '</b></div>', popruas = new L.Popup({autoClose:false,autoPan:false,keepInView:true,closeButton:false,closeOnEscapeKey:false,maxWidth : 560});
    popruas.setLatLng(popupLocation);
    popruas.setContent(popupContent);
    mapall.addLayer(popruas);
    markers[ruas.id] = L.marker([ruas.lat, ruas.lng], {icon: arrIcon}).bindPopup('<div align="center"><b>' + ruas.nama + '</b></div>').addTo(mapall);
    markers[ruas.id]._icon.id = ruas.id;
    markers[ruas.id].off('click');
    markers[ruas.id].on('click', function() {return;});
}

Here is the screenshot

Upvotes: 1

Views: 1249

Answers (1)

kboul
kboul

Reputation: 14600

Just use the following code in order to make your icon display properly. Regardless of the size you need to define iconAnchor and popupAnchor values. For instance lets assume your icon has 128x128px dimensions. This is too big. So you define smaller dimensions using iconSize and then define the suitable iconAnchor to place the tooltip properly.

var arrIcon = new L.Icon({
    // place here your icon url - I placed a similar just to illustrate how it should be
    iconUrl: 'https://icon-icons.com/icons2/936/PNG/128/road-perspective_icon-icons.com_73428.png',
    iconSize: [25, 41],
    iconAnchor: [10, 0],
    popupAnchor: [2, -40]
});


<!DOCTYPE html>
<html>

<head>

  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>



</head>

<body>



  <div id="mapid" style="width: 600px; height: 400px;"></div>
  <script>
    var mapall = L.map('mapid').setView([-8.066713041117994, 111.89851999282838], 14);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox.streets'
    }).addTo(mapall);

    var arrIcon = new L.Icon({
      iconUrl: 'https://icon-icons.com/icons2/936/PNG/128/road-perspective_icon-icons.com_73428.png',
      iconSize: [25, 41],
      iconAnchor: [10, 0],
      popupAnchor: [2, -40]
    });
    var data = [{
      "id": 6,
      "nama": "Kyai Maja",
      "lat": "-8.066713041117994",
      "lng": "111.89851999282838"
    }, {
      "id": 5,
      "nama": "Jl. Panglima Sudirman",
      "lat": "-8.058592256820186",
      "lng": "111.90756797703217"
    }];

    var markers = {};

    for (var i = 0; i < data.length; i++) {
      var ruas = data[i];
      var popupLocation = new L.LatLng(ruas.lat, ruas.lng);
      var popupContent = '<div align="center"><b>' + ruas.nama + '</b></div>',
        popruas = new L.Popup({
          autoClose: false,
          autoPan: false,
          keepInView: true,
          closeButton: false,
          closeOnEscapeKey: false,
          maxWidth: 560
        });
      popruas.setLatLng(popupLocation);
      popruas.setContent(popupContent);
      mapall.addLayer(popruas);
      markers[ruas.id] = L.marker([ruas.lat, ruas.lng], {
        icon: arrIcon
      }).bindPopup('<div align="center"><b>' + ruas.nama + '</b></div>').addTo(mapall);
      markers[ruas.id]._icon.id = ruas.id;
      markers[ruas.id].off('click');
      markers[ruas.id].on('click', function() {
        return;
      });
    }
  </script>



</body>

</html>

Upvotes: 1

Related Questions