map select

Change map with select

by msjade

HTML

<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="div1">

  <select id="loc" onchange="change_map()">
        <option value="1">Roxas City</option>
        <option value="2" selected>Ivisan</option>
    </select>

  <div id="mapid"></div>

</div>

CSS

#mapid {
  width: 100%;
  height: 100%;
}

#div1 {
  border: 1px solid grey;
  width: 500px;
  height: 310px;
  margin: 0 auto;
  margin-top: 20px;
}

JavaScript

var coor = [9.401, 7.402];
var mymap = L.map('mapid').setView(coor, 13);
var zoom = 13;

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

//mymap.on('click', onMapClick);

// onchange function (this format makes the function global)
window.change_map = function() {

  // Get the select element
  var e = document.getElementById("loc");
  // Get the value of the selected index
  var v = e.value;

  // Verify the value and set the map to the new center
  if (v == "1") {
    mymap.setView([11.5529, 122.7407], zoom);
  } else if (v == "2") {
    mymap.setView([11.5303, 122.6842], zoom);
  }
}