2

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);
Improve this question
6
  • 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
    Commented Oct 3, 2017 at 3: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 github.com/CliffCloud/Leaflet.EasyButton/blob/master/src/… vs this github.com/Leaflet/Leaflet/blob/…
    – Mohsen Sichani
    Commented Oct 3, 2017 at 9:08
  • 1
    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
    Commented Oct 3, 2017 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
    Commented Oct 3, 2017 at 18:45
  • Good alternative approach, solved my problem. Thanks, Up-voted.
    – Mohsen Sichani
    Commented Oct 3, 2017 at 18:59

1 Answer 1

Reset to default
1

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/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.