Balazs Balazs - 6 months ago 111
PHP Question

Pulling GeoJSON data into Leaflet with AJAX call

I am new to Leaflet and I was wondering how to load markers from a MySQL database onto a leaflet map. How to load markers from MySQL using PHP and ajax?

.....{"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":[-122.340141,47.60894]},"properties":{"name":"Pan
Africa Market","address":"1521 1st Ave, Seattle,WA","type":"restaurant"}},.......


Leaflet code:

<script>
var map = L.map('map').setView([47.6145, -122.3418], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

$.ajax({
type: "GET",
url: "./geojson.php",
dataType: "geojson",
success: function(response) {
L.geoJson(response, {
onEachFeature: onEachFeature
}).addTo(map);
}
}).error(function() {});


function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.popupContent);
}</script>


The markers dont show on the map. I tried
type: "POST"
too, I checked chrome console for errors and I got none.

UPDATED geojson.php output:

{"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":[-122.340141,47.60894]},"properties":{"name":"Pan Africa Market","address":"1521 1st Ave, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.344391,47.61359]},"properties":{"name":"Buddha Thai & Bar","address":"2222 2nd Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.356445,47.624561]},"properties":{"name":"The Melting Pot","address":"14 Mercer St, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.337654,47.606365]},"properties":{"name":"Ipanema Grill","address":"1225 1st Ave, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.345673,47.612823]},"properties":{"name":"Sake House","address":"2230 1st Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.340363,47.605961]},"properties":{"name":"Crab Pot","address":"1301 Alaskan Way, Seattle, WA","type":"restaurant"}},{"geometry":{"type":"Point","coordinates":[-122.345467,47.613976]},"properties":{"name":"Mama's Mexican Kitchen","address":"2234 2nd Ave, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.326584,47.617214]},"properties":{"name":"Wingdome","address":"1416 E Olive Way, Seattle, WA","type":"bar"}},{"geometry":{"type":"Point","coordinates":[-122.342834,47.610126]},"properties":{"name":"Piroshky Piroshky","address":"1908 Pike pl, Seattle, WA","type":"restaurant"}}]}


Finally I figured out: there was a missing line in the:

$feature = array(
'type' => 'Feature',)

Answer

I suspect that the error is here: dataType: "geojson"

jQuery's AJAX supports these values for dataType: xml, json, script, and html (from the documentation). It will try to parse the response based on that, and "geojson" is not a value it knows or recognizes. dataType is also not to be confused with contentType and mimeType, these are different things.

What you simply need to do is change that to dataType: "json" since GeoJSON files are just JSON.

You received no feedback on errors because there was nothing happening in the .error function.

    $.ajax({
        type: "GET",
        url: "./geojson.php",
        dataType: "json", 
        success: function(response) {
                L.geoJson(response, {
                    onEachFeature: onEachFeature
                }).addTo(map);
        },
        error: function(response) {
                console.log(response);
        }
     }).error(function(response) { console.log(response) });