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)
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.
Mapbox studio has a style with an Albers projection (https://www.mapbox.com/elections/albers-usa-projection-style):
I need to use another style with waterbodies like this:
but in the Albers projection. When I start with the Albers style, and then add water, they of course don't line up:
How can I get the tile I used in my waterbody example to be in the Albers project? I ultimately am wanting to use it in a leaflet map and add markers to it (using R).
The example you cited above is actually showing a workaround to make data appear as if it is projected in Albers but it's really just altered polygons being displayed in webmercator. This was a workaround/hack to get the desired visual using the tools available at the time. If you want to do the same workaround for your water bodies data so it will appear this way in leaflet, follow the steps of the tutorial which uses third party tools (QGIS, Dirty Reprojectors, Tippecanoe)
Mapbox has since added support for non-webmercator projections, which means you don't need to modify your source data to reproject them for use in a mapboxgl-js map: https://docs.mapbox.com/mapbox-gl-js/example/projections/
Disregard the earlier example, and just change the projection to Albers in Mapbox Studio.
Bear in mind that changing the projection in Mapbox Studio does not actually modify your data, it just renders it differently on the screen.
I render tiles for mapbox with tippecanone.
I want to use it to represent buildings. Unfortunately, the buildings lose the structure at zoom level 14 in Mapbox. I have already tried various options with tippecaone. Neither did it.
Info:
Geojson file is 720mb in size
Used tippecanoe statement:
tippecanoe -d16 -r0 -z20 -o tiles.mbtiles tiles.geojson
I am using GEOJSON to draw a world map with leaflet and having dashed line to draw boundaries, like in below image.
The problem I am having is that the line is not shared by two states if two states share boundaries, rather two lines are drawn each for different state. Due to this when zoomed enough lines looks weird as they get overlapped on each other. As show below.
var GeoJsonLayer = L.geoJson();
var myStyle = {
"color": "#fff",
"weight": 0.8,
"opacity": 1,
"fillOpacity": "1",
"fillColor": "#243E54"
};
// here data.world contains GEOJson to draw whole map
if (data.world) {
GeoJsonLayer.options.className = "geojsonlayerpolygon";
GeoJsonLayer.on("dblclick", function (ev) {
map.fireEvent("dblclick", ev);
});
GeoJsonLayer.addData(data.world);
GeoJsonLayer.setStyle(myStyle);
}
For making it dashed line i am using below CSS
.geojsonlayerpolygon{
stroke-dasharray: 6 4;
}
GEOJson I am using is
https://jsonblob.com/826f1a94-c1a3-11e9-a004-354d7c27cab2
How can i make sure that boundaries, when shared, have only one line?
Sounds like a job for TopoJSON. From its readme file:
TopoJSON is an extension of GeoJSON that encodes topology. Rather than representing geometries discretely, geometries in TopoJSON files are stitched together from shared line segments called arcs. This technique is similar to Matt Bloch’s MapShaper and the Arc/Info Export format, .e00.
TopoJSON eliminates redundancy, allowing related geometries to be stored efficiently in the same file. For example, the shared boundary between California and Nevada is represented only once, rather than being duplicated for both states. A single TopoJSON file can contain multiple feature collections without duplication, such as states and counties. Or, a TopoJSON file can efficiently represent both polygons (for fill) and boundaries (for stroke) as two feature collections that share the same arc mesh.
So, start by loading the topojson library...
<script src="https://unpkg.com/topojson#3"></script>
...then create a topology object for your GeoJSON data; note that TopoJSON expects an array of GeoJSON features, e.g. I'll load a GeoJSON FeatureCollection containing the Natural Earth country boundaries via fetch and create a topology:
fetch("ne_110m_admin_0_countries.geojson")
.then(res=>res.json())
.then(json=>{
var topo = topojson.topology([json]);
/* ...more stuff here soon */
});
...then add a L.GeoJSON layer with just the polygon fill, setting the stroke option to avoid drawing any lines on the contour of the polygons (remember that path styling options can be passed to GeoJSON constructors) ...
var layerFill = L.geoJson(json, { stroke: false }).addTo(map);
...calculate the mesh of the topology, which will be a GeoJSON MultiLineString...
topojson.mesh(topo);
...and create another L.GeoJSON instance to draw said MultiLineString. Style the lines as you like (including dashArray), e.g. ...
var layerLines = L.geoJson(topojson.mesh(topo), {
fill: false, dashArray:[3, 6], weight: 2
}).addTo(map);
The end result, which you can see here as a working example, contains no overlapping dashed lines, as expected:
Using TopoJSON is one possible approach. There are other possible approaches (e.g. pre-generating a MultiLineString GeoJSON file with just the boundaries, using a different tool, etc); but the idea of using topological rules on the dataset would be the same.
I have a big GeoJson file and I need to convert it to the vector format that can be loaded by the Mapbox. I need to have an external file, so I can't use Mapbox Studio for uploading and converting the data.
Currently I found https://github.com/mapbox/tippecanoe tool, but it converts GEoJSON to MBTiles (SQLite format). I think a can't use it for my map. As I can see from all the examples of the Mapbox service - it uses a XXX.vector.pbf (protobuf) format (small and fast). So the question is - how to get a Protobuf vector file from the original GeoJSON ? Thanks!
Tippecanoe is probably the right answer: it generates a ton of .pbf files, and bundles them into a single .mbtiles file. Usually you then pass that .mbtiles file to a vector tile server (there are heaps), or upload it to Mapbox or something.
If you want to explode out the .mbtiles file, you can use mbutil.
Finally, if you want to translate GeoJSON directly into protobuf format (different from the Mapbox vector tile format, I think), you can use GeoBuf.