fitBounds to zoom to include all markers

Question

My JavaScript for the Leaflet map is below, near the bottom you will see my fitBounds() definition.

The problem is I do not understand how to use it exactly, or where to put it in this code to make it work (i.e. to zoom to include all Markers, instead of hard coding the coordinates).

It seems nothing I try makes it work correctly.

var map = L.map('map').setView([39.202903, -94.602907], 20);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(map);

function onLocationFound(e) {
  var radius = e.accuracy / 2;

  L.circle(e.latlng, radius).addTo(map);

  marker1 = L.marker([39.199178, -94.643435]).addTo(map);
  marker1.bindPopup("1<br><b>#050</b><br>KC0YT<br>Charlotte Hoverder<br>Platte Co., MODist:A<br>39.199178, -94.643435<br>EM29qe").openPopup();

  marker2 = L.marker([39.2859182, -94.667236]).addTo(map);
  marker2.bindPopup("2<br><b>#007</b><br>KD0YEX<br>Karen Mcmackin<br>Platte  Co., MODist:A<br>39.2859182, -94.667236<br>EM29pg98").openPopup();

  marker3 = L.marker([39.233982, -94.666035]).addTo(map);
  marker3.bindPopup("3<br><b>#048</b><br>N0RL<br>David Copeland<br>Clay  Co., MODist:A<br>39.233982, -94.666035<br>EM29ri").openPopup();

  marker4 = L.marker([39.33353, -94.76145]).addTo(map);
  marker4.bindPopup("4<br><b>#052</b><br>W0JSH<br>John Heavener<br>Platte  Co., MODist:A<br>39.33353, -94.76145<br>EM29oi").openPopup();
}

function onLocationError(e) {
  alert(e.message);
}

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);

map.fitBounds([
  [39.199178, -94.643435],
  [39.2859182, -94.667236],
  [39.233982, -94.666035],
  [39.33353, -94.76145],
]);

map.locate({
  setView: true,
  maxZoom: 10,
});

If the bounds you need to set are constant, you can probably set them once in place of the `setView()` call when you initialise the map. You likely only need one or the other, not both. — peeebeee, Oct 14 '18 at 14:23
@peeebee, thanks for that, but I don't understand the syntax of how to do it. Can you give me an example please. — Keith D Kaiser, Oct 14 '18 at 14:40
I started writing an answer but then noticed you've got the wrong idea about `fitBounds()` - it takes a `LatLngBounds` which has only 2 elements - opposite corners of a rectangle. I think you're trying to draw an irregular shape with it which won't work. — peeebeee, Oct 14 '18 at 16:57
OK. Can you explain in English what you're trying to achieve? — peeebeee, Oct 15 '18 at 06:41
I would like to be able to zoom to the markers on the map. I create these maps for a variety of place around mostly Missouri. But they are generally clustered together. So I really don't have a center point to set the map to. A good place to start would be this working model; https://net-control.us/map3.php. Zooming out you can see that not all the points are on the original screen. — Keith D Kaiser, Oct 15 '18 at 14:51
@peeebeee see above comment but I'm still trying various things. I wonder if maybe I'm calling the map too many times? I've expanded map3.php with a map4.php. Try both, but map4 will change periodically. — Keith D Kaiser, Oct 16 '18 at 01:51

peeebeee · Accepted Answer · 2018-10-16T14:35:58.783

So you're almost there with your last attempt. Since you're already maintaining an array of L.marker I suggest making a L.featureGroup from that (I made it global), and using getBounds() on the featureGroup to set the bounds of the map. You could adjust depending on your aversion level for globals.

var map = null;
var zoomLevel = 20;
var markers = [];

// starting point for the map and a zoom level of 20
var map = L.map('map').setView([39.202903, -94.602907], zoomLevel);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: zoomLevel,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(map);

function netStationLocations(e) {

    // This is the markers array
    // var markers = []; 
      var N0SAX = L.marker([39.3762884,-93.496261],{title:"marker_1"}).addTo(map).bindPopup("1<br><b>#233</b><br>N0SAX<br>Jack Vantrump<br>Carroll  Co., MO Dist: A<br>39.3762884, -93.496261<br>EM39GJ").openPopup();
        markers.push(N0SAX);

      var KF0ED = L.marker([39.7898224,-93.558050],{title:"marker_2"}).addTo(map).bindPopup("2<br><b>#245</b><br>KF0ED<br>Glenn O connor<br>        Livingston   Co., MO Dist: H<br>39.7898224, -93.558050<br>EM39FS").openPopup();
        markers.push(KF0ED);

      var KD0ZMG = L.marker([39.010151,-94.579769],{title:"marker_3"}).addTo(map).bindPopup("3<br><b>#264</b><br>KD0ZMG<br>      THEARL      Speck<br>Livingston  Co., MO Dist: H<br>39.010151, -94.579769<br>EM29RA").openPopup();
        markers.push(KD0ZMG);

      var KC0NOX = L.marker([39.8132645,-93.558613],{title:"marker_4"}).addTo(map).bindPopup("4<br><b>#387</b><br>KC0NOX<br>Joe Dietrick<br>Livingston  Co., MO Dist: H<br>39.8132645, -93.558613<br>EM39FT").openPopup();
        markers.push(KC0NOX);

      var AA0JA = L.marker([39.593217,-93.788696],{title:"marker_5"}).addTo(map).bindPopup("5<br><b>#389</b><br>AA0JA<br>Bill Whitlock<br>Caldwell  Co., MO Dist: H<br>39.593217, -93.788696<br>EM39co").openPopup();
        markers.push(AA0JA);

      var AC0OK = L.marker([40.1697444,-93.093104],{title:"marker_6"}).addTo(map).bindPopup("6<br><b>#414</b><br>AC0OK<br>Sam Cook<br>Sullivan  Co., MO Dist: B<br>40.1697444, -93.093104<br>EN30KE").openPopup();
        markers.push(AC0OK);

      var KG6TUB = L.marker([39.7973405,-93.551737],{title:"marker_7"}).addTo(map).bindPopup("7<br><b>#610</b><br>KG6TUB<br>Doris Hoch<br>Livingston  Co., MO Dist: H<br>39.7973405, -93.551737<br>EM39FT").openPopup();
        markers.push(KG6TUB);

      var NCMO = L.marker([40.0706749,-93.611323],{title:"marker_9"}).addTo(map).bindPopup("9<br><b>#614</b><br>NCMO<br>Glendale (KB0RPJ) Briggs<br>Grundy  Co., MO Dist: <br>40.0706749, -93.611323<br>EN30EB").openPopup();
        markers.push(NCMO);

      var AC0TQ = L.marker([39.7973405,-93.551737],{title:"marker_10"}).addTo(map).bindPopup("10<br><b>#616</b><br>AC0TQ<br>Ken Hoch<br>Livingston  Co., MO Dist: H<br>39.7973405, -93.551737<br>EM39FT").openPopup();
        markers.push(AC0TQ);

      var KE0MGD = L.marker([39.8157137,-94.020960],{title:"marker_11"}).addTo(map).bindPopup("11<br><b>#621</b><br>KE0MGD<br>Carl Russell<br>Daviess  Co., MO Dist: H<br>39.8157137, -94.020960<br>EM29XT").openPopup();
        markers.push(KE0MGD);

      var KE0ELB = L.marker([40.2363229,-93.153805],{title:"marker_12"}).addTo(map).bindPopup("12<br><b>#623</b><br>KE0ELB<br>Kris Good<br>Sullivan  Co., MO Dist: B<br>40.2363229, -93.153805<br>EN30KF").openPopup();
        markers.push(KE0ELB);

      var W0WHH = L.marker([40.1931446,-93.667155],{title:"marker_13"}).addTo(map).bindPopup("13<br><b>#624</b><br>W0WHH<br>Bill Hein<br>Grundy  Co., MO Dist: H<br>40.1931446, -93.667155<br>EN30DE").openPopup();
        markers.push(W0WHH);

      var AD0YN = L.marker([39.659816,-93.398354],{title:"marker_14"}).addTo(map).bindPopup("14<br><b>#644</b><br>AD0YN<br>Charles STIRLING<br>Livingston  Co., MO Dist: H<br>39.659816, -93.398354<br>EM39HP").openPopup();
        markers.push(AD0YN);

      var KE0RTA = L.marker([40.0722144,-93.578824],{title:"marker_15"}).addTo(map).bindPopup("15<br><b>#673</b><br>KE0RTA<br>Vic Markell<br>Grundy  Co., MO Dist: H<br>40.0722144, -93.578824<br>EN30FB").openPopup();
        markers.push(KE0RTA);

    // Set up to show markers popup
    function markerFunction(id){
        for (var i in markers){
            var markerID = markers[i].options.title;
            if (markerID == id){
                markers[i].openPopup();
            };
        } // end of for loop
    } // end markerFunction 

    // JQuery call to display the popup from the marker list
    $("a").click(function(){
        markerFunction($(this)[0].id);
    });

} // End of the netStationLocations function

// In case some errors pop up
function onLocationError(e) {
    alert(e.message);
}


map.on('locationfound', netStationLocations);
map.on('locationerror', onLocationError);

map.locate({setView: true, maxZoom: 12 });

var fg = L.featureGroup(markers);
map.fitBounds(fg.getBounds());

I see the couple of little changes you made (making markers global) and applied them to map3.php but it's still not zooming to show all markers. Also you intrigued me with your comment about my "aversion level for globals". I'm not sure what that means. — Keith D Kaiser, Oct 16 '18 at 15:32
looks like the following error is the issue; leaflet.js:5 Uncaught Error: Bounds are not valid. at e.fitBounds (leaflet.js:5) at map1.php?NetID=888:183 — Keith D Kaiser, Oct 16 '18 at 16:47
Do not forget [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — ghybs, Oct 17 '18 at 02:19
#peeebeee; I'm not making much progress in understanding the syntax. The leaflet page gives all kinds of things you can do, but no examples of syntax. — Keith D Kaiser, Oct 17 '18 at 23:08
Make a jsfiddle with just enough code to demonstrate the problem and I'll work on it with you. — peeebeee, Oct 18 '18 at 07:41
I can't thank you enough for helping me with this #peeebeee. Never used jsfiddle before but I gave it a shot. You can find it at https://jsfiddle.net/kkaiser/xpvt214o/891986/ — Keith D Kaiser, Oct 18 '18 at 20:46
#peeebeee, I'm not sure I told you before this is the saved code from 'show source' I actually build the code from a MySQL table using the usual methods. — Keith D Kaiser, Oct 18 '18 at 21:21
OK, I've only just got around to this now. Can you go through again what behaviour you're expecting 1) When the geolocation has succeeeded and 2) When a callsign is clicked in the side panel? — peeebeee, Oct 20 '18 at 08:35
After (or before) the markers are put on the map, I'd like the map to zoom to fit all markers. The right panel click already works, it just opens the appropriate marker, this works already. — Keith D Kaiser, Oct 21 '18 at 02:11
OK, see http://jsfiddle.net/peeebeee/kw03udf4/, I think that does what you want. I commented out the geotracking code, if you need it you'll need to put it back. — peeebeee, Oct 21 '18 at 10:26
This is exactly what I needed it to do. I also tested it on many other nets, some big some small they all worked. — Keith D Kaiser, Oct 22 '18 at 15:41

fitBounds to zoom to include all markers

1 Answers1