Placing easyButton outside Leaflet

Question

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);

I'm not familiar with EasyButton, but presumably it's providing a nicer UI to a standard Leaflet Control(?). Did you try the approach suggested in the linked answer? What happens if you use var htmlObject = ButtonPower_Line.getContainer();? Can you use the setParent approach from that point onwards? — Stephen Lead, Oct 03 '17 at 03:26
Thank you, Stephen, for editing. I tried that, it does not have a function for that. The intelligence of Visual Studio did not show any getcontainer function. Please check this https://github.com/CliffCloud/Leaflet.EasyButton/blob/master/src/easy-button.js vs this https://github.com/Leaflet/Leaflet/blob/14c5f1602cdd337df14c37ea8df777578219f744/src/control/Control.js — Mohsen Sichani, Oct 03 '17 at 09:08
As an option have you considered using html radio buttons? Another option would be a toggle button, there are many CSS options to make this usable. — Bill Chappell, Oct 03 '17 at 11:57
@BillChappell, good suggestion. I was so st...d. that did not think about that (HTML). Please let me try that first. I will keep you posted. — Mohsen Sichani, Oct 03 '17 at 18:45
Good alternative approach, solved my problem. Thanks, Up-voted. — Mohsen Sichani, Oct 03 '17 at 18:59
@BillChappell could you include that as an answer with a few more details, to help anyone else who encounters this issue? — Stephen Lead, Oct 03 '17 at 22:21

score 1 · Accepted Answer · answered Oct 04 '17 at 14:23

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>

Placing easyButton outside Leaflet

1 Answers1