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

-

i have managed add layer on top of base map , looks this: have made rectangle direct style modifying jquery - width, height , overflow:hidden. not sure it's correct way this, please advise if there better ways.

what need when pan map mouse dragging, want top rectangle layer stay in same place content changed respectively rectangle mask on top of basemap. see, panning in leaflet being applied

-webkit-transform: translate3d(185px, 178px, 0) (i in chrome) setting top: 0 , left: 0 doesn't , rectangle moves map on panning it's sticked map.

i sure dealt same task please advise me.

update: have added fiddle illustrates problem better:

rectangle top layer

suggestion #1

you create clip mask , change rect in opposite direction of panning..

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

a problem leaflet methods not expose animation variables when panning inertia, , cannot mimic yet.. have disabled inertia of map..

also issue when zooming in/out during animation mask zooms in/out (but gets fixed once animation completed, or can set zoomanimation:false well)

suggestion #2

an alternate solution create second map , overlay/synchronize it

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

Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more