CODEWITHSUNDEEP
leafletbootstrap-modal
Mabdo
Mabdo

Reputation: 11

How to display popup of Leaflet markers in BootLeaf template?

I tried this piece of code but the problem persists:

var customPopup = "Mozilla Toronto Offices...";

// specify popup options
var customOptions =
{
  'maxWidth': '500',
  'className' : 'custom'
}

// create marker object, pass custom icon as option,
// pass content and options to popup, add to map
L.marker([43.64701, -79.39425], {
  icon: firefoxIcon
}).bindPopup(customPopup,customOptions).addTo(map);

What am I doing wrong?

Upvotes: 1

Views: 2934

Answers (2)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

//  create map object, tell it to live in 'map' div and give initial latitude, longitude, zoom values 
    var map = L.map('map', {scrollWheelZoom:false}).setView([43.64701, -79.39425], 15);

    //  add base map tiles from OpenStreetMap and attribution info to 'map' div
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // create custom icon
    var firefoxIcon = L.icon({
        iconUrl: 'http://joshuafrazier.info/images/firefox.svg',
        iconSize: [38, 95], // size of the icon
        popupAnchor: [0,-15]
        });

    // create popup contents
    var customPopup = "Mozilla Toronto Offices<br/><img src='http://joshuafrazier.info/images/maptime.gif' alt='maptime logo gif' width='350px'/>";
    
    // specify popup options 
    var customOptions =
        {
        'maxWidth': '500',
        'className' : 'custom'
        }
    
    // create marker object, pass custom icon as option, pass content and options to popup, add to map
    L.marker([43.64701, -79.39425], {icon: firefoxIcon}).bindPopup(customPopup,customOptions).addTo(map);
<html>
 
<head>
 
<!-- reference to Leaflet CSS -->
<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.css" />
 
<!-- reference to Leaflet JavaScript -->
<script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.js"></script>
 
<!-- set width and height styles for map -->
<style>
#map {
    width: 960px;
    height:500px;
}

/* css to customize Leaflet default styles  */
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
    background: #e93434;
    color: #ffffff;
}
</style>

</head>

<body>

    <!-- place holder for map -->
    <div id="map"></div>

</body>

</html>

source: http://bl.ocks.org/uafrazier/d589caa322f1b1e7c651

Upvotes: 0

ghybs
ghybs

Reputation: 53280

You just need to realize that the BootLeaf example app you mention uses Bootstrap's modal instead of Leaflet's popup.

Therefore instead of attaching a Leaflet popup to your marker (i.e. L.marker().bindPopup()), you prepare a placeholder modal, fill it on your marker click event and show the modal, as done in the example app:

HTML

<div class="modal fade" id="featureModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title text-primary" id="feature-title"></h4>
      </div>
      <div class="modal-body" id="feature-info"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JavaScript

var myMarker = L.marker(latLng).addTo(map);

myMarker.on({
  click: function (e) {
    $("#feature-title").html(myMarkerTitle);
    $("#feature-info").html(myMarkerContent);
    $("#featureModal").modal("show");
  }
});

Upvotes: 1

Related Questions