I have a problem with Mapbox Studio. I'd like to make water layer appear transparent and land area in some color. When I remove or modify the Map {} background to be transparent, all the change to transparent except water which remains to the color it is set to. If i try adding fox example, #countries { polygon-fill: #ff0000 }, it does nothing to fill the land covered area.
I have failed to find any good reference to what would work for the current version of Mapbox. The things that work for tilemill does not seem to work for Mapbox Studio. Any pointers or advises would be greatly appreciated. Thanks!
In Mapbox Studio Classic (desktop application), Map refers to all of the land, and (if you're using mapbox-streets-v5 or mapbox-streets-v6 as your data source) #water has its own selector. If you set Map to some color value, all of the land will be that color. If you set #water to some color value, all of the water will be that color. Keep in mind also that rivers and streams can be styled via the #waterway selector.
Related
I have developed a map using leaflet and leaflet.Markercluster. My problem is, that when the circle, at full zoom, is too near the original circle, it is not clickable.
In the image, you can see the pop-up that is displayed when you click on a circle. However, when you click on the red circle, no pop-up displays. Firstly, let me emphasise, that the red circle is actually the same as the other circles, I have just coloured red in this image, so I can refer to it. Based on this example, and other examples I have, the problem is when the circle is covered by the original circle (barely visible as an orange shade in the centre).
Is there a way to fix this?
Thanks
This is a known issue of Leaflet.markercluster plugin when you use CircleMarkers and they are spiderfied: see also this post on GIS Stack Exchange https://gis.stackexchange.com/questions/259376/reading-attribute-popup-information-from-cluster-presented-points-in-the-map-gen/259538?noredirect=1
This should normally have been fixed by default since 2018 (PR #846, included since v1.3.0), which version of Leaflet.markercluster are you using?
If you still have an issue, please raise an issue on the plugin repo, and provide a reproduction sample.
In the meantime, you can also use the old trick of increasing spiderfyDistanceMultiplier option to more than 1, so that the spiderfication is bigger, and the innermost Circle Marker extends beyond the Cluster icon.
I am generating maps using Mapnik and OSM data (postgres and shapefiles). My problem is that quite a few areas, most of which I believe are considered "landcover", are rendering as the background color. The areas render as background color regardless of zoom level.
For example, in between streets, everything is blue. There are some forests that render as expected, but most of the residential areas are just blue.
I am using Mapnik 3 with a stylesheet. This is running on Ubuntu 16.04.
The images below show what I am generating, and what I would like to see (based on what is on Openstreetmaps).
Any suggestions as to where I should look to solve this problem would be greatly appreciated.
Thanks.
What I'm getting
OSM
The problem was caused by some invalid zoom levels and/or MinScaleDenominator, MaxScaleDenominator values. I have not narrowed it down completely, but by removing those attributes, I'm seeing the land again.
Thank you for the help.
It is an issue with your stylesheet, if it's a custom one I recommend loading it into TileMill and playing around the LandCover and Area colours until you're satisfied.
If you were wanting a relevant point of reference, check out the Stylesheet Configuration to get your own copy of OSMBright, so you can compare the rendering styles.
Update A link for the OSM style look: https://github.com/gravitystorm/openstreetmap-carto
I am getting started on mapbox studio. I want to be able to change the background image based on the zoom level - so far default way to set image is:
Map {
background-color: #land;
background-image:url(pattern/3.png)
}
I have tried adding zoom level conditions as follow.
Map {
background-color: #land;
[zoom>=5] {background-image:url(pattern/2.jpg);}
[zoom<=5] { background-image:url(pattern/3.png);}
}
appreciate if you can share any tips or point to resource and methods I can read.
Cheers :)
Properties in the Map object are global properties that cannot be filtered or changed by zoom level. In order to have different backgrounds at different zoom levels you will need to create a custom polygon layer to act as your background, but with more flexible styling. You would use polygon-pattern-file on this layer instead of background-image.
See the source quickstart tutorial for info about creating a custom source layer and adding it to your style project. You can use the 'bounding box' file from Natural Earth for this; it is a single polygon that covers the entire map.
I am following the source quickstart tutorial. I have followed the tutorial all the way through, and am having trouble displaying the earthquake data (red circles) above the land vectors.
According to the symbol drawing order documentation:
“Higher” layers obscure “lower” ones.
However I'm not finding this to be the case. Please see attached screenshot:
The 'earthquakes' layer is the 'higher' layer, I think. I am using the 'Comic!' base map styles. Since the road lines also appear to 'mask off' the land vectors and show the earthquake data below, I'm wondering if this is causing the issue, but looking through the styles there's nothing obvious I can see.
Thanks for any help.
The documentation is correct, however the comp-op family of CartoCSS properties affect how the colors of different layers interact with each other. In this case, the marker-comp-op: screen from the quickstart example was designed to work well over a darker satellite background, but becomes nearly invisible over solid white.
If you remove the marker-comp-op property or change it to a different compositing operation such as multiply the earthquake markers should show up fine.
I am creating a MapBox project with a geoJson vector layer. I have been using the following example as my guide.
https://www.mapbox.com/blog/neighborhood-mapping-with-dynamic-vector-data-layers/
When I hover over any geoJson feature the stroke is changed to 2 pixels. However the stroke gets clipped by the neighboring features sometimes. I believe this has something to do with how the different features are stacked. So if I hover on a feature which is stacked near the bottom the neighboring features are covering that stroke.
Here is an example...
http://www.vandam.com/chpc/inconsistent_stroke.jpg
Is their a way to set the stroke to be inside of the polygon or a way to bring a feature to the top of the stack when hovering?
Thanks for any help!
By adding the function
layer.bringtoFront();
after setting the hover styling your polygons will come to front.