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.
Related
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.
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'm using Mapbox GL JS, with a Mapbox Streets base layer. I have added a polygon layer with white borders and a transparent fill, but I'm finding it hard to read the basemap labels underneath the polygon layer. See how the labels are covered by the white borders:
Is there any way I can make sure the labels are on top of the polygon layer, or at least not obscured by it?
My code looks like this:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-2.839, 54.579],
zoom: 4
});
map.on('load', function () {
map.addSource('constituencies', {
'type': 'vector',
'url': 'mapbox://pcsu.xxx'
});
var constituencyLayer = map.addLayer({
'id': 'constituencies',
'source': 'constituencies',
'source-layer': 'constituencies',
'type': 'fill',
'paint': {
'fill-color': 'rgba(162,181,205,0.6)',
'fill-outline-color': 'white'
},
'layout': {
'visibility': 'visible'
}
});
Have a look at this Mapbox example and use the second argument of map.addLayer(layer, [before]). If this layer before exists, the new layer will be placed before/below it. I think the argument naming is a bit confusing here.
The name of the lowest label layer depends on the style. Most of the time you're looking for housenum-label. There's also a discussion in the Mapbox github issues how to ease this process, e.g by introducing placeholder layers.