Leaflet custom control to open text box on click

user_8726929 0
Viewed 2094

I have followed this Leaflet tutorial on how to create a control button for my map.

When clicked, I would like it to open a simple text box containing information about the map and its authors, similar in concept to that of the info button on this map.

Any help is appreciated.

leaflet javascript
1 Answers

I believe that example below can push you in right direction.You can add simple and yet effective plugin L.EasyButton to get desired results.

I created little snippet for you, just to push you in the right direction, hope it helps:)

var map = L.map('map').setView([46.163613, 15.750947], 14);
 mapLink =
     '<a href="http://openstreetmap.org">OpenStreetMap</a>';
 L.tileLayer(
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; ' + mapLink + ' Contributors',
         maxZoom: 18,
     }).addTo(map);


L.easyButton('fa-comment-o', function(btn, map) {
    $('#myModal').modal('show');
}, 'Informacije').addTo(map);
#map {
  width: 600px;
  height: 400px;
}
<html>

<head>

  <title>Custom Icons Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  <link href="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css" rel="stylesheet">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
               
</head>

<body>

  <div id='map'></div>
    <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  

</body>

</html>

user_23109380
Related