I am working with the application Beta_Here which uses leaflet plugins, all libraries are local except for few(css related)
Usage of application live
var map = L.map('map', { minZoom: 1, maxZoom: 4, center: [0, 0], zoom: 0, crs: L.CRS.Simple }); // dimensions of the image var w = 3200, h = 1900, mainurl = 'assets/img/isbimg.jpg'; childurl = 'assets/img/fjmap.png'; // calculate the edges of the image, in coordinate space var southWest = map.unproject([0, h], map.getMaxZoom() - 1); var northEast = map.unproject([w, 0], map.getMaxZoom() - 1); var bounds = new L.LatLngBounds(southWest, northEast); var featureGroup = L.featureGroup().addTo(map); var drawControl = new L.Control.Draw({ edit: { featureGroup: featureGroup }, draw: { polygon: true, polyline: true, rectangle: true, circle: true, marker: true } }).addTo(map); map.on('draw:created', showPolygonArea); map.on('draw:edited', showPolygonAreaEdited); // add the image overlay,so that it covers the entire map L.control.layers({ Main: L.imageOverlay(mainurl, bounds), Child: L.imageOverlay(childurl, bounds) }, null, { collapsed: false }).addTo(map); L.control.nanomeasure({ nanometersPerPixel: 10000 }).addTo(map); // tell leaflet that the map is exactly as big as the image map.setMaxBounds(bounds); L.tileLayer({ attribution: 'SmartMinds', maxZoom: 18 }).addTo(map); //polygon area customization function showPolygonAreaEdited(e) { e.layers.eachLayer(function (layer) { showPolygonArea({ layer: layer }); }); } function showPolygonArea(e) { var userInputCustom = prompt("Please enter image name : choose between a to f"); featureGroup.addLayer(e.layer); e.layer.bindPopup("
"); e.layer.openPopup(); } });
أكثر...
Usage of application live
First View:This application get input from user and set the distance calculation formula accordingly....
Second View : After entering input e.g 9, second view will be loaded where we can draw shapes....
IntroductionSecond View : After entering input e.g 9, second view will be loaded where we can draw shapes....
I have setup the script which will load two imageoverlays(layers) and we can toggle them from top right and we can draw or measure from bottom left....
Problem
When we draw shapes or put markers on an image, controls work nearly perfect but when we toggle the layers, there starts the problem.... all shapes go to the background or (it seems they disappeared)
Main Question
How can we bind the drawings and marker to the specific layer(imageoverlay) if there is a way as we can see the drawing are not bind with the images but the map container..... (Pardon me if you feel i am doing something stupid because i have limited knowledge about layers so i came up with my question here....
If someone has idea about how to solve this problem, please do help or any kind of reference will be appreciated... Thanks for your time
Working ScriptIf someone has idea about how to solve this problem, please do help or any kind of reference will be appreciated... Thanks for your time
var map = L.map('map', { minZoom: 1, maxZoom: 4, center: [0, 0], zoom: 0, crs: L.CRS.Simple }); // dimensions of the image var w = 3200, h = 1900, mainurl = 'assets/img/isbimg.jpg'; childurl = 'assets/img/fjmap.png'; // calculate the edges of the image, in coordinate space var southWest = map.unproject([0, h], map.getMaxZoom() - 1); var northEast = map.unproject([w, 0], map.getMaxZoom() - 1); var bounds = new L.LatLngBounds(southWest, northEast); var featureGroup = L.featureGroup().addTo(map); var drawControl = new L.Control.Draw({ edit: { featureGroup: featureGroup }, draw: { polygon: true, polyline: true, rectangle: true, circle: true, marker: true } }).addTo(map); map.on('draw:created', showPolygonArea); map.on('draw:edited', showPolygonAreaEdited); // add the image overlay,so that it covers the entire map L.control.layers({ Main: L.imageOverlay(mainurl, bounds), Child: L.imageOverlay(childurl, bounds) }, null, { collapsed: false }).addTo(map); L.control.nanomeasure({ nanometersPerPixel: 10000 }).addTo(map); // tell leaflet that the map is exactly as big as the image map.setMaxBounds(bounds); L.tileLayer({ attribution: 'SmartMinds', maxZoom: 18 }).addTo(map); //polygon area customization function showPolygonAreaEdited(e) { e.layers.eachLayer(function (layer) { showPolygonArea({ layer: layer }); }); } function showPolygonArea(e) { var userInputCustom = prompt("Please enter image name : choose between a to f"); featureGroup.addLayer(e.layer); e.layer.bindPopup("
"); e.layer.openPopup(); } });
أكثر...