New answers tagged leaflet
1
Leaflet.VectorGrid does not have out-of-the-box support for MapBox stylesheets as of today. There was some preliminary work done on that front, but never finished.
The set of technologies that Leaflet.VectorGrid uses internally (an implementation over `L.renderer) is wildly different from the set of technologies that Mapbox.GL uses (creating GLSL shaders ...
1
There are a couple of simple mistakes here and there.
First, you're missing a comma in the data array, at the next-to-last line:
[52.36962374757598, 4.877988696098328, "1047"],
[52.379754808237486, 4.893186092376709, "690"] // ← Missing comma here
[52.384764624206305, 4.883208274841309, "1567"]
];
Second, you're making a call to Array.prototype.map1 but ...
2
The way you figured it out, it is not possible. If you have the same overlay twice in Leaflet layer control, Leaflet does not distinguish between those two layers despite having different labels.
There are several possible solutions to achieve what you want. One is to have two separate overlays, each with it's own style, but I know from your past questions ...
1
In case one wants to do algorithmically, here is a python snippet:
#!/usr/bin/env python
from json import load, JSONEncoder
from argparse import ArgumentParser, FileType
from re import compile
import sys
from shapely.geometry import Polygon, mapping
from shapely.ops import cascaded_union
parser = ArgumentParser(description="Group (merge) the GeoJSON ...
0
Here is the solution. Just a matter of syntax. Needed to add the word "return" before "getColorFromRed...." in the tile options object.
var vectorTileOptions = {
interactive: true,
// pane: "OverlayPane",
vectorTileLayerStyles: {
layer_name: properties => {
return getColorFromRedBlueRange2(properties.SLDUST % 10);
}
}...
0
I had to run map.invalidateSize()
componentDidMount() {
const map = this.mapRef.current.leafletElement;
setTimeout(() => {
map.invalidateSize();
}, 250);
}
Needed to add timeout before .invalidateSize()
0
Try using this library I have made it for react js https://www.npmjs.com/package/leaflet-linestring-editor. If you want I can create it for vanilla JS also.
install the library
npm install leaflet-linestring-editor --save
Follow the example given in the link
Not able to add example over here due to some issues with JSX code issue in the editor provided ...
3
It seems you are using Leaflet VectorGrid for your task. As described in the docs, you must pass the styling in the following form (replace your_layer_name by the actual name of the layer that you specified in Maptiler):
vectorTileOptions = {
vectorTileLayerStyles: {
your_layer_name: properties => {
return getColorFromRedBlueRange(properties....
1
I used both the location provider and Autocomplete API provided by https://github.com/location-iq/leaflet-geocoder. This autocomplete feature utilises a Search API that returns place predictions in response to an HTTP request. The request specifies a textual search string and optional geographic bounds and works as expected.
0
this will help you out!
.leaflet-popup-tip-container {
background: transparent;
display: none;
}
.leaflet-popup-content-wrapper {
border-radius: 0;
border:3px solid rgba(0,0,0,0.4);
}
1
Leaflet has no built in functionality to specify alternative tile layer url to be used in case of tile loading error from primary url.
A look at L.GridLayer and L.TileLayer objects internals shows that individual tiles are loaded asynchronously by specifying HTML element source for each tile. To specify general alternative url to be used in the case of ...
0
I found out the answer to my question, thanks guys.
Below is the code that works.
var neigh
var neighLyr = new L.GeoJSON.AJAX("data/neighbourhood.geojson",{
style: myStyle,
onEachFeature : function (feature, layer){
layer.on('mouseover' , function(e) {
neigh = feature.properties.pri_neigh;
});...
2
When the user clicks on the map, this event is fired.
the parameter e contains the clicked location.
Your code computes a new coordinate 0.0000001 degrees away from the click coordinate and save the new coordinates in a variable. It does nothing with it (at least not in the the code you have published)
MAYBE the intent is to build a square box, having ...
1
Forgive me if I'm wrong since I'm sorta new to this, but I noticed that you spelled it as L.Icon with a capital I. Maybe the version is newer or something but it doesn't work when i spell it that way. L.icon with a small i works fine for me.
You also used the small case name in the return statement.
1
L.GeoJSON.AJAX object is an extension of Leaflet L.GeoJSON object and so it inherits all it's options (this is not explicitly mentioned in leaflet-ajax plugin docs). This means it's possible to use onEachFeature option to specify function where popup is binded to layer.
In your case this would look something like:
function onEachFeature(feature, layer) {
...
1
Instead of using the L.GeoJSON.AJAX method of loading in my data, I have opted to use $.getJSON as shown here. I was able to then load the popup at a later line using L.geoJSON and add my 'onEachFeature' using .addTo(map). This can be seen in the following code:
<script>
//Create initial map with predefined location.
...
0
You can absolutely have a search feature in your map. Look at TomazicM's comment for a great list. My favorite is the esri-leaflet-geosearch plugin.
Meta: Is it wrong to answer this if TomazicM provided an answer first in his comment?
0
This is all about managing your event handlers. I'm going to remove the HTML into onclick function and do it all in one place in the js:
<div id="map"></div>
What we'll do is add an event listener to the map that listens for a mousedown event. Once that mousedown is heard, we will listen for one of two events on the map: either a mouseup, or ...
1
Can I find out in this handler which LayerGroup the Polyline belongs to?
No, since a Polyline (or any other Layer) can belong to zero, one, or several LayerGroups at once; a Layer doesn't keep a list of LayerGroups it's part of (it can belong to LayerGroups not on the map the layer is in).
You might want to iterate all known LayerGroups and run hasLayer() ...
0
As the error says you have an invalid URL:
url has an invalid value: file:\C:\Program Files (x86)\GeoServer 2.15.1\data_dir\printing
URLs can't have \ in them as it just escapes the next character - so you could add \ before each one so your URL becomes:
file://C:\\Program\ Files\ (x86)\\GeoServer\ 2.15.1\\data_dir\\printing
or go the easy route (and ...
0
Get it to work this way:
Using "GlobalMapper Tiles"
L.tileLayer('path to cache files/**z{z}/{y}/{x}**.jpg')
2
Popup content passed to bindPopup layer method can be any HTML formatted text, which means it can be also a hyperlink.
In your case it could be something like:
polygon.bindPopup('<a href="http://www.mysite.com" target="_blank">RTK Survey Area</a>');
Hyperlink attribute target="_blank" is added so that linked page is opened in new tab/window.
0
Combining Ricky's answer with https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css, we can do something like:
var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.filter = 'hue-rotate(180deg)';
You can also play with saturate() and brightness() to get more colors.
As mentioned in the answer to ...
2
The problem is caused because you are drawing a new version of the selected polygon when the click event happens. Then, when you think you are clicking on the original polygon for the second time you're actually clicking on the newly drawn version of the polygon. This polygon does not have the layerId information like the original layer which is why you get ...
6
You're hitting tiling artifacts. Namely, the labels are being cut between tiles (and the circle markers for the points probably as well); this is easily seen by adding a border to the Leaflet tiles by adding a bit of CSS like .leaflet-tile-loaded { border: 1px dashed red; }, e.g.:
This happens when the rendering engine uses data strictly inside the bounds ...
1
A late contribution, but perhaps it helps...
As an alternative to changing the code in gdal2tiles.py or adding the special flag to leaflet, the file names of the tiles can be changed. This was an easy fix for creating tiles to use with ArcGIS online. Here is a rough bash script that will toggle the z/x/y convention back and forth between OSM/Google-Maps (...
3
If you look at a single tile, the native resolution is 512x512, whereas the default tileSize in the tileLayer API is 256
Try setting the tileSize and zoomOffset:
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={access_token}', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">...
1
You are mentioning group layers in your question and that's actually the right solution for what you want to achieve. You can group several tile layers in one group and add it to the map as single layer.
To have those layers displayed in the right order one above other, map panes, mentioned by @IvanSanchez (https://leafletjs.com/examples/map-panes/), can be ...
2
It looks like the Leaflet-WFST Plugin is a solution to this problem.
var map = L.map('map').setView([0, 0], 2);
var boundaries = new L.WFS({
url: 'http://demo.opengeo.org/geoserver/ows',
typeNS: 'topp',
typeName: 'tasmania_state_boundaries',
crs: L.CRS.EPSG4326,
style: {
color: 'blue',
weight: 2
}
}).addTo(map)
.on(...
0
If you look at docs for filter option of L.geoJSON object (https://leafletjs.com/reference-1.6.0.html#geojson), you will see the following note: Note: dynamically changing the filter option will have effect only on newly added data. It will not re-evaluate already included features. This means that each time you change filter conditions, you have to remove ...
Top 50 recent answers are included
