Leaflet

by Ryan J

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal
</a>
     
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p><div id="map" style="height:280px"></div></p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>

JavaScript

var map = L.map('map').setView([-3.781013, -38.514633], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {attribution: false}).addTo(map);

var marker;

map.on('click', function(e) {
    if( !marker ) {
        
        marker = L.marker(e.latlng).addTo(map);
              
    }
});

$('#myModal').on('shown',function(){
    L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});

$('#myModal').on('hidden',function(){
    if( marker ) {
        map.removeLayer(marker);
        marker = null;
    }
});