[GIS] Placing easyButton outside Leaflet

easybutton-pluginjavascriptleaflet

I am working with Leaflet and EasyButton and have several EasyButtons on the map. I would like to move them outside the map, but have difficulty to achieve this. Seems EasyButton does have any function for capturing the name of the buttons that it holds.

Something similar to this, but with easyButton.
Placing controls outside map container with Leaflet?

var ButtonPower_Line = L.easyButton({
    id: 'ButtonPowerLine',
    states: [{
        stateName: 'Show',
        icon: '<strong> Off</strong>',
        title: 'Show',
        onClick: function (btn) {
           //do sth
        }
    }, {
        stateName: 'Hide',
        icon: '<strong> On</strong>',
        title: 'Hide',
        onClick: function (btn) {
          //do sth
        }
    }]
});
ButtonPower_Line.addTo(map);

Best Answer

Here is a simple example, it is a HTML page with two text boxes (input) and a button. The HTML button and inputs are outside the map. The text boxes ask for Lat, Lng and when you hit the button it takes the textbox values and plots the point on the map. I have use HTML buttons to zoom to New York City since I work for the state or one to reset the map to original extents and turn off layers. Basic idea create an on click function for the button.

<!DOCTYPE html>
<html>
<head><title>Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

</head>
<style>
#header    { width: 100%;height: 25px; float: left; font:14px Verdana;font-weight:bold}
</style>
<body>
<div id="header"> 
          Lat:  <input type="text" id="lat">
          Long:  <input type="text" id="lng">
          <button onclick="buttonClick()">Click</button>
</div>
<div id="map" style="width: 600px; height: 400px;"></div>
</div>

<script>
    var map = L.map('map').setView([42.736424, -73.762713], 8);  

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

    // used to populate the two textboxes
    var theSampleLat = 42.682435;
    var theSampleLng = -73.78967;

    document.getElementById("lat").value = theSampleLat;
    document.getElementById("lng").value = theSampleLng;

    function buttonClick(){
        //Get values from textboxs
        var theLat = document.getElementById("lat").value;
        var theLng = document.getElementById("lng").value;

        //Make marker
        L.marker([theLat,theLng]).addTo(map)
        .bindPopup("Your point is at " + theLat+", "+theLng).openPopup();

        map.setView([theLat,theLng], 15);

    };


</script>
</body>
</html>
Related Question