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.
Related
map.addSource('testLayer', {
'type': 'vector',
'source-layer': 'testLayer',
'tiles': [
'http://localhost:3004/{z}/{x}/{y}.pbf'
],
'minzoom': 0,
'maxzoom': 24,
});
map.addLayer({
'id': 'urban-areas-fill',
'source': 'testLayer',
// Custom styling based on filtering. Help needed here
});
Above pbf tile contains point data, along with height attribute. I want to collect height attribute of all the points within each tile, take an average of it per tile, use it for each individual point's height value (respective to that tile) to perform certain filtering (if else) and assign colours accordingly to display. Also, I want to convert the final rendering of each point as pixel (ie rectangle), and not as a circle. Thanks :)
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.
I'm using mapbox-gl version 0.46.0-beta.1 (With ReactJS).
I've drawn simple fill layers using GeoJSON source.
The coordinates used to draw the fill are
Coordinates Data:
At a specific zoom level, the polygon renders as expected.
Expected Layer:
But on zooming in, the polygon distorts.
Distorted Fill Layer:
The code I'm using is:
`let paint = {
'fill-color': 'Some Color',
'fill-opacity': 0.4,
'fill-outline-color': 'Some Color'
}
let uniqueID = 'someuniqueID';
map.addLayer({
'id': uniqueID,
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [polyCoords]
}
}
},
'paint': paint
})`
We were able to solve the same problem by making sure the first point in the polygon is also the last. For this polygon, you should add the point:
[28.6045067810482..., 77.3860210554725...]
I also had this issue. For a bounding box of coordinates for mapbox, having just the 4 coordinate pairs to create the polygon does create rendering artifacts, directly like above. When making your coordinate bounding box as a polygon, be sure to enter a 5th record, which would be the same as your coordinate at coor[0], where coor is your array of coordinate pairs. You will only notice the weird rendering and re-drawing when zooming, this in fact made it go away for me.
For example:
var coors = [[+sw_lng, +sw_lat], [+sw_lng, +ne_lat], [+ne_lng, +ne_lat], [+ne_lng, +sw_lat]]; //makes a 4 pointed polygon
coors.push(coors[0]); //then continue
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.