Re: [Leaflet] How to retrive datas from mysql database and show those data on leaflet map?

465 views
Skip to first unread message

Louis Gamor

unread,
Sep 9, 2021, 6:35:11 PM9/9/21
to leafl...@googlegroups.com
Hi Shreya,

can you try changing the name of the Leaflet constructor you're using to create the marker

I mean this:
var marker = new L.Marker(new_location, {
                title: place
              });

You're using an uppercase M. I believe it should be lowercase m

On Thu, Sep 9, 2021 at 4:27 AM Shreya Mallik <mallik....@gmail.com> wrote:
I want to take data from Mysql database and show them on a leaflet map.  I am not getting any error in browser console but my place marker are not showing in map.  get_location.php is the file that queries the mySQL database and returns JSON code. Please help me to figure out where I am going wrong? 
Here is what I have done.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Maps</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/lea...@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/lea...@1.7.1/dist/leaflet.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/leaflet.ma...@1.3.0/dist/MarkerCluster.css" />
    
</head>
<body>
    <div id='map' style=" width: 900px; height: 700px;"></div>
     <script type="text/javascript"> 
      var map = new L.map('map').setView([22.5726, 88.3639], 4);
       attribution:
       '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
   }).addTo(map);
   var marker = new L.marker([22.5726, 88.3639]).addTo(map);
   var city = L.markerClusterGroup();
       var Points = $.getJSON("get_location.php", function(data) {                     
            for (var i = 0; i < data.length; i++) {
              var new_location =  L.LatLng(data[i].latitude, data[i].longitude);
              var place = data[i].place;
              var marker = new L.Marker(new_location, {
                title: place
              });
              var message = 'Place name: ' +place;
              marker.bindPopup(message);
              city.addLayer(marker);
              if (data[i].lat < SWlat) {SWlat = data[i].lat}
              if (data[i].lng < SWlng) {SWlng = data[i].lng}
              if (data[i].lat > NElat) {NElat = data[i].lat}
            if (data[i].lng > NElng) {NElng = data[i].lng}
            }
            //return false;
       });
         Points.done(function() {
         locSW = new L.LatLng(SWlat, SWlng);
         locNE = new L.LatLng(NElat, NElng);
        mapBounds = L.latLngBounds(locSW, locNE);
         map.fitBounds(mapBounds);
       });
       map.addLayer(city);
    </script>
</body>
</html>

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/490002d3-2550-4e46-a050-9c03abab6ee7n%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages