We Keep Coding

setFeatureState not updating a value in Mapbox

I am trying to change the color of a marker which is a circle, that is being painted using the paint property on a layer.
Following this tutorial:
https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
I have set the circle-color to be dependent of a feature-state:
map.addLayer({
id: "singles",
type: "circle",
source: "users",
filter: ["!has", "point_count"],
paint: {
'circle-radius': {
'base': 10,
'stops': [[5, 20], [15, 500]]
},
'circle-color': ["case",
["boolean", ["feature-state", "hover"], false],
'#ddffc8',
'#ff0000'
],
}
});
Then when somebody hovers over a sidebar, I want to update the feature-state and change the color:
function highlightMarkersOnHoverOnSidebar (markers, map) {
let marks = markers
Array.from(document.querySelectorAll('.sideBarItems')).map( (x, i) => {
x.addEventListener('mouseenter', function(){
map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: true});
}, false)
x.addEventListener('mouseleave', function(){
map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: false});
}, false)
})
}
However, nothing happens when i hover the sidebar element.. and it doesnt even throw an error.
Is there anything im missing? thanks.

I also run into this issue.
It seems like you need an id at the feature level in your geojson. Not in the properties:
{
"type": "FeatureCollection",
"features": [
{
"id": 4459,
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
8.64543,
50.163105
]
},
"properties": {
"id": "NOT HERE",
"name": "Test",
"foo": "bar",
}
}
]
}
Moving the id to the feature solved the issue.

Are you using featureCollection in geoJson? That caused some problems for me.

mapbox: disable one feature rendering

i want to disable rendering of only one extruded building in my case, i looking for something like this
map.on('load', function () {
map.addLayer({
'id': '3d-buildings',
'source': 'mapbox',
'source-layer': 'building',
"filter": ["!=", "id", "12345"],
'type': 'fill-extrusion',
'paint': {
'fill-extrusion-color': '#bbb',
'fill-extrusion-height': 10,
'fill-extrusion-base': 0,
'fill-extrusion-opacity': 1
}
});
})
following expression is incorrect:
"filter": ["!=", "id", "12345"]
mapbox-gl-0.44.1

The filter retrieves the property value from the properties of the current feature. Make sure that the building id is in the properties:
{
"type": "Feature",
"properties": {
"id": "12345",
"base_height": 30,
"height": 40
},
"geometry": {...}
}
}
Upd: Gets the feature's id, if it has one: ["id"]. And, of course, you need to take into account the possible type of identifier:
"filter": ["!=", ["id"], 12345]
For example click on the building to hide it: [ https://jsfiddle.net/yedg641a/ ]

Is it possible to extract style information from GeoJson for an openlayers javascript map?

I have a geojson file structured like this:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"marker-color": "#4620dd",
"marker-size": "medium",
"marker-symbol": "park",
"name": "State Park"
},
"geometry": {
"type": "Point",
"coordinates": [-76.95266723632812,
39.07974903895123
]
}
}]
}
I am able to create a vector layer from this geojson in an openlayers map, but unable to utilize the styling properties. Should I use a custom style function to do this?

Yes, for sure:
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: function (feature, resolution) {
console.log(feature.getProperties()); // <== all geojson properties
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({ color: feature.get('marker-color') })
})
})];
}
});
https://jsfiddle.net/jonataswalker/uvopawmg/

Symbolize line based on attributes

I am trying to use PolyLineDecorator with Leaflet but I've hit a snag that I can't figure out even forgoing PolyLineDecorator when it comes to symbolizing a path/line based on attribute data.
var polyline = L.polyline([...]).addTo(map);
var decorator = L.polylineDecorator(polyline, {
patterns: [
// defines a pattern of 10px-wide dashes, repeated every 20px on the line
{offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
]
}).addTo(map);
Works great for me however, I have 20 lines in a single GeoJSON file and i'd like to symbolize the lines based on the Name field in the JSON file. I can't seem to find an example anywhere covering this. Can someone point me to any relevant examples or documentation? I feel like there has to be a way vs exporting each line as its own GeoJSON file.
Thanks for any help.

You should use GeoJson onEachFeature() method for this. Let's asume that your geoJson structure is:
var geojsonFeatures = [
{
"type": "Feature",
"properties": {
"name": "Trail 1",
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
},
{
"type": "Feature",
"properties": {
"name": "Trail 2",
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
}
];
You can access feature's name properties by feature.properties.name:
L.geoJson(geojsonFeature, {
onEachFeature: function (feature, layer) {
if (feature.properties.name === '') {
L.polylineDecorator(layer, {
patterns: [
{offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
]
}).addTo(map);
} else {
L.polylineDecorator(layer, {
patterns: [
{offset: 0, repeat: 30, symbol: L.Symbol.dash({pixelSize: 20})}
]
}).addTo(map);
}
})
})

Mapbox GL js available icons

I am rewriting a web application from Mapbox.js to Mapbox GL js.
Using the standard 'mapbox://styles/mapbox/streets-v8' style, where can I find a list of all working marker icons?
Here is my code:
m.map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": ["-75.532965", "35.248018"]
},
"properties": {
"title": "Start",
"marker-symbol": "entrance",
"marker-size": "small",
"marker-color": "#D90008"
}
}
}
});
m.map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15", //but monument-15 works
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, -1.6],
"text-anchor": "top"
}
});
I read that all Maki icons should be made available for styles that don't have icons as a default:
https://github.com/mapbox/mapbox-gl-styles/issues/241
But most of them don't work.
Also there is the problem with the sizes - for Maki they were -small, -medium and -large, and now I see -11 and -15.
I just need to use some basic marker icons.

We're still sorting out the final implementation details for the default icon set and will document that set thoroughly once it has been decided upon.
Until then, you can see exactly what icons are available for a given style by peeking at the mapbox-gl-styles repo in the sprites folder.

Since that issue was closed, all maki icons are now natively available in mapbox-gl.js. You can see all available at https://www.mapbox.com/maki-icons/. You can also multiply their size using the icon-size paint property, though this may result in pixelation. There are still some hitches, like the icon-color property not yet working, so you'll need to edit, recolor, and republish icons for now. (issue #3605).