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 = [11.5303, 122.6842];
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); }
 }