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.
Related
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 a 5-floor indoor building on top of a Streets Style map in Mapbox Studio Style editor. It looks almost ok in 3D, all extruded poygons and lines are at the right base height and height with about 3m space betwee the floors.
But I cannot find any base hieght or z-offset option for Symbol types in order to show labels correctly at the place where they should be in 3D. Is there a z offset for labels at all?
It's not currently possible, but has been discussed as a possible enhancement: https://github.com/mapbox/mapbox-gl-js/issues/3993
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.
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.
My reading of the Leaflet and Mapzen documentations suggest that in order to use a custom tile provider with Leaflet, one needs to do just two things:
Specify the tile provider in L.tilelayer(urlTemplateToTileProvider)
Set this provider to MapZen
var urlTemplateToTileProvider =
'http://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=apiKey'
However, when I try this I end up with an empty map which then proceeds to display markers etc correctly. And yet a manual test for a generated tile URL, e.g.
http://tile.mapzen.com/mapzen/vector/v1/all/14/8471/5583.mvt?api_key=apiKey
did in fact download some - unintelligible to me - data.
I also tried using the other two formats mentioned in the Mapzen docs (.json and .geojson) but with exactly the same result. Given that the latter two formats return human readable data, I checked them out for my test tile in my browser and the data is indeed for the area I want to use.
Curiously enough, the Leaflet docs and tutorials request a PNG tile layer (http://{s}.tile.osm.org/{z}/{x}/{y}.png), not raw data.
What am I doing wrong here?
The Tile Layer is for raster tiles (i.e. plain images, like the PNG format for example).
Mapzen delivers vector tiles. To use them with Leaflet, you could use a plugin, e.g. Leaflet.VectorGrid (license)
Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
See the demo, which includes tiles from Mapzen
var mapzenTilesUrl = "https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key={apikey}";
var mapzenVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '© MapZen, © OpenStreetMap contributors',
vectorTileLayerStyles: vectorTileStyling,
apikey: 'KEY',
};
var mapzenTilesPbfLayer = L.vectorGrid.protobuf(mapzenTilesUrl, mapzenVectorTileOptions);
Since you have raw data in the vector tiles, you need to provide the styling spec (vectorTileStyling)