I have a simple polygon on a map and I would just like to adjust the border color width. (geoJSON is external) I was unable to find this in the API manual.
This is a link to my example (and source).
Currently my code for styling the polygon is:
'paint': {
'fill-color': 'rgba(60, 120, 40, 0.4)',
'fill-outline-color': 'rgba(20, 100, 25, 1)'
}
What should I add to give the border more width? Are there other style options for simple polygons that I am missing? (Since I can't find the documentation on this.)
I am posting an image below of my issue - basically the border is well defined in the left side of the image, but if the user changes the view angle it becomes hard to see because the width is too small.
Due to technical reasons for the fill style, you can not specify a border width greater than 1. Use the additional layer with the line style:
map.addLayer({
'id': 'states-layer-outline',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'test.js'
},
'paint': {
'line-color': 'rgba(255, 0, 0, 1)',
'line-width': 4
}
});
[ https://jsfiddle.net/tny37kbu/ ]
Related
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!
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 am using mapbox to try and query all features of the mapbox tileset and return them as geojson. From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures. My tileset only shows up at zoom 14 so I am having trouble querying all the features in the dataset at once and then applying a filter. Is this possible? It stills like querySourceFeatures returns an empty array.
function addLayers() {
map.addSource('plutonew-c03oxi', {
'type': 'vector',
'url': 'mapbox://samtpr.4ehwzn0r'
});
map.addLayer({
"id": "parcels_fill",
"type": "fill",
"source": "plutonew-c03oxi",
"source-layer": "plutonew-c03oxi",
'layout': {
'visibility': 'visible'
},
paint: {
'fill-color': 'blue',
'fill-outline-color': 'gray',
"fill-opacity": ["case",
["boolean", ["feature-state", "hover"], false],
0.5,
0
]
}
});
var features = map.querySourceFeatures('plutonew-c03oxi', {filter: ["==", ['get','ZIPCODE'], zipcode_val]});
From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures
You may have misunderstood. querySourceFeatures allows you to query features that are present within the vector tiles currently loaded and displayable within the current viewport and zoom level. Unlike queryRenderedFeatures they don't have to actually be rendered through a visible layer, however.
In this case it sounds like you're hoping to gain access to features that are not available at the current zoom level, which is not possible.
I see that some maps styles use a layer called "water outline." You can see this layer in this pic as the blue outline next to the water.
I am using the light-v9 style from mapbox and am wondering how to "import" this layer onto my map so that I can have water outlines, too.
Here is how I set my map:
var map = new mapboxgl.Map({
container: this.mapContainer,
style: 'mapbox://styles/mapbox/light-v9',
interactive: true,
maxZoom: 16,
});
And this is how I make a couple style changes:
map.on('load', function () {
map.setPaintProperty('background','background-color', 'rgb(246, 246, 246)')
map.setPaintProperty('parks','fill-color', 'rgb(217, 232, 222)')
map.setPaintProperty('water','fill-color', 'rgb(224, 230, 230)')
...
})
It looks like that layer comes from the Mapbox Streets v7 vector tiles. If you would like to create a new line layer from that source, you would want to query the map's source for the water layer, then use it to create a line layer. For example:
map.addLayer({
'id': 'water-line-layer',
'source': 'composite',
'source-layer': 'water',
'type': 'line',
'minzoom': 15,
'paint': {
'line-color': '#000000',
'line-width': 10
}
}
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.