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.
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 am using one of the custom tileset of tilling service in mapbox. I loaded that custom tile layer in map using below code.
map.addSource('california', {
type: 'vector',
url: 'mapbox://xyz.california'
});
map.addLayer({
'id': 'terrain-data',
'type': 'fill',
'source': 'california',
'source-layer': 'california',
'layout': {},
'paint': {
'fill-color': 'black',
'fill-opacity': 0.5
}
});
Above code is filling out the inner area with black color. But I want to fill out the outer area of that polygon. Only one way I know to do that is getting difference of whole map with that polygon by using turf.js. After that I will be able to fill the outside area.
Now the question is how can I get the geojson ploygon array of above added layer? So I can calculate the difference.
You can't easily get the complete geometry of a polygon from a vector tile set, because it has already been cut up into tiles. You would have to either find a way to merge them together, or get your geometry into the front end as a complete geojson first.
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!
I am initializing mapbox map by adding sources and layers linked to them.
mapbox.addSource(MY_SOURCE, {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [],
},
});
mapbox.addLayer({
'id': MY_LAYER,
'type': 'circle',
'source': MY_SOURCE,
'paint': {
'circle-radius': 6,
'circle-color': '#d31467',
},
});
my goal being - I want to have those definitions done once and then - if I need to update the source I just:
mapbox.getSource(MY_SOURCE).setData(geojson);
Sometimes though I need to wipe out all polygons, all points, everything. How can I do that without losing all those definitions? I can only see .removeSource, .removeLayer - which tells me I will actually need to recreate those definitions.
Is there a less destructive way of doing it?
You have two options here:
Hide the layers
map.setLayoutProperty(<layer-id>, 'visibility', 'none');
Remove all features from you sources by setting an empty geojson
map.getSource(<source-id>).setData({
type: 'FeatureCollection',
features: [] // <--- no features
});
Also removing & re-adding the sources and layers might not be the worst option, depending on the frequency you want to do this.
I want to create a layer "my_layer" of points from a geojson file "my_file.geojson". Each point should be colored based on a categorical property "my_property". However, categories are many, so I can not specify a color for each category. I want to assign a random color to each category.
map.addLayer({
'id': 'my_layer',
'type': 'circle',
'source': {
'type': 'geojson',
'data': 'my_file.geojson'},
'layout': {},
'paint': {
'circle-color': { 'property': 'my_property',
'type': 'categorical',
'stops': ?}
}
});
You can add color in your property section in geojson file by
parsing the geojson features and assigning them property color using HashSet to avoid duplicate color in java or python.
and then use
["get","color"]
in circle-color property.