I want to make hoover effect on my map created in Mapbox Studio. I've added a SHP feature as a fill with initial opacity set in "style editor" to 0.5. How can I make hoover effect that will change that opacity to 1 when mouseon?
I've been using this example (https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) but data in this example is coming from external GEOJOSN. I want to use my layer already styled in Mapbox Studio. Is it possible? Thank you
Yes, this is possible to achieve by referencing the name of the source which you have already added in Mapbox Studio, rather that using Map#addSource and Map#addLayer as shown in the example. That is, you can replace 'states' in the example with the name of your source added to your map style with Mapbox Studio.
Thank you for reply. Where do I add in that case command line defining "true" and "false" values for "fill-opacity" when hover event appears?
If I don't use Map#addSource and Map#addLayer, there is no line to put new opacity values. I am really new at this so pleas understand me.
map.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': '#627BC1',
**'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
1,
0.5**
]
}
});
and then, that case is recalled in map.on mousemove event:
map.on('mousemove', 'state-fills', function(e) {
if (e.features.length > 0) {
if (hoveredStateId) {
map.setFeatureState(
{ source: 'states', id: hoveredStateId },
**{ hover: false }**
);
If I just replace layer "states" for my layer, lets call it "PollyGon", I can't see there to define opacity values? Thank you!
Related
I am using mapbox gl js to create some maps. To style the map, I use the following code;
// add a styled map to the contianer id map
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/bogdanvectuel/cjq1fxndm5qr02roa06jcfb61',
});
Above is a public map style from bogdanvectuel. I wanted to changed to my own style but when I change over to a mapbox offered style like the outdoors one, all of a sudden all my skiareas points disappear which is defined as follows;
/** Add ski areas but just the center point as source / dot **/
map.addSource('aa_winter_spoorts_points', {
type: 'vector',
// aa_winter_spoorts_points
url: 'mapbox://username.aa_winter_spoorts_points'
});
/** Add ski areas but just the center point as layer / dot **/
map.addLayer({
'id': 'aa_winter_spoorts_points',
'type': 'symbol', // background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade, sky.
'source': 'aa_winter_spoorts_points',
'source-layer': 'skiareas',
'layout': {
'visibility': 'visible',
'icon-image': 'airfield-11',
'icon-allow-overlap': true
},
});
I cannot understand why that would happen. Any pointers appreciated.
When you use addSource() and addLayer(), you are manually adding the source and layer to the map's style. Changing to a different style after map load essentially starts over from scratch. Using setStyle() will clear the existing style, so anything you added after map load would need to be added again.
One approach may just be to move your addSource() and addLayer() calls to a new function like addCustomSourcesAndLayers(). You could then call that after the first map load, and again after setStyle()
You can see this in action in geojson.io. We allow you to switch to a different style and then re-draw the user-defined layers after the new style loads.
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!
If you simply add a marker, you get a standard marker:
https://docs.mapbox.com/mapbox-gl-js/example/add-a-marker/
If you use addLayer() there appears to be no description anywhere about how to use these standard markers:
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol
map.addLayer({
'id': 'POIs',
'type': 'symbol',
'source': 'POIs',
'layout': {
'icon-image': 'marker-15', // this is a custom image... I just want a default, normal marker
'icon-allow-overlap': true
}
});
It's really easy to add special symbols, but I just want default markers. How do I do this with addLayer()
Hugely disappointing news. Somehow it's just not possible:
https://github.com/mapbox/mapbox-gl-js/issues/656
I guess you just have to iterate over whatever your data is and use addMarker() for each.
I have custom sales territories that is build on group of zip codes.
How can I show this territories with different colors?
If the data for your custom sales territories is in a GeoJSON format, you can follow this example from the Mapbox GL JS documentation, which shows how to add a GeoJSON polygon to the map with a custom color. As shown in the linked example, you could add a source and layer for each of your sales territories, and then specify a color for each territory via the paint property of the layer object being added. So, for each of your territories, you would use the following code:
map.addSource('territory_name', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [ list_of_coordinates_defining_territory_boundaries ]
}
}
});
map.addLayer({
'id': 'territory_name',
'type': 'fill',
'source': 'territory_name',
'layout': {},
'paint': {
'fill-color': 'hex code of color to be used for this territory',
'fill-opacity': 0.8
}
});
Alternatively, you could upload your data as a tileset in Mapbox Studio and add said tileset as a layer to a custom map style, as described in this tutorial. The exact steps for this option are a bit more dependent on your underlying data format, but the Mapbox Studio Manual is an excellent resource for guidance on using Studio to create highly customized maps based on your own data.
When I add a marker to my mapbox gl script, it's positionned in a way that its center indicates the location, not the base. As a consquence, the marker seems to indicate an incorrect location.
Please see the screenshot
Is there a way to change the part of the image that is used as the base for the coordinates?
Thanks in advance!
Oktawia
Use the icon-offset layout property to offset the icon from your coordinates
map.addLayer({
"id": "pointclick",
type: 'symbol',
source: 'pointclick',
"layout": {
"icon-image": "{marker-symbol}",
"icon-size":1,
"icon-offset": [0, -13]
},
"paint": {}
});