3

I want to list GeoJSON on map as well on the div element outside the map but I'm somehow stuck.

Using this block of code I did manage to create some sort of interaction between map and div element outside of map.

// Create or retrieve the data
var DOF = L.tileLayer.wms(" http://geoportal.dgu.hr/wms?", {
    layers: 'DOF'
});




var people = $.getJSON("php/rasvjeta_150n.php", function (data) {
});
// var people = JSON.parse(geojson);

// let people = [
//     {
//       name: 'FIRST POINT',
//       latLng: [46.210888, 15.647540],
//       id: '2342fc7'
//     },
//     {
//       name: 'SECOND POINT',
//       latLng: [46.211888, 15.647540],
//       id: 'djf3892'
//     },
//     {
//       name: 'THIRD POINT',
//       latLng: [46.2120888, 15.647540],
//       id: '2837hf3'
//     }
// ];

// Create the group
let group = L.layerGroup(),
    list = document.getElementById('list')

// Create the map
var map = L.map('map',{
        center:[46.15796, 15.75336],
        zoom:13,
        layers: DOF
        });


// Loop through the data
Object.keys(people).forEach(person => {
  let marker = L.marker(person.latLng, {
    icon: L.icon({
        iconUrl: "img/power_green.png",
        iconSize: [20, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
        title: person.name,
        riseOnHover: true
      });

  // Add each marker to the group
  group.addLayer( marker );

  // Save the ID of the marker with it's data
  person.marker_id = group.getLayerId(marker);
})

// Add the group to the map
group.addTo(map);

// Click handler for handling
function onClick(data) {
  let { marker_id } = data,
      marker = group.getLayer(marker_id);

  map.panTo( marker.getLatLng() );
}

// Append list items
people.forEach(person => {
  let item = document.createElement('ul');

  item.innerHTML = `<a href="#" class="list-group-item">${person.name}<br><b>CODE: </b>${person.x}</a>`;
  item.addEventListener('click', onClick.bind(null, person));

  list.appendChild(item);
});

But when I try to use PHP generated GeoJSON using this

 var people = $.getJSON("php/rasvjeta_150n.php", function (data) {
    });

PHP code is working fine. I get this type of error Uncaught TypeError: Cannot read property 'lat' of undefined

I've copied working example from this site

Here is generated GeoJSON from PHP

{  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               15.73141861,
               46.15459061
            ]
         },
         "properties":{  
            "ts_sifra":"TPR012",
            "ts_naziv":"Krapina 5",
            "sifra_lampe":"A3-12",
            "vrsta_stupa":"\u017deljezni kandelaber",
            "tip_lampe":"Refletkor LED 100W",
            "naziv_naselja":"Grletinec",
            "adresa":"Kajba 1"
         }
      },
      {  
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               15.72079945,
               46.13504791
            ]
         },
         "properties":{  
            "ts_sifra":"TPR070",
            "ts_naziv":"Pri\u0161lin 2",
            "sifra_lampe":"D10",
            "vrsta_stupa":"Drveni",
            "tip_lampe":"70W Natrij",
            "naziv_naselja":"Pri\u0161lin",
            "adresa":"Stipernica 1"
         }
      },
      {  
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               15.86748695,
               46.1628685
            ]
         },
         "properties":{  
            "ts_sifra":"TPR070",
            "ts_naziv":"Pri\u0161lin 2",
            "sifra_lampe":"H10",
            "vrsta_stupa":"\u017deljezni kandelaber",
            "tip_lampe":"Refletkor LED 100W",
            "naziv_naselja":"Hum na Sutli",
            "adresa":"Krapina 23"
         }
      },
      {  
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               15.64838982,
               46.20975876
            ]
         },
         "properties":{  
            "ts_sifra":"TPR070",
            "ts_naziv":"Pri\u0161lin 2",
            "sifra_lampe":"D6",
            "vrsta_stupa":"Betonski",
            "tip_lampe":"70W Natrij",
            "naziv_naselja":"Pri\u0161lin",
            "adresa":"Pri\u0161lin 90"
         }
      },
      {  
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               15.64866161,
               46.20946503
            ]
         },
         "properties":{  
            "ts_sifra":"TPR070",
            "ts_naziv":"Pri\u0161lin 2",
            "sifra_lampe":"D5",
            "vrsta_stupa":"Betonski",
            "tip_lampe":"150W Natrij",
            "naziv_naselja":"Pri\u0161lin",
            "adresa":"Pri\u0161lin 67"
         }
      },
      {  
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               15.64934731,
               46.2098732
            ]
         },
         "properties":{  
            "ts_sifra":"TPR070",
            "ts_naziv":"Pri\u0161lin 2",
            "sifra_lampe":"D4",
            "vrsta_stupa":"Betonski",
            "tip_lampe":"150W Natrij",
            "naziv_naselja":"Pri\u0161lin",
            "adresa":"Pri\u0161lin 65"
         }
      },
      {  
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               15.64995384,
               46.20995712
            ]
         },
         "properties":{  
            "ts_sifra":"TPR070",
            "ts_naziv":"Pri\u0161lin 2",
            "sifra_lampe":"D3",
            "vrsta_stupa":"Betonski",
            "tip_lampe":"150W Natrij",
            "naziv_naselja":"Pri\u0161lin",
            "adresa":"Pri\u0161lin 63"
         }
      }
   ]
}
Improve this question

2 Answers 2

Reset to default
2

I think it is a asynchronous issue: your function $.getJSON does not ends before the remainder of the code is executed. Therefore, the object people actually doesn't exist when your code want to use it.

  • A solution is to put all the remainder of your code into the function $.getJSON:

    $.getJSON( /*All your code here */)

but this solution won't work if your geojson and javascript files are in different domains, because of same-origin policy browsers' restrictions.

The whole story is better explained here: http://lyzidiamond.com/posts/external-geojson-and-leaflet-the-other-way

Improve this answer
1

Use L.geojson.ajax to create a Geojson layer from php. Then you can use onEachFeature property to set the markers and use the layers builtin events to handle clicks. This way the code will be more intuitive and manageable.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.