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);
  • 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 3 '17 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 Oct 3 '17 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 Oct 3 '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 3 '17 at 18:45
  • Good alternative approach, solved my problem. Thanks, Up-voted. – Mohsen Sichani Oct 3 '17 at 18:59
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/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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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