I have created some custom styles in mapbox studio. They are essentially just the mapbox outdoors style and the mabpox satellite style, each customized, separated out into 2 styles each: the basemap with no labels at all, and only the labels without the basemap. I want to give the user the ability to toggle layers on and off, or set the transparency. You can see the layers here:
Outdoors labels only
Satellite labels only
Within mapbox studio, the tiles show transparency where there are no roads / labels / etc. This is what I would expect. I am then using these layers in leaflet like so:
var mapBoxOutdoorsLabels = L.tileLayer(
'https://api.mapbox.com/styles/v1/slutske22/ck87tp2fq0rq41iqox69g4ko5/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}',
{ accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map1)
var mapBoxSatelliteLabels = L.tileLayer(
'https://api.mapbox.com/styles/v1/slutske22/ck8i7fv4h0h771ipc6mwzwmp4/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}',
{ accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map2)
As far as I can tell, the way I'm importing these two layers is identical. But for some reason, my labels layer for outdoors shows up properly (with transparent background), while my labels layer for satellite shows up with all black background, and you cannot see through to the basemap. The map on the right is the problem:
Here is a working codesandbox of the problem
I'm not sure what I'm doing wrong in mapbox studio or in my leaflet import for the tiles to be generated with black instead of transparent. The way I'm building the two maps are identical, at least as far as I can tell. Any ideas?
Thanks for reading.
The background layers in your labels mapbox style are not transparent.
Here is a codepen with a copy of your style with the background fixed
What I did:
Removing the /tiles/{x}/{y}/{z}/ part from your style's URL and running that in a browser returns the json from mapbox.
There I saw that your background layer color is missing the alpha channel value.
"layers": [
{
"id": "background",
"type": "background",
"layout": {
"visibility": "none"
},
"paint": {
"background-color": "hsl(222, 56%, 4%)" <= SHOULD BE (222, 56%, 4%, 0)
},
I was able to save the json file and upload it as my own style on https://studio.mapbox.com/
there I changed the alpha channel of the background and reduced the opacity of the satellite layer.
It appears that "visibility: none" doesn't work as intended
exported as a new style, I updated the fork with my style and access token
Related
I have some layers in Geoserver that come from a database. In it I load thousands of points that I represent graphically and paint in green or pink depending on whether they are active or not.
The problem is that depending on the zoom level the colors change (they look pink when they should be green).
Where the blue dots are, the circles should be green.
var zonesT = L.tileLayer.wms("https://geoserver.abcd.com/geoserver/abcd/wms", {
layers: 'city:points',
format: 'image/png',
transparent: "true",
attribution: "city"
});
Zoom 1: OK
Zoom 2: Incorrect, the center points are painted pink
Zoom 3: OK
Any suggestion of the error? Thanks
This cite uses tiles from here, but in the initial state they are gray.
How can I fill tiles to make them look like in the example?
I use this code:
map = L.map('map', {zoomControl: false}).setView([..., ...], 15);
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"', {}).addTo(map);
Images:
needful:
original - light all:
There are a few approaches to this problem:
Search for a different tile provider which serves the desired colour scheme
Serve your own tiles after creating your own rendering style
Change the saturation of the tiles on the client side using 2d canvas
Substitute colours in the tiles on the client side using 2d canvas
Apply CSS colour filters to the tiles (by specifying a CSS class name for the tilelayer)
Change the saturation and substitute colours in the tiles on the client side using WebGL
The map at coinmap.org (the site mentioned in the question) uses a CSS filter (filter:saturate(4)) on all the tiles (on the CSS selector .map .leaflet-tile-pane)
You can use the ColorFilter plug-in with ['grayscale:100%'].
See some Demos.
Background
I am playing around with mapbox and uploaded a shapefile from which I created a vector tileset. I loaded the tileset into mapxbox studio to create a custom style. My aim is to solely display the vector tileset with no background layer at all. I am doing this for the reason because I want to overlay the tileset over another raster tileset via leaflet later on. In mapbox studio this looks as follows - you can see the colored vectors and the surrounding transparent area:
Problem:
When I try to visualize both tilesets via leaflet, I am not able to see through the first tileset. Instead I am seeing my colored vector with a black background:
Any chance I can make the tileset background transparent? So the vectors wont be surrounded by a black background anymore but rather by the underlying raster tile set?
Here some code snippets I am using:
<div id='map'>
</div>
<script>
var sat = L.tileLayer('https://api.mapbox.com/styles/v1/xxx/xxx/tiles/256/{z}/{x}/{y}?access_token=xxx', {
attribution: 'Raster tile set'
});
var clc = L.tileLayer('https://api.mapbox.com/styles/v1/xxx/xxx/tiles/256/{z}/{x}/{y}?access_token=xxx', {
attribution: 'Transparent vector tile set'
});
var map = L.map('map', {
center: [48.2, 16.37],
zoom: 10,
layers: [sat, clc]
});
</script>
I am attempting to create a choropleth using the actual polygons included in any one of the base Mapbox maps.
Specifically, I have a geojson structure with a data specific property in the properties object and I'd like to have a different color land fill for all countries, depending on where the fall on a certain scale.
So far the Map class appears to color all land at once:
Map {
background-color: red;
}
And I can't seem to do this:
Map {
[myVar > 0.4] { background-color: pink; }
[myVar <= 0.4] { background-color: green; }
}
I've tried to use my own polygons from my GeoJSON file but they aren't nearly as clean as the Mapbox polygons, even at the highest resolution I've found. Additionally, I want to be able to overlay the labels and other markers that Mapbox base styles have, just on top of my cholorpleth.
I've also tried to color the #admin[admin_level=2][maritime=0] regions, but they don't appear to be polygons and result in something like this:
Thanks in advance!
Assuming Tilemill 0.10.1 and using this GeoJSON (imported as countrydata) and this CartoCSS:
#countrydata {
line-color:#594;
line-width:0.5;
polygon-opacity:1;
polygon-fill:#ae8;
[2014_pop>=100000] {polygon-fill:#yellow;}
[2014_pop>=10000000] {polygon-fill:#orange;}
[2014_pop>=20000000] {polygon-fill:#pink;}
[2014_pop>=200000000] {polygon-fill:#red;}
}
I get:
Notice how color is informed by the 2014_pop property. I would recommend naming properties with a starting letter so that the editor doesn't get confused.
How can I deal with overlapping lines in the Leaflet map library?
I download geoJSON from the server sid and draw it right onto the map. If there are two identical entries, Leaflet draws them twice. This could be fixed by finding exact duplicated on the server side.
That however doesn't work for different datasets sharing some of the same space. As a result parts of both are drawn onto the same spot.
It appears that the lines are being rendered with the default Leaflet Polyline opacity of 0.5. If you were instantiating the Polylines yourself in code, you could override the opacity to make the lines opaque in this manner:
var myPolyLine = new L.Polyline( myPoints, { opacity: 1 } );
The line that would appear on top would then be the line that you added to the map last (one or the other is going to be on top, unless you make them both opaque and the same color). But this may be moot if you are loading in geoJSON directly and don't have control over how Leaflet renders it.