Hot answers tagged

5

Can leaflet be used to show 360 panoramic images? Yes, but the result is probably not what you wanted/expected. For example, I can take this image from the Panellum examples page, which is a full panorama in equirectangular projection... ...add it to a Leaflet map so it repeats horizontally using a bit of Leaflet trickery... var map = new L.Map('leaflet', {...


4

The magic is called UTFGrid and it was developed by Mapbox. It is basically "an encoding scheme that efficiently encodes interactivity data for map tiles". According to the documentation, for each map tile there is a json storing each pixel values as long strings. Then you can easily retrieve the information when interacting with that map tile ...


3

You should combine using the logic operator AND like below var condition1 = new L.Filter.EQ('city', 'Perm'); var condition2 = new L.Filter.EQ('city', 'Quest'); var combinedCondition = new L.Filter.And(condition1, condition2); console.log(combinedCondition.toGml());


3

This is possible, but there is no out-of-the-box solution. You have to create your own plugin, which combines leaflet-tilelayer-mask and Leaflet.TileLayer.ColorFilter plugins. New plugin, let's name it L.TileLayer.ColorFilterMask, is created by extending L.TileLayer.ColorFilter instead of L.TileLayer when creating new mask plugin. Code in leaflet-tilelayer-...


2

There are two reasons why your code cannot work. If you looks at the plugin docs at https://github.com/frogcat/leaflet-tilelayer-mask, you'll see that .setCenter method parameter should be in pixels relative to map container, so you have to use map.map.latLngToContainerPoint method to convert geographical coordinates to pixel coordinates. The second problem ...


2

I have found the solution. IE11 considers my application as an intranet (as it is located on my computer) And for intranet sites, IE11 works in IE7 compatibility mode (why ???). So, just by disabling compatibility mode for intranet sites (in tools/display compatibility modes), it solved my problem. Thank you for all your answers who helped me progressing on ...


2

Use map's .latLngToContainerPoint method to convert lat,lng coordinate to container pixel coordinate, subtract pixel offset (which is zoom independent) and convert pixel coordinate back to lat,lng with .containerPointToLatLng method: private createDropZone() { const mapBounds = this.map.getBounds(); const x = mapBounds.getSouthEast(); const p = this....


2

If I have understood this right: You pull a list of addresses from somewhere called projectUrl For each of those addresses you perform a call to a Geocoding API (geoapify in your specific case) Each of those geocoding calls is asynchronous You want to have a L.Marker for the result of each of those geocoding calls (i.e. one L.Marker per address) (Your ...


1

default behaviour This issue has been patched by the owner of the repo this afternoon. now the attributions are set by default on the geemap.Map. Manually customize controls If you're using custom controls you can add it manually through: import geemap m = geemap.Map(center=[40,-100], zoom=4) m.clear_controls() m.add_control(geemap.AttributionControl(...


1

I presumed there would be an easy way to convert FeatureCollection to GeoJSON and load up as a layer in ipyleaflet but it is not straightforward. As far as I can see there is no direct way of doing this. However, as a workaround, you can get a download url to your FeatureCollection (JSON is in the options but it did not work for me but CSV did) and then read ...


1

Using the zIndex property resolved the issue: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png',{ zIndex: -1 }).addTo(map);


1

I'm not familiar with mapbox-gl-leaflet plugin, but it seems it's not sufficient to display ArcGIS Esri vector layers. ArcGIS has it's own Esri Leaflet Vector Tile plugin (https://github.com/Esri/esri-leaflet-vector), which you have to use on top of mapbox-gl library. ArcGIS map you are referring to consists of two layers. One is World Imagery and the second ...


1

Since html option of L.divIcon can be any html code/element, you can wrap your desired content with <div> tag with required aria-label attribute: pointToLayer: function (feature, latlng) { return L.marker(latlng, { icon: L.divIcon({ className: feature.properties.type, html: '<div aria-label="' + feature.properties.name + '&...


1

It's possible to reuse Leaflet's built-in polygon-clipping features and even hook into the internals of Leaflet to actually reuse the clipped polygon data that gets passed to a L.Renderer every time a L.Path is about to be re-drawn. It's a bit hackish, it requires knowledge on how to extend Leaflet and reading the Leaflet source code (specifically about L....


1

After feature layer is loaded you can use layer's .eachFeature method to loop through features and get center of each feature: let roomFeatures = L.esri.featureLayer({url:"https://mymapserver/../interiors/16"}); roomFeatures.on('load', function() { roomFeatures.eachFeature(function(layer) { let center = layer.getCenter(); console.log(...


1

I solved this based on this mapbox use point result from geocoding together with the comment from @TomazicM. get the bbox from the geocoder result: var geocoder_result = e.result.bbox; Use fitbounds to fit the map the the bbox: map.fitBounds([ [e.result.bbox[3], e.result.bbox[0]], [e.result.bbox[1], e.result.bbox[2]] ]) @...


1

As @TomazicM says, this relates to the zIndex of panes. qgis2web creates a separate pane for each layer, and assigns them zIndex values to ensure that layer order from QGIS is preserved. The issue here is that other visible elements - in this case, extra plugin lines - manage their own panes/zIndex values. If this is a problem with an unedited export from ...


1

If desired functionality is to save current location with save button when location is available from L.control.locate control, it makes sense to show save button only when L.control.locate is activated. Activation of control and consequent retrieving of current location can be detected through standard map locationfound event. Problem is detecting ...


1

I think the easy way is, $('div').on("mousedown", L.DomEvent.stopPropagation); It will stop the dragging of the map inside the div element.


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