I'd like to render circles at only the ends of LineStrings, ideally without creating a separate duplicative data source.
I have LineStrings representing trails from the OpenMapTiles project. They render fine using the line layer style type, but when I try to render with the circle layer style type, it renders a circle at every vertex, and not just the ends. Is there a filter expression I could use to show these circles at only the ends?
Here's the style layer that is rendering the points in the image below:
{
"id": "road_path_pedestrian_trail_ends",
"type": "circle",
"source": "openmaptiles",
"source-layer": "transportation",
"minzoom": 13,
"filter": [
"all",
["==", "$type", "LineString"],
["!in", "brunnel", "bridge", "tunnel"],
["in", "class", "path", "pedestrian"],
["in", "subclass", "path", "footway"]
],
"layout": {"visibility": "visible"},
"paint": {}
}
As far as I'm aware, there is no way to distinguish a line endpoint from any other vertex.
You could maaaaaybe get something of the effect you want by rendering two lines, one with line-end: round, a different color, under the other line which has line-end: butt. You'd get a tiny half-circle thing which may be better than nothing?
Related
I have a mapbox map with custom coffee mug icons (not maki icons). I want to give the icons a halo conditionally based on a data field of each point. This works, but since the icon is uploaded as a png, it gets treated as a rectangle, even though the image is of a coffee mug which is mostly round. So when you add a halo, it gets added around the perimeter of the bounding rectangle of the icon. Here's a picture of two of these icons, one that has a halo because it meets the "CONDITION" and one that doesn't.
How can I make this halo wrap around the border of the coffee mug icons, like it does for maki icons? Here is the relevant part of my style definition:
layout: {
'icon-image': 'cafe-icon'
},
paint: {
"icon-color": "#1a7a08",
"icon-halo-color": "#e4be8b",
"icon-halo-width": ['case', ['==', ['get', 'CONDITION'], true], 4, 0]
}
Also, here are the mapbox dependencies in my package.json file:
"#mapbox/mapbox-sdk": "^0.12.1",
"mapbox-gl": "^2.1.1",
"#mapbox/mapbox-gl-geocoder": "^4.7.0"
And here is the coffee mug icon I'm using for now:
According to Mapbox-gl-js documentation couple of style properties can only be applied to SDF Enabled Images and one of them is "icon-halo-width" also.
READ HERE
Which says:
Four style specification properties can only be used with SDF-enabled images: icon-color, icon-halo-color, icon-halo-width, and icon-halo-blur.
I downloaded a demo png of "shop-15.png" from this link and applied the icon-halo-width to 10 and style get applied.
Code:
//downloaded
var accessible = "http://localhost:3000/shop-15.png";
map.loadImage(accessible, function (error, image) {
if (error) throw error;
map.addImage('accessible', image, { sdf: true });
map.addLayer({
"id": "iconLayer",
"type": "symbol",
"source": 'maine',
"layout": {
'icon-allow-overlap': true,
"icon-image": "accessible",
"icon-size": 3,
},
"paint": {
"icon-color": "white",
"icon-halo-color": "red",
"icon-halo-width": 10
}
});
});
Screenshot:
How To Create SDF Images?
HERE is the link where I combined few of my research.
Thanks!
I am using mapbox to try and query all features of the mapbox tileset and return them as geojson. From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures. My tileset only shows up at zoom 14 so I am having trouble querying all the features in the dataset at once and then applying a filter. Is this possible? It stills like querySourceFeatures returns an empty array.
function addLayers() {
map.addSource('plutonew-c03oxi', {
'type': 'vector',
'url': 'mapbox://samtpr.4ehwzn0r'
});
map.addLayer({
"id": "parcels_fill",
"type": "fill",
"source": "plutonew-c03oxi",
"source-layer": "plutonew-c03oxi",
'layout': {
'visibility': 'visible'
},
paint: {
'fill-color': 'blue',
'fill-outline-color': 'gray',
"fill-opacity": ["case",
["boolean", ["feature-state", "hover"], false],
0.5,
0
]
}
});
var features = map.querySourceFeatures('plutonew-c03oxi', {filter: ["==", ['get','ZIPCODE'], zipcode_val]});
From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures
You may have misunderstood. querySourceFeatures allows you to query features that are present within the vector tiles currently loaded and displayable within the current viewport and zoom level. Unlike queryRenderedFeatures they don't have to actually be rendered through a visible layer, however.
In this case it sounds like you're hoping to gain access to features that are not available at the current zoom level, which is not possible.
Hi I have a problem with Asymmetrik/ngx-leaflet geojson interpretation.
My geojson is automatically generated with color and opacity corresponding to the map information. Each geojson is a FeatureCollection with multiple Polygons differently styled.
I've tried different options, I've found to set style of the Polygons, but non of them seems to work.
Example geoJson:
{
"type":"FeatureCollection",
"features":[
{
"geometry":{
"type":"Polygon",
"coordinates":[
[...]
]
},
"type":"Feature",
"properties":{
"style":{
"color":"#ff0000",
"weight":0,
"opacity":0.2
}
}
}, ... ]}
I've been trying multiple options that seems to work for people. Also there is nothing on styling inside geojson in the ngx-leaflet docs.
How should I set the styling above to make ngx-leaflet display proper color, stroke and opacity?
ngx-leaflet doesn't do anything to manipulate the layers you add to the map. So, it's up to you to provide the style options when you create the features.
E.g.,
let geoJson = {...};
let options = { "color": "#ff7800", "weight": 5, "opacity": 0.65 };
L.geoJSON(geoJson, options).addTo(map);
This example was taken from here: http://leafletjs.com/examples/geojson/
Edit: I reformatted the question as it was pointed out to me that the problem is not in the Mapbox API.
As of a few days ago an application using mapbox matching API coupled with leaflet.js started drawing polylines on the other side of the planet.
While the path it self looks as it should be, leaflet drew it on another continent.
The Mapbox Matching API returns the response following GEOJson standard as:
{
"code": "Ok",
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": "e`s`YmyazuAg`#y]uo#ej#eQcOkFkEyCeCaYmUuFoMkWgOo[_ReGqDoGyDmVaPaU|RoDlDsa#z`#sTdSXJf#j#??Jr#Mp#ML[Z}#ZiAHgAK]MaJzJsUbWkSxRyHpHuLhLuFzFqDrDq[`\\oPrPyK|KmU|TuLzKyClCr#ZZf#Fj#Ij#e#b#zn#fZ}Zf]gCdKmHxQErC[jV",
"properties": {
"confidence": 0.45413768894813844,
"distance": 1366.4,
"duration": 243.3,
"matchedPoints": [
[13.658131, 45.532583],
[13.659851, 45.534127],
[13.661445, 45.535438],
[13.662397, 45.535398],
[13.663582, 45.534237],
[13.666378, 45.531441],
[13.666457, 45.529215]
],
"indices": [0, 1, 2, 3, 4, 5, 6]
}
}]
}
Using the code below to draw the layer with leaflet.js results in a polyline drawn on a wrong position.
L.mapbox.mapmatching(geojson, options, function (error, layer) {
layer.addTo(map);
layer.setStyle({
color: '#3c8dbc',
weight: 4,
opacity: 0.8
});
//fit bounds to added layer
map.fitBounds(layer.getBounds());
The result being:
While the polyline it self is as it should be, the position is not.
I speculate the problem is that leaflet expect the coordinates to be in format [latitude, longitude] while the Mapbox matching API returns GEOJson format namely [longitude, latitude].
Should I manually switch the coordinates of the response before drawing it or am I just doing it wrong?
Thanks.
Edit 2 : It appears the problem is in fact in different formats. More about it can be found in this post
Changing the order of the coordinates in the returned object is very tedious hence an elegant solution to this would be greatly appropriated.
What exactly does a layer represent in the Leaflet Mapping Library?
Conceptually, to me a layer would represent a single tier of some type of feature or object; for example all image tiles representing the base level map would be represented on a single layer, a set of polygons representing states in the US may be on their own separate layer.
Specifically looking at L.GeoJSON.addGeoJSON(geojson), it reads that each new polygon created is placed in it's own layer (and then maybe merged with the layer you're calling the method on?). My use case is that I need to add many geoJSON objects one at a time and want to ensure I'm not creating many unnecessary layers (or if I am, if this is actually a bad thing).
Thank you.
In Leaflet anything that can be added to the map is a layer. So polygons, circles, markers, popups, tiles are all layers. You can combine layers in a L.LayerGroup (or FeatureGroup), if you for example want to treat a set of polygons as a single layer. So maybe your interpretation of layers matches better with what is modelled by L.LayerGroup in Leaflet.
L.GeoJSON is a LayerGroup (specifically a FeatureGroup) that is initialized from GeoJSON. Each new polygon is added to the L.GeoJSON LayerGroup using addLayer, which is the method for adding anything (that is a layer) to a LayerGroup. It does not create a new layer for each polygon (other than the L.Polygon which is already considered a layer). It only creates new FeatureGroups (LayerGroups) for a GeometryCollection and MultiPoints, which (I assume) is in order to preserve the structure from the GeoJSON.
If you want to add geoJSON objects to the same LayerGroup one at a time, you can just call L.GeoJSON.geometryToLayer to convert your GeoJSON object, and then add it to your LayerGroup using L.LayerGroup.addLayer.
As you mentioned, "layer" is a concept coming from a wider scope than simply the Leaflet implementation.
It is an abstract concept of "collection" in the context of Geospatial data.
A tier is also an alternative name, but I see "layer" being used more, in several standards & technologies.
The first lines here describe it simply enough:
https://doc.arcgis.com/en/arcgis-online/reference/layers.htm
In the context of Leaflet you can have as many layers as you want and it is not necessary to "spare" them.
More than thinking to optimization of the technical implementation, I'd put effort more in trying to identify "layers" (according to your business domain) as logical-groups of geospatial data that belongs together.
Specifically looking at L.GeoJSON.addGeoJSON(geojson), it reads that each new polygon created is placed in its own layer (and then maybe merged with the layer you're calling the method on?).
one Leaflet layer => one GeoJSON Feature (or set of Feature, given that FeatureCollection extends Feature).
there will be no merge: Leaflet will replace the whole layer with newly generated geospatial data, when you add GeoJSON data. Merging might be possible with custom implementation, but I don't know if it is advisable.
My use case is that I need to add many geoJSON objects one at a time and want to ensure I'm not creating many unnecessary layers (or if I am, if this is actually a bad thing).
It is not a bad thing per-sé, to have many layers; as long as concrete performance concerns don't arise.
If you want to reduce the number of layers, then put effort in modelling the structure of your GeoJSON so that most of the related objects are contained in a single GeoJSON/Layer (grouping by domain), instead of having a layer for each individual object (grouping by technical implementation).
E.g. a layer related to "risk areas"
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"title": "virus spread area",
"risk": "high"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.521484375,
30.89279747750818
],
[
113.89251708984374,
30.64972717137329
],
[
114.28253173828124,
30.21635515266855
],
[
114.521484375,
30.89279747750818
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "Wuhan Institute of Virology",
"risk": "high"
},
"geometry": {
"type": "Point",
"coordinates": [
114.35462951660156,
30.543338954230222
]
}
}
]
}
instead of having one layer for the Polygon:
{
"type": "Feature",
"properties": {
"title": "virus spread area",
"risk": "high"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
114.521484375,
30.89279747750818
],
[
113.89251708984374,
30.64972717137329
],
[
114.28253173828124,
30.21635515266855
],
[
114.521484375,
30.89279747750818
]
]
]
}
}
and a separated (but actually related) one for the Point:
{
"type": "Feature",
"properties": {
"name": "Wuhan Institute of Virology",
"risk": "high"
},
"geometry": {
"type": "Point",
"coordinates": [
114.35462951660156,
30.543338954230222
]
}
}
(imho) both features conceptually belong to the same Layer.