CODEWITHSUNDEEP
phpjqueryjsonleafletmarker
jizaho123
jizaho123

Reputation: 33

JQuery: how to add a Leaflet marker with Coordinates from json

I have a problem creating a marker on my leaflet map with coordinates from a json array.

json example:

{"id":"1","longitude":"8.1876","latitude":"50.1297","name":"Rhineland-Palatinate"}

(background info: this comes from a PHP file that fetches data from a database which updates the current position every 10 seconds)

The jquery code: It creates the map on my html and upon the "get_marker" click event it starts ajax which pulls a new json every 10 seconds from my .php file

$(document).ready(function () { 
            var map = L.map('map', {
                center: [50.0231, 8.8849],
                zoom: 9
            });
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

$("#get_marker").click(function(event){
   startajax();
  alert("get marker clicked");
 }); 

$("#delete_marker").click(function(event){
   deletemarkers();
      alert("marker deleted");
 });

function startajax () { 
  $.ajax({
  url: ('query_fetcharray.php'),
  data: {},
  type: 'POST',
  timeout: 10000,
  dataType: 'json',
  error: function() { 
    alert('Error, no Data received!');
  },
  success: drawmarker
  }) 
 };

everything above seems to be working fine The Problem is getting the actual marker on the map with the json coordinates. Nothing shows up on my map.

I tried accessing the long and lat values with json.longitude/json.latitude and then converting these into float => then saved in JS variables: var longitude. I then put the varibles into the L.marker.

my code:

function drawmarker (json) {    
        var longitude = parseFloat(json.longitude);
        var latitude = parseFloat(json.latitude);

        L.marker([longitude, latitude], {
               clickable: true
          })
               .bindPopup('hello')
                .addTo(map);    
};

The Problem seems to be the actual variables since hardcoding a set of coordinates into L.marker works fine.

Upvotes: 1

Views: 2115

Answers (1)

peeebeee
peeebeee

Reputation: 2618

I think you're over-thinking the floating point issue. Try this simpler way: 

function drawmarker (json) {    
        var longitude = json.longitude;
        var latitude =  json.latitude;

        L.marker([latitude, longitude])
               .bindPopup('hello')
                .addTo(map);    
};

Upvotes: 0

Related Questions