Create a fixed rectangle layer on top of the base map with the sheet

Question

I managed to add a layer on top of the base map, and it looks like this: I created this rectangle by directly changing the style using jQuery - width , height and overflow:hidden . I'm not sure if this is the right way to do this, please advise if there are better ways.

What I need to do when I pan the map by dragging with the mouse, I want the top layer of the rectangle to remain in the same place, but the contents have been changed accordingly so that this rectangle would look like a mask on top of the base map. As I see it, panning in Leaflet is applied

-webkit-transform: translate3d(185px, 178px, 0) (I'm in Chrome) Therefore, setting top: 0 and left: 0 does not help, and the rectangle moves along with the map in panning mode, like on the map.

I am sure that someone was engaged in the same task, so please let me know.

UPDATE: I added a fiddle that better illustrates my problem:

Answer 1

Offer No. 1

You can create a clip mask and change its rect in the opposite direction of your pan.

Something like http://jsfiddle.net/gaby/dgWZk/23/

 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)' }); } 

---

The problem is that the flyer methods do not expose the animation variables when panning with inertia, and therefore we cannot simulate this yet ... therefore I disabled the inertia cards.

Also, the problem with scaling / disabling is that during the animation, the mask also zooms in / out (but is fixed after the animation finishes or you can also set zoomAnimation:false )

---

Offer No. 2

An alternative solution is to create a second card and apply / synchronize it

something like http://jsfiddle.net/gaby/dgWZk/24/

 <div id="container"> <div id="map"></div> <div id="overlay"></div> </div> 

with

 #container { position:relative; height:500px; } #map { height: 500px; position:absolute; top:0; left:0; right:0; bottom:0; } #overlay { width: 200px; height: 200px; position:absolute; top:50%; left:50%; margin-left:-200px; margin-top:-200px; outline:1px solid green; pointer-events:none; } 

and

 var map = new L.map('map',{ inertia:false }).setView([51.505, -0.09], 13); var overlay = new L.map('overlay', { zoomControl: false, inertia: false, keyboard: false, dragging: false, scrollWheelZoom: false, attributionControl:false, zoomAnimation: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(overlay); map.on('move', function () { var offset = overlay._getNewTopLeftPoint(map.getCenter()).subtract(overlay._getTopLeftPoint()).subtract([100,100]); overlay.fire('movestart'); overlay._rawPanBy(offset); overlay.fire('move'); overlay.fire('moveend'); }).on('zoomend', function () { overlay.setView(map.getCenter(), map.getZoom(), true); map.fire('move'); }); $(window).resize(function () { overlay.setView(map.getCenter(), map.getZoom()); map.fire('move'); }); map.fire('move');