3

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.

Cezar B
  • 197
  • 4
  • 12

1 Answers1

5

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>
Michael M.
  • 10,486
  • 9
  • 18
  • 34
Svinjica
  • 2,389
  • 2
  • 37
  • 66
  • 1
    You saved me some efforts, man. I have already created my modal and had a button that would show it, but my tutor wanted me to use easyButton. I checked their gitHub usage, but couldn't find the one that shows bootstrap modal. The only code I needed to get things going is this $('#myModal').modal('show'); – Aye Jul 04 '21 at 07:57