JSFiddle - React, Tailwind, and code Playground

simple map panning from button clicks

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<div class="btn-group">
    <button class="btn" onclick="PanAndPop(34.42, -119.7)">Santa Barbara</button>
    <button class="btn" onclick="PanAndPop(34.05, -118.25)">Los Angeles</button>
</div>
<div id="map" style="height: 400px"></div>

JavaScript

var map = new L.Map('map').setView([34.2, -119], 10);

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

PanAndPop = function (lat, lng) {
        // add a marker
        var html='hello!'
        var pop = L.popup().setLatLng([lat,lng]).setContent(html).openOn(map);
        // set the view
        map.setView([lat, lng], 14);
}