How can I simply just remove this polyline from the map? var pointA = L.latLng(From.lat, From.lng); var pointB = L.latLng(To.lat, To.lng); var pointList = [pointA, pointB]; var st_line = L.polyline(pointList, { color: 'red', weight: 3, opacity: 0.5, smoothFactor: 1 }).addTo(mymap);

I have created a Leaflet map and added a GeoJSON layer like this. var map_rgb = L.map("map_rgb",{center: [userLat, userLon],crs: L.CRS.EPSG3857,zoom:'{{zoom}}',zoomControl: true,preferCanvas: false,}); var tile_layer_google_map = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', { maxZoom: 23, subdomains:['mt0','mt1','mt2','mt3'],"attribution": "Google Satellite"}).addTo(map_rgb); var building_layer = L.geoJson(bldgs, {color: "#FF0000", weight: 3, fill: false}); var drawnItems = new L.FeatureGroup(); building_layer.addTo(drawnItems); map_rgb.addLayer(drawnItems); //drawnItems.enableEdit(); var drawControl = new L.Control.Draw({ draw: { polygon: { shapeOptions: { color: 'red', fill: false, }, allowIntersection: false, drawError: { color: 'orange', timeout: 1000 }, showArea: true, metric: false, repeatMode: true, }, edit: { featureGroup: drawnItems } }); map_rgb.addControl(drawControl); map_rgb.on(L.Draw.Event.CREATED, function (e) { var type = e.layerType, layer = e.layer; drawnItems.addLayer(layer); }); I would like to edit the polygons in the geojson building_layer (modify vertices of existing polygons and also add new polygons). However, when I click the edit button, the polygons in the building_layer are not showing as editable. I am only able to add new polgyons. How can I make the building_layer editable?

I would like to know how to solve the clash between Leaflet control plugin and map.on zoomend function The problem is related to this query: Displaying selected layers depending on zoom in Leaflet and as it has been solved, there is still one issue to fix. I discovered, that once the leaflet search plugin is attached to the map: L.control.search({ layer: L.layerGroup([job2]), initial: false, propertyName: 'myKey', zoom: 18, position: 'topleft' }).addTo(map); the map.on('zoomend', function() { doesn't work at the very initial stage (when open or refresh the map to default link). The problem is shown in the image below: Under the zoom level 7 all dots are still visible, whereas I set zoomend for zoom 9. When I start zooming in/out on the map, it starts work correctly as perr below: My code looks as follow: L.control.search({ layer: L.layerGroup([job2]), initial: false, propertyName: 'myKey', zoom: 18, position: 'topleft' }).addTo(map); map.on('zoomend', function() { if (map.getZoom() < 9){ if (map.hasLayer(job2)) map.removeLayer(job2); } else { if (document.querySelector("input[name=vm]").checked && !map.hasLayer(job2)) map.addLayer(job2); } }); When enter the leaflet-search.js plugin, I see the section, which I believe is responsible for this affliction: showLocation: function(latlng, title) { //set location on map from _recordsCache var self = this; /* self._map.once('moveend zoomend', function(e) { if(self._markerSearch) { self._markerSearch.addTo(self._map).setLatLng(latlng); } }); */ self._moveToLocation(latlng, title, self._map); //FIXME autoCollapse option hide self._markerSearch before visualized!! if(self.options.autoCollapse) self.collapse(); return self; } Regarding to this I switched off part of the code with: self._map.once('moveend zoomend', function(e) { but the problem remains the same. Could somebody advice how to remove this issue and make the layers hidden at the initial stage (after refreshing the map)? Link to my map is here: https://mariusz-krukar.mkrgeo.pl/en/workshop/media/MDU_demo.html#55.21022,-1.57385,6z Once open, you will see the dots still visible, whereas zoom level is 6. When yoyu turn into zoom 7 and back to zoom 6 they will be gone until refresh the map.

How do I load a tif file from html input? So i get the tif file as a Blob from my input. I tried to do this with the geotiffJS const tiff = await GeoTIFF.fromBlob(files[0]); const image = await tiff.getImage(); // Do some stuff to get the imageBounds L.imageOverlay(imageUrl, imageBounds).addTo(map) But then I dont get the bands and the map just shows the frame of the tif. Then I tried it with leaflet-geotiff. But I don´t know what url I have to choose with this command. The Blob String doesn´t work there. var layer = L.leafletGeotiff(url, options).addTo(map); Do you have an idea?

I was wondering what the correct code syntax would be for the following code. I tried L.tileLayer and L.imageLayer. The code below does not work. I am wondering if it is a different TileLayer syntax: var imagery = L.esri.Vector.vectorTileLayer({ url:'https://tiles.arcgis.com/tiles/xxxxxxxxxxxxxxx/arcgis/rest/services/N1_E1A2_tif/MapServer/WMTS/1.0.0/WMTSCapabilities.xml?cacheKey=a9c82e054194e6b7', maxZoom: 16, opacity: 1.0, attribution: 'City' }).addTo(theMap); thanks in advance!

My objective is to plot polygons and assign a tooltip label to each one. For some reason, my code doesn't seems to work. poly_geojson = L.geoJson(poly_gon,{ onEachFeature(feature, layer) { if (feature.properties.sourceLang == "en") { layer.bindTooltip(" "+feature.properties.name+" ") } else { layer.bindTooltip(" "+feature.properties.name+" ") } } }).addTo(map);

How can I set the zoom to 23 or more? When I try to set the zoom higher the map image disappears. I am able to zoom in past 23 once the map is activated in a browser, but I can't set the zoom past 23 to begin with. Thoughts? var map = L.map('mapdiv', {zoomControl: true}).setView([40.712,-74.006], 22); L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxNativeZoom:18, minZoom: 4, maxZoom: 35, }).addTo(map); L.control.scale().addTo(map);

I have an image file that I am able to overlay perfectly fine onto my Leaflet map with this code: var initLat = 38.9761; var initLon = -77.4875; var imageUrl = '/weather/nexrad/radar.png'; var imageBounds = [[initLat + 3, initLon + 3], [initLat - 3, initLon - 3]]; L.imageOverlay(imageUrl, imageBounds).addTo(map); But as you can see, I have been trying to simulate a center point for that image overlay by just adding and subtracting 3 from my desired center point (initLat and initLon). How can I create a Leaflet ImageOverlay using not two corner points, but a center point (in this case 38.9761, -77.4875), and having a zoom value as well to determine the size of that image overlay? I am perfectly fine with using a bit of math to achieve this, but I haven't been able to figure out how I would use math in this scenario.

Share to Facebook, Mastodon, email, and any other sharing or saving service quickly and easily with one share button.