leafletjs map div - Javascript Leaflet

Javascript examples for Leaflet:Map

  1. HOME
  2. Javascript
  3. Leaflet
  4. Map

Description

leafletjs map div

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css"> 
      <style id="compiled-css" type="text/css">

#popup{/* www  .j ava  2 s  . c  o m*/
   position: fixed;
   z-index: 9998;
   background-color: rgba(0,0,0,.3);
   height: 100vh;
   width: 100vw;
   display: none;
   overflow: auto;
}
#parent{
   background-color: #00ff26;
   position: fixed;
   z-index: 9999;
   padding: 5px;
   display: none;
   border-radius: 10px;
}
#parent *{
   padding: 2px;
   border-radius: 5px;
   display: block;
   margin-bottom: 5px;
}
#map{
   height: 320px;
   width: 320px;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var map;
function mapper(mapID) {
    centerPoint =  [51.5, -0.09];
    zoom = 16;
    map = L.map(mapID, {
        center: centerPoint,
        maxZoom: 22,
        zoom: zoom,
        zoomControl: true,
        attributionControl: true,
        doubleClickZoom: false
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OSM</a> contributors'}).addTo(map);
        L.marker(centerPoint, {draggable: true}).addTo(map);
}
function setPopup(panel, parentModal) {
    parentModal.css("display", "inline-block");
    this.close = function close() {
        panel.css("display", "none");
        parentModal.unbind("click").css("display", "none");
    }
    parentModal.click(close);
    panel.submit(close);
    var w1 = panel.outerWidth() / 2,
    h1 = panel.outerHeight() / 2,
    w2="50vw",
    h2 = "50vh";
    panel.css({"display": "inline-block", "top": "calc(" + h2 + " - " + h1 + "px)", "left": "calc(" + w2 + " - " + w1 + "px)"});
    map.invalidateSize();
}
$("#mapbt").click(function(){
 setPopup($("#parent"), $("#popup"));
})
mapper("map");
    }

      </script> 
   </head> 
   <body> 
      <div id="popup"> 
         <div id="parent"> 
            <!--this map is in two fixed div parent that not work--> 
            <div id="map"></div> 
         </div> 
      </div> 
      <input type="submit" value="show map" id="mapbt"> 
      <!--this map is worked please uncomment it by ctrl + / and comment upper #map --> 
      <!-- <div id="map"></div> -->  
   </body>
</html>

Related Tutorials