Leaflet, add fitbounds with geoJson

Question

Not really comfortable with JS, i'm trying to add Fitbound function on my project, but i can't manage.

I also have some loading problems only with Firefox, all markers shows in the correct location but the map doesn't load correctely and the center is not correct. Maybe something wrong with my JS code ? Please help.

    var obj = {
        lang    : 'en',
    };
    var lat = 52.533642;
    var lon = 9.071749;
    function initMap() {
        var mymap = L.map('map').setView([lat, lon], 14);
        var Wikimedia = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', { attribution: '',
            attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
            minZoom: 5,
            maxZoom: 19,
            ext: 'png'
        }).addTo(mymap);
        $.getJSON("markers.php?"+$.param(obj),  function(data){
            L.geoJson(data,{
                pointToLayer: function(feature,latlng){
                    var fontIcon = L.divIcon({
                        html: '<span class="myfont-icon"></span>',
                        iconSize: [30, 10],
                        className: 'icon'
                    });                 

                    var marker = L.marker(latlng,{icon: fontIcon});
                        marker.bindPopup('<h2>'+feature.properties.TITLE+'</h2>' );
                        return marker;
                }
            }).addTo(mymap);
        });
    }
    window.onload = function(){
        initMap();
    };

What does the code do / not do that's wrong? Can't see `fitBounds()` anywhere in the code.... ? — peeebeee, Oct 03 '19 at 10:40

score 0 · Answer 1 · answered Oct 03 '19 at 17:48

I think that you need to add Wikimedia to the map as a layer.

var Wikimedia = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', 
    { attribution: '',attribution: '<a 
        href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
        minZoom: 5,
        maxZoom: 19,
        ext: 'png'
    })
var map = L.map('mymap', { layers: [Wikimedia]}).setView([lat, lon], 14);;

Leaflet, add fitbounds with geoJson

1 Answers1