Leaflet - full screen + resize

Leaflet - full screen + resize

by seefeld

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<div id="map"></div>

JavaScript

function MapSize() {

     var WindowWidth = $(window).width();
     var WindowHeight = $(window).height();

     console.log(WindowWidth);
     console.log(WindowHeight);

     $('#map').css({
         "height": WindowHeight + "px",
         "width": WindowWidth + "px"
     });

 }

 function DrawMap() {

     var map = new L.Map('map');

     var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
         cloudmadeAttribution = '',
         cloudmade = new L.TileLayer(cloudmadeUrl, {
             maxZoom: 20,
             attribution: cloudmadeAttribution
         });

     map.setView(new L.LatLng(51.556801, -0.139546), 11).addLayer(cloudmade);

     var markerLocation = new L.LatLng(51.556801, -0.139546);

     var marker = new L.Marker(markerLocation);
     map.addLayer(marker);
     marker.bindPopup("<a href='http://www.wp.pl' style='color: #000'>WP</a>");

     $(window).resize(function () {
         MapSize();
         map.invalidateSize(false);
     });


 }

 $(window).load(function () {
     MapSize();
     DrawMap();

 });