通过AJAX调用将GeoJSON数据提取到Leaflet中

Question

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 1

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) });