1

I am making a Leaflet 1.3.4 map that will show members based on category. I have a php file "cs.php" that queries a MySQL and returns an option menu of distinct categories. When a category is selected it makes the selected value available to the "showUser" function. That function should clearLayers() then then bring in the appropriate GeoJSON data displaying markers with popups. All of that works fine, my problem is trying to get "fitBounds" to to zoom to fit the markers on the map. I have tried multiple scripts. Whenever fitBounds is part of the showUser function the map does not show and not errors are in the console. I don't understand what I have done wrong or forgotten or something.

UPDATE: I updated the code with suggestion to use "geojsonLayer" by @Marc_Pfister suggested in the .on data:loaded and that fixed it. I also changed to data:progress per @Stefan_Fairphone.

Here is the working example:

            <script>
            $(document).ready(function(){$("#div1").load("cs.php");});
            var m= L.map('map', {zoomControl:false}).setView([39.1, -94.6],12);
            var mopt = {
                url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=<API Key>',
                options: {attribution:'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
            };
            var mq=L.tileLayer(mopt.url,mopt.options);
            mq.addTo(m);

            function popUp(feature,layer) {
                layer.bindPopup(........};

            var buildingLayers = new L.FeatureGroup().addTo(m);
            var geojsonLayer;               

            function showUser(str) {
            buildingLayers.clearLayers();
            geojsonLayer = new L.GeoJSON.AJAX(["geojson.php?cs="+str],{onEachFeature:popUp})
            geojsonLayer.on('data:progress', function() {
            m.fitBounds(buildingLayers.getBounds())
            })
            .addTo(buildingLayers);};
        </script>

Here is an example of the GeoJSON that "GeoJSON.php" is outputting:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-94.905793,39.416633]},"properties":{"Member_Name":"Angels Rock Bar","Contact":"Pedro Lopez","Address":"1323 Walnut","City":"Kansas City","Phone":"(816) 896-3943","Email":"[email protected]","Website":"www.angelsrockbarkc.com"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-94.541461,39.051003]},"properties":{"Member_Name":"Bar K","Contact":"Leib Dodell","Address":"501 Berkley Parkway","City":"Kansas City","Phone":"(816) 225-6961","Email":"[email protected]","Website":"www.barkdogbar.com"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-94.583506,39.098954]},"properties":{"Member_Name":"The Indie on Main","Contact":"Jamie Pitts","Address":"1228 Main St.","City":"Kansas City","Phone":"(816) 283-9900","Email":"","Website":""}}
3
  • 1
    What happens if you listen for the data:loaded event on geojsonLayer instead of buildingLayers? Commented Dec 6, 2018 at 5:14
  • Or data:progress. According to the README.md it is used when you download one file (in contrast to data:loaded for multiple files). Commented Dec 6, 2018 at 8:40
  • L.GeoJSON.AJAX supports loading from multiple URLs. data:progress will fire when a URL has finished loading. When all the URLs are loaded, whether it's one or many, the data:loaded event fires. Commented Dec 6, 2018 at 20:50

1 Answer 1

0

FeatureGroups are supposed to listen to their contents for events, but maybe that's not working for L.GeoJSON.AJAX? Try listening directly on the GeoJSON layer:

   geojsonLayer.on('data:loaded', function() {
       m.fitBounds(buildingLayers.getBounds())
   })

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.