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.
Related
I've been wanting to simply move a marker or a feature using nativescript-community/ui-mapbox.
Problem is I can't figure out how to retrieve the source (using getSource) or the style to then be able to get my feature and update its coordinates.
Do you have an idea how moving things is supposed to be done in this library?
Note that I don't use Typescript and I can't use the marker.update().
Thank you!
Here's a bit of code to explain the problem:
var source = {
'type': 'geojson',
'data': {'type': 'Point',
'coordinates': [50.1, 3.4]}
}
mapbox.addSource('my-source', source).then(() => {
this.map_widget.mapbox.addLayer({
'id': 'layer-1',
'source': 'my-source',
'type': 'circle',
'paint': {
'circle-radius': 10,
'circle-color': '#eee'
}
});
})
Now, I'd like to update the coordinates of the source but I couldn't find a way to look it up back.
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 am importing data from a Google Spreadsheet with csv2geojson and it is drawing nice circles for each location with 'paint', I'd rather have wee pin markers though. What is the best way to achieve this?
function makeGeoJSON(csvData) {
csv2geojson.csv2geojson(csvData, {
latfield: 'Latitude',
lonfield: 'Longitude',
delimiter: ','
}, function (err, data) {
map.on('load', function () {
map.addLayer({
'id': 'csvData',
'type': 'circle',
'source': {
'type': 'geojson',
'data': data
},
'paint': {
'circle-radius': 10,
'circle-color': {
property: 'MarkerType',
type: 'categorical',
stops: [
['blue', '#fbb03b'],
['red', '#223b53'],
['pink', '#e55e5e']
]
}
}
});
If you would like to base the icons off of a category in your spreadsheet, you can do so one of two ways. One way to do so would be to make sure to add a column in your spreadsheet, define the name of the icon you'd like to use within the spreadsheet and upload the icons you would like to use in Mapbox Studio. Another way would be to set each category to a specific icon within your code. If you would like to add an image to your points, please take a look at this add an icon to the map example.
In addition, you will need to change your map.addLayer​ function to reference the appropriate icon. I have included my code below, as well as a screenshot of the final result for your reference. {Icon}references the icon property of my geojson (converted from the Google sheets CSV file), which came from the column in my spreadsheet.
My map.addLayer code:
map.addLayer({
'id': 'csvData',
'type': 'symbol',
'source': {
'type': 'geojson',
'data': data
},
'layout': {
'icon-image': '{Icon}',
'icon-size': 1.5,
'icon-padding': 0,
'icon-allow-overlap': true
}
});
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.
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.