Need button click to change Leaflet map center

[Cindy Jones-Hulfachor]

What is the best way to code this? 

A leaflet map loads with Location Broward at its center. There are 2 buttons, one for Location Broward and another for Location Palm.

When Button Broward is clicked (and map is at Location Broward: true) nothing should happen.

If Button Palm is clicked (and map is at Location Broward: true) the map’s center goes to Location Palm.

The Leaflet map is loading into a bootstrap file. 

<div id=“container”>

   <div id=“map-holder”>

      <div id=“map”>

Should I do this with setView, setLatLng. Do I need to state “new L.latlong. Should I reference the map like    .map-holder.map  OR  $(‘.map’).setView

OR make a function ....

function onClick(e) {

$('.map').setView(L.latlng(26.5,-80.184), 10);     };

map.on('click', '#palm_btn', function(e) {

onClick();     });

I think I just keep spinning to many thoughts on this. I know this should be simple, hopefully someday it will.

Thanks,

Cindy

[k_man_au]

<input name="btnPalm" type="button" value="Zoom to Palm" onClick="zoomTo(locPalm);" />

<input name="btnBroward" type="button" value="Zoom to Broward" onClick="zoomTo(locBroward);"/>

<script>

var locPalm = new L.LatLng(-37.93, 145.97);

var locBroward = new L.LatLng(-37.95, 145.99);

function zoomTo(location) {

map.setView(location, map.getZoom());

}

</script>

[Cindy Jones-Hulfachor]

Thank you k_man_au, I will definitely give this a try.

Cindy

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Cindy Jones-Hulfachor]

Thanks, I put it in works like a charm. I wouldn't have thought to format it that way, will use format in the future. Using leaflet with bootstrap.

<div class="row">
    <div class="btn-group btn-county">
    <button type="button" class="btn btn-default btn-xs" id="btnBroward" value="Zoom to Broward" onClick="zoomTo(locBroward)">Broward County</button>
    <button type="button" class="btn btn-default btn-xs" id="btnPalm" value="Zoom to Palm" onClick="zoomTo(locPalm)">Palm Beach County</button>
    </div>        
</div>

var locPalm = new L.LatLng(26.5,-80.184);
var locBroward = new L.LatLng(26.114, -80.216);
function zoomTo(location) {
map.setView(location, map.getZoom());   
}   

[k_man_au]

No problem :)