Create a fixed rectangle layer on top of basemap with Leaflet - Javascript Leaflet

Javascript examples for Leaflet:Layer

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

Description

Create a fixed rectangle layer on top of basemap with Leaflet

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="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css"> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script> 
      <style id="compiled-css" type="text/css">

#map {/*  w  ww  .j  ava  2 s .co m*/
   height: 500px;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var map = new L.map('map',{inertia:false}).setView([51.505, -0.09], 13);
var layer01 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var layer02 = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg').addTo(map);
var overlay = {
    top: 50,
    left: 50,
    width: 200,
    height: 200
}
map.on('move', repositionMask) ;
map.fire('move');
function repositionMask() {
    var po = map.getPixelOrigin(),
        pb = map.getPixelBounds(),
        offset = map.getPixelOrigin().subtract(map.getPixelBounds().min);
    $(layer02._container).css({
        clip: 'rect(' + (overlay.top - offset.y) + 'px,' + (overlay.left + overlay.width - offset.x) + 'px,' + (overlay.top + overlay.height - offset.y) + 'px,' + (overlay.left - offset.x) + 'px)'
    });
}
    });

      </script> 
   </head> 
   <body> 
      <div id="map"></div>  
   </body>
</html>

Related Tutorials