title: How to change Map on Click Leaflet
body: <p>I have a simple code below that will show a map in leaflet and here it is</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!-- saved from url=(0054)http://leafletjs.com/examples/quick-start-example.html --&gt;
  &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  
      &lt;meta charset="utf-8"&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="map" style="width: 600px; height: 400px; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0"&gt;&lt;div class="leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"&gt;&lt;div class="leaflet-tile-pane"&gt;&lt;div class="leaflet-layer"&gt;&lt;div class="leaflet-tile-container"&gt;&lt;/div&gt;&lt;div class="leaflet-tile-container leaflet-zoom-animated"&gt;&lt;img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 56px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723.png"&gt;&lt;img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 312px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(1).png"&gt;&lt;img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 56px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724.png"&gt;&lt;img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 312px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(1).png"&gt;&lt;img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -200px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(2).png"&gt;&lt;img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 568px; top: -91px;" src="./Leaflet Quick Start Guide Example_files/2723(3).png"&gt;&lt;img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -200px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(2).png"&gt;&lt;img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 568px; top: 165px;" src="./Leaflet Quick Start Guide Example_files/2724(3).png"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="leaflet-objects-pane"&gt;&lt;div class="leaflet-shadow-pane"&gt;&lt;img src="./Leaflet Quick Start Guide Example_files/marker-shadow.png" class="leaflet-marker-shadow leaflet-zoom-animated" style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; transform: translate3d(300px, 247px, 0px);"&gt;&lt;/div&gt;&lt;div class="leaflet-overlay-pane"&gt;&lt;svg class="leaflet-zoom-animated" width="1172" height="781" viewBox="-286 -191 1172 781" style="transform: translate3d(-286px, -191px, 0px);"&gt;&lt;g&gt;&lt;path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="red" stroke-opacity="0.5" stroke-width="5" fill="#f03" fill-opacity="0.5" class="leaflet-clickable" d="M183,130A42,42,0,1,1,182.9,130 z"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g&gt;&lt;path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="#0033ff" fill-opacity="0.2" class="leaflet-clickable" d="M358 163L474 219L550 153z"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div class="leaflet-marker-pane"&gt;&lt;img src="./Leaflet Quick Start Guide Example_files/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-clickable" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(300px, 247px, 0px); z-index: 247;"&gt;&lt;/div&gt;&lt;div class="leaflet-popup-pane"&gt;&lt;div class="leaflet-popup  leaflet-zoom-animated" style="opacity: 1; transform: translate3d(300px, 247px, 0px); bottom: 27px; left: -56px;"&gt;&lt;a class="leaflet-popup-close-button" href="http://leafletjs.com/examples/quick-start-example.html#close"&gt;×&lt;/a&gt;&lt;div class="leaflet-popup-content-wrapper"&gt;&lt;div class="leaflet-popup-content" style="width: 74px;"&gt;&lt;b&gt;Hello world!&lt;/b&gt;&lt;br&gt;I am a popup.&lt;/div&gt;&lt;/div&gt;&lt;div class="leaflet-popup-tip-container"&gt;&lt;div class="leaflet-popup-tip"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="leaflet-control-container"&gt;&lt;div class="leaflet-top leaflet-left"&gt;&lt;div class="leaflet-control-zoom leaflet-bar leaflet-control"&gt;&lt;a class="leaflet-control-zoom-in" href="http://leafletjs.com/examples/quick-start-example.html#" title="Zoom in"&gt;+&lt;/a&gt;&lt;a class="leaflet-control-zoom-out" href="http://leafletjs.com/examples/quick-start-example.html#" title="Zoom out"&gt;-&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="leaflet-top leaflet-right"&gt;&lt;/div&gt;&lt;div class="leaflet-bottom leaflet-left"&gt;&lt;/div&gt;&lt;div class="leaflet-bottom leaflet-right"&gt;&lt;div class="leaflet-control-attribution leaflet-control"&gt;&lt;a href="http://leafletjs.com/" title="A JS library for interactive maps"&gt;Leaflet&lt;/a&gt; | Map data © &lt;a href="http://openstreetmap.org/"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://mapbox.com/"&gt;Mapbox&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
      &lt;script src="./Leaflet Quick Start Guide Example_files/leaflet.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          var map = L.map('map').setView([51.505, -0.09], 13);
  
          L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
              maxZoom: 18,
              attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
                  '&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, ' +
                  'Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
              id: 'examples.map-i875mjb7'
          }).addTo(map);
  
  
  
  
      &lt;/script&gt;
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>i just wanna ask how can i transfer or change the map view when i clicked on link button</p>
  
  <pre><code>Ex.
  If i click Afghanistan
  &lt;button type="button"&gt;View Map of Afghanistan&lt;/button&gt;
  If i click iraq
  &lt;button type="button"&gt;View Map of Iraq&lt;/button&gt;
  </code></pre>
  
  <p>and i hope the site will not refresh just only the map will change. any help is appreciated TY</p>