In HTML I have got 8 countries that return information in a separate <div> with an ajax/curl coded API.

when one country is selected, my leaflet map is supposed to map.flyTo the location of that country.

I have tried the following:

var optionValue = document.getElementsByTagName('option');

var currentLocation = map.getBounds();
var bahamasLocation = L.latLngBounds(25.025885, -78.035889);
var japanLocation = L.latLngBounds(36.2048, 138.2529)


function moveMap() {
  if (!currentLocation.equals(bahamasLocation) && (optionValue = "Bahamas")) {
    map.flyTo([25.025885, -78.035889], 10)
  } else if (!currentLocation.equals(japanLocation) && (optionValue = "Japan")) {
    map.flyTo([36.2048, 138.2529], 10);
  }

  //     // switch(optionValue){
  //     //     case "Bahamas":
  //     //         map.flyTo([25.025885, -78.035889], 10);
  //     //     break;

  //     //     case "Japan":
  //     //         map.flyTo([36.2048, 138.2529], 10);
  //     //     break;
  //     // }
}

document.getElementById('btnRun').onclick = moveMap();

<div >
  <select id="selCountry">
    <!--country to "select-->
    <option>Select a Country</option>
    <option value="BS">Bahamas</option>
    <option value="MX">Mexico</option>
    <option value="JP">Japan</option>
    <option value="BR">Brazil</option>
    <option value="CA">Canada</option>
    <option value="GL">Greenland
    </option>
    <option value="NI">Nicaragua</option>
    <option value="US">United States</option>
  </select>
  <button id="btnRun">Let's go!</button>
</div>

I have tried different ways of writing it but am very unsure of what I'm doing wrong. help?

CodePudding user response：

There are a couple of issues with your code:

1. The optionValue has a changeable value, and it should be set within the moveMap() function. Also, you were originally retrieving a collection of HTML elements (options), and not just the selected option (which is what you need). The example below handles things differently - first, select element is retrieved, and then, within it, the selected option is found, and its text used for flying to a specific location
2. The same thing goes for the currentLocation, since it can change after the document (and the map) have been loaded.
3. It would be better if the click event handler is attached to the button via element.addEventListener("click", moveMap)
4. You don't have to, but you could also add the coordinates and individual zoom levels inside an object, or in data-lat, data-lng, data-zoom attributes, and read them from there, instead of using the switch/case. You will find an example of that below.

Below you will find a working example (edited to include suggestions from @tacoshy in the comments).

var map = L.map('map').setView([15, 15], 2);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

function moveMap(){
    var currentLocation = map.getBounds();
    var select = document.getElementById('selCountry');
    var option = select.options[select.selectedIndex];
    var optionValue = option.value;
    
    var lat = option.getAttribute('data-lat');
    var lng = option.getAttribute('data-lng');
    var zoom = option.getAttribute('data-zoom');
    
    if(lat && lng && zoom) {
        map.flyTo([lat, lng], zoom);
    }
}

document.getElementById('btnRun').addEventListener("click",moveMap);

#map {
  height: 300px;
  margin-top: 15px;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB flnD zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
     integrity="sha256-WBkoXOwTeyKclOHuWtc i2uENFpDZ9YPdf5Hf D7ewM="
     crossorigin=""></script>
<div >
  <select id="selCountry">
    <!--country to "select-->
    <option>Select a Country</option>
    <option data-lat="25.02588" data-lng="-78.035889" data-zoom="10" value="BS">Bahamas</option>
    <option data-lat="" data-lng="" data-zoom="10" value="MX">Mexico</option>
    <option data-lat="36.2048" data-lng="138.2529" data-zoom="10" value="JP">Japan</option>
    <option data-lat="" data-lng="" data-zoom="10" value="BR">Brazil</option>
    <option data-lat="" data-lng="" data-zoom="10" value="CA">Canada</option>
    <option data-lat="" data-lng="" data-zoom="10" value="GL">Greenland
    </option>
    <option data-lat="" data-lng="" data-zoom="10"  value="NI">Nicaragua</option>
    <option data-lat="" data-lng="" data-zoom="10"  value="US">United States</option>
  </select>
  <button id="btnRun">Let's go!</button>
</div>
<div id="map"></div>

Some notes:

• the example contains additional HTML and CDN linking of CSS and scripts, as well as map initialization (all of this wasn't in the code in your question)
• the example works for Bahamas and Japan, and doesn't handle flying to other locations, as their coordinates were missing from your question