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.
Related
A related question on using leaflet states that one can use the tilesize parameter to support 512x512 tiles: Street labels in Mapbox Tile Layer too small:
It looks like you have 512px sized tiles, but mapping the Earth as if
they were 256px sized.
Therefore you need a combination of tileSize and zoomOffset options on
your Tile Layer to compensate for these settings, and retrieve the
correct view with readable sized text on the tiles
How can do this using the folium library for Python? Their official docs don't seem to contain any mentions of a tilesize parameter.
I'm trying to show a custom non-geographical map with CRS.simple as explained here:
In a CRS.Simple, one horizontal map unit is mapped to one horizontal
pixel, and idem with vertical
However, I wish to use an SVG vector image as an overlay, but I don't get how the map unit is decided in this case, since the vector images don't really have a resolution?
Also, how could set the CRS origin's location to a specific point?
Thanks for helping
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
In mapbox_ios:
1. About MGLFillStyleLayer and MGLLineStyleLayer, how to set different styles (color, width, dotted line) for individual features.
A scene: if it is a separate polyhedron with no connection between the two surfaces in different places, but it is a feature, if I want to add more polyhedron to modify the graph (add a point and connect the two sides), how to modify the graph?
Hope to get help, thank you!
To answer your first question, you can style individual features within a style layer based on feature attributes.
Get started by adding the layers to your map. You could create your source, then style the layer's color based on the value in the feature attributes. Use the lineColor property for your MGLLineStyleLayer and fillColor to change the color of your MGLFillStyleLayer.
For example:
let layer = MGLLineStyleLayer(identifier: "layer", source: source)
layer.lineColor = NSExpression(forKeyPath: "color")
style.addLayer(layer)
You can also create a dictionary with possible attribute values and the color you would like to use as values. This example shows that approach by using icon images.
I am building a map and want to use the leaflet markercluster plugin to cluster any markers that intersect visibly (the icons overlap each other). I can't seem to figure out a way to check whether the markers icons intersect though.
I've examined the documentation and the Marker objects. The marker object has no "bounds" object and has no function to return the bounds of the icon.
Yes, it's possible.
This is implemented in some Leaflet plugins, like Leaflet.LayerGroup.Collision - the technique involves fetching the computed style of each icon's HTML element to get the actual size in CSS pixels, offset those numbers by the relative pixel position of the marker's LatLng, and using a rtree data structure to speed up the calculation of the overlaps. Do have a look at the complete source for LayerGroup.Collision plugin.
Note that this technique only takes into account the rectangular bounding boxes of the icons; while it would be possible to check for the individual transparent pixels, that would involve more complex data structures and a different technique to fetch the opacity of each pixel.