Introduction
I am working with leaflet api, to create an application which uses two imageoverlays(added to map).
Problem
As i loaded two imageoverlays to map with fixed bounds.Now i am have put the controls to toggle the imageoverlays i.e next and previous
I've used function bringToFront(); behind these controls....
But when i draw something like rectangle and toggle the imageoverlay, then the shapes drawn on image or points will be lost or i guess loses their appearance...i dont now how to solve this.....
Part of Script which has the incomplete implementation
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, url = 'assets/img/isbimg.jpg'; url1 = '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 var iii = L.imageOverlay(url1, bounds); var jjj = L.imageOverlay(url, bounds); var ggg = iii.addTo(map); var hhh = jjj.addTo(map); jjj.addTo(map); $('#layerControl').on('click', function layerControl() { ggg.bringToFront(); return this; }); $('#layerControl2').on('click', function layerControl2() { hhh.bringToFront(); return this; });
أكثر...
I am working with leaflet api, to create an application which uses two imageoverlays(added to map).
Problem
As i loaded two imageoverlays to map with fixed bounds.Now i am have put the controls to toggle the imageoverlays i.e next and previous
I've used function bringToFront(); behind these controls....
But when i draw something like rectangle and toggle the imageoverlay, then the shapes drawn on image or points will be lost or i guess loses their appearance...i dont now how to solve this.....
Part of Script which has the incomplete implementation
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, url = 'assets/img/isbimg.jpg'; url1 = '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 var iii = L.imageOverlay(url1, bounds); var jjj = L.imageOverlay(url, bounds); var ggg = iii.addTo(map); var hhh = jjj.addTo(map); jjj.addTo(map); $('#layerControl').on('click', function layerControl() { ggg.bringToFront(); return this; }); $('#layerControl2').on('click', function layerControl2() { hhh.bringToFront(); return this; });
I know, i havent saved the drawn vector or state of imageoverlay which creates problem, is there any method to solve this problem or with setting id to imageoverlay ???
If someone have idea about it please do help, any kind of help or reference will be appreciated .... thanks for your time
أكثر...