Hot answers tagged

4

Let me quote the Leaflet API reference about L.TileLayer.WMS: If any custom options not documented here are used, they will be sent to the WMS server as extra parameters in each request URL. This can be useful for non-standard vendor WMS parameters. Thus, instead of ... var layer = L.tileLayer.wms( "http://localhost:8080/geoserver/wms/reflect?...


3

Use this way: var marker = L.marker([46.423611, -86.624417], { title: "This is a test" , }).addTo(map) .bindPopup('<a href="Web Page Adress Here"><h1> Test Title </h1></a><img src="Link to Image" width=100 height=100 />'); To add the same hyperlink to the image use this: '<a href="Web ...


2

To be mathematically strict, the middle point of polyline is not placed in the average of LatLng coordinates of starting and ending point (as suggested in the other answers or using getCenter() method). Polyline in Leaflet draws a straight line over a Mercator projection, so latitudes are deformed. When working on small scale, like the example on this post, ...


2

You can load external files using the Fetch API with async/await alternatively: async function addGeoJson() { const response = await fetch("filepath/filename.geojson"); const data = await response.json(); L.geoJson(data).addTo(map); } addGeoJson();


2

Leaflet (by default) takes the fillColor option given to any instances of L.Path and turns that into a fill attribute of a SVG <path>, as per this fragment of code: if (options.fill) { path.setAttribute('fill', options.fillColor || options.color); path.setAttribute('fill-opacity', options.fillOpacity); path.setAttribute('...


2

I'd just leave jQuery's deferreds behind and switch everything to Promises and fetch()es. function getData() { return fetch(myURL, { /* stuff for post */ }) .then(function(response) { return response.json() }) .then(function(json) { dataLayer.addData(json); }) .catch(function(error) { /* handle errors if any */ } } getData().then(nextFunc); ...


1

If you want do display coordinates of the clicked point, you can use layer popupopen event processing function to get hold of clicked coordinate and set popup content accordingly. Code could the look something like this: let testing = L.geoJson(riverdata, { style: lineStyle, onEachFeature: function (feature,layer) { layer.bindPopup(''); layer.on(...


1

Here are some modification which will help you to get wanted result : var Control1 = L.control.layers(baseMaps, overlayMaps, {collapsed: false}).addTo(map); var Control2 = L.control.layers(baseMaps, overlayMaps, {collapsed: true}).addTo(map); Control2.getContainer().className += ' leaflet-control-layers-disable'; And for the css part change it to : ....


1

According to the docs, you can set the Z Index of layers. Hopefully this does what you need. Keep safe...


1

I have fixed the problem by adding the iconAnchor: [10, 40] property to the icon object: var svg = `<svg width="19px" height="29px" viewBox="0 0 19 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Combined Shape</title> ...


1

You have a race condition problem here, and that's the reason why on some browsers/environments it works and on some doesn't. You have $(document).ready(function() ... function which is called when document is loaded. Within it you call $.ajax( ..., which uses variable kLOC as one of the input parameters for call. But this kLOC variable is filled with valid ...


1

I guess you already defined bound to your map object (like this https://leafletjs.com/reference-1.6.0.html#latlngbounds). Try something like this: L.tileLayer .wms(elm.GIS_LayersAddressMapServer.trim(), { layers: elm.GIS_LayersName, format: "image/png", transparent: true, tiled: true, maxZoom: 25, bounds: map.getBounds()....


1

Here is how to do it: NOTE: You will need to install conda. What this script does Takes in .zip full of grib2 and loops over them Makes some custom changes to the grib2 as a geopandas dataframe (you will need to customise this to your use case) Outputs in geojson with a .index file to make it easier for your front end to read it in. import xarray as xr ...


1

I've got similar problem. When I drag map and then drop it - imageOverlay starts loading only when I add it to map. I ended up with such code (I force loading image before adding it to map): let imageLayer = L.imageOverlay(imageUrl, imageBounds) imageLayer._initImage() imageLayer.once('load', () => { that.map.eachLayer(function (...


Only top voted, non community-wiki answers of a minimum length are eligible