tilemill creates jagged edges for worldmap - leaflet

Trying to create a custom world map texture with tilemill to load into leafletjs. I have downloaded a free .tiff file from natural earth data and loaded it into tilemill.
When i want to export however, i notice alot of jagged edges mainly around greenland/canada on the lowest zoom level.
a few zoom levels down and it seems ok again. After exporting the tiles to png's the jagged edges stay. How can i improve the quality of these images?

How can i improve the quality of these images?
By using more detailed input data.
By the looks of it, you are projecting a raster image in EPSG:4326 projection into the EPSG:3857 "web mercator" projection. In the original data, each pixel spans the same amount of longitude and latitude degrees. In a mercator projection, each pixel spans the same amount of longitude, but a different amount of latitude. The artifacts you are experiencing are akin to a Tissot's indicatrix.
You can try using a different value for the raster-scaling symbolizer option in your tilemill stylesheet, but that's gonna make the artifacts different, not get rid of them.

Related

GeoServer Vector Tiles show tile boundary issue in Mapbox GL JS

I use GeoServer to provide Vector Tiles (based on the GeoServer Vector Tile Extension) of my biking trails as .pbf.
The data are added as vector source and visualized using Mapbox GL JS.
Additionally, I use the GeoServer perpendicularOffset to offset the lines (as I always have two directions of the biking trail).
A problem occurs when visualizing the data within Mapbox. The lines are cut at the tile edges, although they are visualized correctly using the layer preview on GeoServer.
The further I zoom in the map, the less the clipping of the lines happens and at a very detailed zoom, the lines are drawn correctly.
I already tried to use a large enough buffer and modify the tile size, as these were suggestions when researching the problem. Unfortunately, these settings had no effect.
I have another vector source layer for the base map, there I have no problems.
It seems to me, that offsetting the lines might be a problem.
Any idea what I can try?
the tile size of Geoserver's tile grid is 256x256 , but mapbox need 512x512, add a custom tile grid, set the tile size to 512x512, generate your vector tile with the custom tile grid should be ok.

Mapbox geometries get degraded when exported to tilesets

I'm trying out Mapbox for the first time, and playing around with drawing some polygons in the dataset editor for export to a tileset. However, the polygons in the resulting tileset are not the same as what I create in the editor. The polygons are only very rough, simplified approximations of the originals.
In dataset editor:
In map layer as tileset export:
I understand that Mapbox does vector simplification at certain zoom levels, but these changes are not zoom-dependent. I zoom in all the way and the shapes are still like this.
Moreover, such extreme degredation of the geometries makes tilesets essentially useless for features that require any sort of accuracy, like property lot lines.
Am I missing something, or is this really the expected behavior? Is there really no way to get accurate geometries into a tileset?
UPDATE: It appears this is only happening with shapes I create by drawing in the Mapbox data editor. So far the geometries that I've uploaded as geojson files have gotten converted to tilesets accurately...
I suspect this is because the maxzoom is too low.
When you create a Mapbox Tileset, either by uploading GeoJSON directly as a new Tileset, or by exporting your your Dataset to a Tileset, Mapbox will try to guess an appropriate minzoom and maxzoom of the Tileset.
Sometimes the min/max zoom's used aren't suitable for the map you're trying to create. Since there is no way to specify a maxzoom in either of the two approaches the only alternative is to create your Tileset locally with https://github.com/mapbox/tippecanoe specifying an appropriate maxzoom for your data and then uploading the resulting .mbtiles as a Mapbox Tileset.

Visualising road segments as heatmap in Leaflet efficiently

I have data consisting of parts of road segments of a city, with different number of visits. I want to plot the data on a Map and visualise it in the form of a heatmap.
I have two related questions:
I have the data from Open Street Maps (OSM) in the form of pairs of node ID's, where node ID correspond to the unique ID being assigned to a point by OSM. I also have a mapping for each node Id to its corresponding coordinates. Is there any Leaflet or Mapbox utility or plugin, which can plot a trip / highlight the road segment using 2 node ID's. I can always do it manually (by using the coordinate mapping and converting it into GeoJSON), but the problem occurs with the line width -- I have to make it exactly overlap with the width of the road, so that it seems that I am highlighting a road segment.
Is there any plugin / utility for Leaflet or Mapbox, which can be used for plotting polylines or geojson as heatmap efficiently? My current approach is calculating the color for each polyline and encoding that as a geojson property. But the problem is that with the increase in the number of lines (> 1K) the rendering becomes a pain and the method is not feasible. There are some plugins for Leaflet out there for plotting heatmap, but all of them are for points only and not lines. Any approach using WebGL would be really great.
An approach which I thought of could be converting my data into a shape file, upload to Mapbox Studio and use as a layer directly. But I have no idea how to go about doing that i.e. creating a shapes file, encoding the information in such a way that the complete road segment gets highlighted in the correct color.

Vector layers with mapboxgl with no coordinates

Is there a way to draw a vector layer with CorelDraw for example and place it on napboxgl and use it as geojson layers?
For example https://seatgeek.com/colorado-rapids-at-seattle-sounders-fc-tickets/mls/2017-10-22-1-pm/3700786
Are they using geojson or etc.? Or just some sort of vector format?
I can't use geojson as it is hard to draw with QGIS any straight lines or symmetrical objects. I just want to draw a lot of vector objects and use them as layers with mapboxGL(use mapbox as render method and interact with layers as with geojson)
Any suggestions how to do it? Or is there a way to draw with Corel and then place it on map with QGIS?
Thanks
UPD:
Now I am using Corel -> dxf export and then import it to QGIS, then save it as geojson. But have some glitches with displaying that geojson geometry in mapbox, so I have to draw another in QGIS over the imported(dxf) one.
Here is an example of the bug, should be just a green polygon like the gray one
UPDATE: my fault, I was using lines instead of polygons.
I think you can achieve this as follows:
Convert the Corel output to SVG
Create an HTML element containing the SVG (not necessarily added to DOM)
On your Mapbox map, add a Canvas source containing the canvas: see https://www.mapbox.com/mapbox-gl-js/api/#canvassource
Obviously you will need to determine the lat/lon of the corners of your image somehow.

How to convert `mapbox.mapbox-terrain-v2` tiles to heightmap tiles?

Mapbox provides a kindle of map tiles--mapbox.mapbox-terrain-v2 which is stored in pbf format and saved in mvt suffix. The height data is represented by contour (line).
I want to generate terrain with satellite texture and this height data in Unity3D. How could I convert this pbf data to a height map(a pixel for a height value)?
There is an example
https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/12/1171/1566.jpg?access_token=pk.eyJ1Ijoib2xlb3RpZ2VyIiwiYSI6ImZ2cllZQ3cifQ.2yDE9wUcfO_BLiinccfOKg
And the mvt file
https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/12/1171/1566.mvt?access_token=pk.eyJ1Ijoib2xlb3RpZ2VyIiwiYSI6ImZ2cllZQ3cifQ.2yDE9wUcfO_BLiinccfOKg
And the document of Mapbox:
https://www.mapbox.com/vector-tiles/mapbox-terrain/
https://www.mapbox.com/vector-tiles/specification/
MapBox have buid a Unity3d package: MapBox-Unity-SDK
SDK here : https://www.mapbox.com/unity/
Just click download.
This is an asset you can open in Unity directly.
Launch Unity3d, goto Menu>Assets>ImportPackage>CustomPackage
and select your downloaded file.
It will unpack some files and the folders, you will find into some exemples scene files to help you.
The current vector terrain layer isn't designed to be turned into a heightmap: we've processed terrain into elevation contours and lines, so turning those back into raw data would be difficult (much like doing the opposite: we do a lot of processing because it would also be difficult to transfer raw data and derive visual data).
A new and improved vector terrain model that supports your usecase is on the way, but we've also introduced RGB terrain, which was actually designed specifically to address cases like Unity - decoding the RGB-encoded elevation tiles tends to be much simpler in software.