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.

I have simple line layer created based on shapefiles. It can be viewed in GeoServer with OpenLayers preview: I also can be imported and correctly viewed in QGIS. I tried to visualize this layer over OSM map in my leaflet: var map = L.map('map', ); map.setView([35.6, 25], 8); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data &copy; OpenStreetMap contributors' }).addTo(map); var WMSe = "http://xx.xxx.xx.xxx:8080/geoserver/wms"; var OHLayer = L.tileLayer.wms(WMSe, { layers: 'fch:OHL-fch', format: 'image/png', transparent: true, format_options: 'layout:message', attribution: "Algum texto de teste", layout: 'message', }).addTo(map) where fch:OHL-fch in name of layer in layer preview in GeoServer. When I run this, all I get is OSM map without line layer. Any help in resolving this is appreciable. Geoserver preview request: http://xx.xxx.xx.xxx:8080/geoserver/fch/wms?service=WMS&version=1.1.0&request=GetMap&layers=fch%3AOHL-fch&bbox=23.6974544525146%2C35.0042533874512%2C26.1459541320801%2C35.4908332824707&width=768&height=330&srs=EPSG%3A4326&styles=&format=application/openlayers leaflet request(NOT working): URL: http://xx.xxx.xx.xxx:8080/geoserver/wms?service=WMS&request=GetMap&layers=%20fch%3AOHL-fch&styles=&format=image%2Fpng&transparent=true&version=1.1.1&format_options=layout%3Amessage&layout=message&height=256&width=256&srs=EPSG%3A3857&bbox=2191602.4749925733,4226661.916057106,2348145.5089206146,4383204.949985149 leaflet request(working): URL: http://xx.xxx.xx.xxy:8080/geoserver/wms?service=WMS&request=GetMap&layers=%20fch%3AOHL-fch&styles=&format=image%2Fpng&transparent=true&version=1.1.1&format_options=layout%3Amessage&layout=message&height=256&width=256&srs=EPSG%3A3857&bbox=2817774.6107047372,3913575.848201024,2974317.644632778,4070118.8821290666 Print of leaflet layer: _container: _crs: {latLngToPoint: function, pointToLatLng: function, project: function, unproject: function, scale: function, …} _events: {remove: Array} _fadeFrame: 163 _globalTileRange: {min: Object, max: Object, extend: function, getCenter: function, getBottomLeft: function, …} _initHooksCalled: true _leaflet_id: 83 _level: {el: , origin: Object, zoom: 8} _levels: {8: Object} _loading: false _map: e {options: Object, _container: , _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …} _mapToAdd: e {options: Object, _container: , _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …} _noPrune: false _onMove: function() _tileSize: {x: 256, y: 256, clone: function, add: function, _add: function, …} _tileZoom: 8 _tiles: {145:100:8: Object, 145:101:8: Object, 144:100:8: Object, 146:100:8: Object, 144:101:8: Object, …} _url: "http://xx.xxx.xx.xx:8080/geoserver/wms" _wmsVersion: 1.1 _wrapX: [0, 256] (2) _wrapY: undefined _zoomAnimated: true options: {layers: "fch:OHL-fch", format: "image/png", transparent: true, format_options: "layout:message", attribution: "Algum texto de teste", …} wmsParams: {service: "WMS", request: "GetMap", layers: "fch:OHL-fch", styles: "", format: "image/png", …}

I'm trying to display raster images from GeoServer on a Leaflet map. Simply like this: var map = L.map("mapid").setView([15.6261, -61.44361], 13); var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/wms?', { layers: 'geo:africa' }).addTo(map); Once the web page is open, the map div is totally grayed out. In the network section of inspect page the WMS request to GeoServer is composed of bbox, srs and other data which are all wrong for the layer being requested: http://localhost:8080/geoserver/wms?service=WMS&request=GetMap&layers=geo:xxx&styles=&format=image/jpeg&trasparent=false&version=1.1.1&width=256&height=256&srs=EPSG:3857&bbox=-6834081.824921039,1751325.19206996,-6829189.855110788,1756217.1618802093 While the request should have these parameters (taken from GeoServer): http://localhost:8080/geoserver/geo/wms?service=WMS&version=1.1.0&request=GetMap&layers=geo:xxx&bbox=-30.0044643,-40.00446437384,65.00446439304,40.0044643&width=768&height=646&srs=EPSG:4326&styles=&format=application/openlayers The screen appears as follows: What could be the problem?

Removing programmatically a popup does not work. Popup created OK, as: map.on('click', function(e) {new maplibregl.Popup().setLngLat(e.lngLat).setHTML('MODIFICATIONS').addTo(map);}); Deleting programmatically as: map.on('CloseButton', () => {new maplibregl.Popup().remove();}); Does not work on map.fire(CloseButton);

I have a React JS component that adds a Layer to the Basemap: componentDidMount() { const { client } = this.props; // Craete source, styles and layer with the given props const cartoSource = new carto.source.Dataset("dataset"); const cartoCSS = new carto.style.CartoCSS(style); const layer = new carto.layer.Layer(cartoSource, cartoCSS, { featureClickColumns: [ "geoid2" ] }); // Add them to the client and to the map client.addLayer(layer); client.getLeafletLayer().addTo(this.context.map); I would like to display the geoID when I hover over the polygon, and also highlight it. Having a hard time understanding how this could be done in React.

I want to clip a raster layer inside Leaflet. I want it to clip by a GeoJSON. I couldn't find an effective method to do it. The below code is what I have done so far. Can anyone suggest a method? var map = L.map('map').setView([17.877083, 70.697917], 8); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OpenStreetMap contributors' }).addTo(map); var url_to_geotiff_file = "L2_22.tif"; fetch(url_to_geotiff_file) .then(response => response.arrayBuffer()) .then(arrayBuffer => { parseGeoraster(arrayBuffer).then(georaster => { console.log("georaster:", georaster); var layer = new GeoRasterLayer({ georaster: georaster, opacity:0.9, clip: undifined }); layer.addTo(map); map.fitBounds(layer.getBounds()); }); });

I have a GeoDjango app that uses Leaflet on the front-end. I integrated a search function on the front-end that allows to search for a customer’s location in real time. The code for this works perfectly. However, after the marker is displayed on the map, I am unable to customize it to show a popup message, such as "I'm here," on top of the marker. I’ve tried the following code, but it’s not working as expected. What am I missing? var searchControl = L.esri.Geocoding.geosearch().addTo(map); var results = L.layerGroup().addTo(map); searchControl.on('results', function (data) { results.clearLayers(); for (var i = data.results.length - 1; i >= 0; i--) { results.addLayer(L.marker(data.results[i].latlng)); } L.marker(result).addTo(map) .bindPopup('Hi, I am here. Which services are nearby?') .openPopup();

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'm working on a Leaflet map, currently adding content to my popups. In .bindPopup ([" "]) is there any way to format a paragraph of writing on the backend into multiple lines of code within those quotes? In other words, the following poem is one long quote—is there a way to format it into multiple lines so it's easier to organize headers, paragraphs, etc.)? L.marker([]).addTo(mymap) .bindPopup("Three Rings for the Elven Lords under the Sky, Seven for the Dwarf Lords in their halls of Stone, Nine for Mortal Men doomed to die, One for the Dark Lord on his dark throne, In the Land of Mordor where the Shadows lie, One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them")

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 have a problem with my interactivity and I can't solve alone. When mouse hover are on any point I would like show by console.log any column of my dataset. With my code, only show me cartodb_id. var map; function init(){ // initiate leaflet map map = new L.Map('cartodb-map', { center: [40,-98], zoom: 4 }) L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', { attribution: 'Mapbox Terms &amp; Feedback' }).addTo(map); var layerUrl = 'https://mcnb.cartodb.com/api/v2/viz/85aef586-5c57-11e5-9915-0e73ffd62169/viz.json'; // change the query for the first layer var subLayerOptions = { sql: "SELECT * FROM mcnb_dev", cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}" } cartodb.createLayer(map, layerUrl) .addTo(map) .on('done', function(layer) { layer.on('featureOver', function(e, pos, pixel, data) { // print data to console log console.log("Event #" + data.cartodb_id + ", Name " + data.name + ", Clase: " + data.class+ ",Incertidumbre(m.) " + data.coordinateuncertaintyinmeters ); }); // change the query for the first layer var subLayerOptions = { interactivity: "cartodb_id,class,coordinateuncertaintyinmeters", sql: "SELECT * FROM mcnb_dev", cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}" } var sublayer = layer.getSubLayer(0); sublayer.set(subLayerOptions); // sublayer.infowindow.set('template', $('#infowindow_template').html()); sublayer.on('featureClick', function(e, latlng, pos, data) { alert("Hey! You clicked " + data.cartodb_id); }); }).on('error', function() { //log the error }); } SubLayer featureClick works but featureOver not.

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 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.

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