Vector layers with mapboxgl with no coordinates - mapbox-gl-js

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.

Related

Mapbox gl draw add name to polygon

I am playing around with mapbox one of the things im trying to figure out is how to set a name on a polygon that i have just created. I have a feature collection and for each feature i have a name but i cant figure out how to display the name on the polygon.
In general, if you'd like to display GeoJSON features along with labels in your Mapbox GL JS map, you will need to add two layers to your map referencing the GeoJSON source. One layer will be of type fill to display the polygons themselves, and the other will be of type symbol to display the text for the labels.
This example demonstrates how to add a symbol layer with text-fields containing the names of the Point features in the GeoJSON source. If you have the coordinates for each polygon where you'd like the name to be displayed, you can follow this example to add the names after adding your polygons with a fill layer.
Otherwise, you will need to compute the coordinates of the centroid of each polygon where you would like the names to be added. For this, you can use Turf's centroid method on each polygon in your FeatureCollection to generate said coordinates and add the symbol layer representing each feature's name with the resulting coordinates.

How to make adjacent polygons align with the edited polygon in leaflet?

Is there any way in Leaflet to edit a shape file (from database) consisting of adjacent polygons in the same manner as in QGIS using the "Reshape feature"-tool in the Advanced Edit toolbar?
At the moment I'm using Leaflet.pm to edit. It works fine to reshape an activated polygon by draging coordinates, but I would like adjacent polygons to align to the new shape. And draging coordinates can turn into a lot of work. Drawing the new boarder as with "reshape feature"-tool would be ideal. Anyone know if it's possible and if so: how?
Thanks!

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.

Mapbox - extruding lines

Is it possible to apply fill-extrusion for a GeoJSON LineString feature?
Basically I'm looking for a way to draw lines (can be 1 line or multiple connected) in a 3d mode with z-offset.
If that's not possible, maybe this can be done with a polygon instead?
Like, converting my lines to polygons (how can i do that?)
What you're asking for isn't yet implemented, but ticketed in Mapbox GL JS at https://github.com/mapbox/mapbox-gl-js/issues/3993.
For now you'll need to opt for your second suggestion of converting the LineString feature to a Polygon. You can do this with turf's buffer function http://turfjs.org/docs#buffer.
The whole line/polygon will be offset at the same height, so depending on your application you could use turf's linkChunk http://turfjs.org/docs#lineChunk to get it broken up into smaller features which you assign different height properties to.