CODEWITHSUNDEEP
javascriptleaflet
Keith D Kaiser
Keith D Kaiser

Reputation: 1036

fitBounds to zoom to include all markers

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

Upvotes: 1

Views: 3750

Answers (1)

peeebeee
peeebeee

Reputation: 2618

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

Upvotes: 1

Related Questions