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.
Related
Latest Mapbox SDK and Swift
So I've been battling with this for 3 days now...
I'm trying to use an array of coordinates to create a line of extruded cylindrical pillars (or a sloped solid "wall" if that makes sense... But I've found this to be harder than just a line of pillars)
I've read most of Mapbox's docs but can't get my head wrapped around the use of MGLShapeSource, MGLPolygon and MGLFillExtrusionStyleLayer.
From what I can tell, one needs to add a polygon to a source, add that source to the map object, then apply the extrusion layer to that source... However, I can't figure out how to make that work.
This is what I've managed so far, as a solid wall... But using pillars, I could adjust the height as the line goes, creating a sloping look
Any advice would be appreciated. I'd paste my code here but it is WAY too messy and too much after 3 days of trial and error. haha.
BONUS: I'd like to animate the path being created as it goes... So pillar 1 appears at a certain height, then pillar two and a lower height, then pillar 3 and so on. This involves modifying the source apparently - have little idea on how to do that though :(
Are there individual height properties associated with the points in your underlying data? Your end goal is definitely possible, but it's dependent on whether or not you have the data for reference by your style layer.
Unfortunately, the Mapbox site doesn't have any iOS examples explicitly tied to this. But, the 3D buildings example follows basically the same flow. (i.e. mapView.addSource -> MGLFillExtrusionStyleLayer -> layer.fillExtrusionHeight).
The crucial bit in the building example is using .fillExtrusionHeight with a "forKeyPath" expression to set the extrusion height based on the corresponding property in your data:
layer.fillExtrusionHeight = NSExpression(forKeyPath: "height")
If you don't have height within your underlying data, you'll have to get some in order for the extrusion styling to work this way.
⚠️ Disclaimer: I currently work for Mapbox ⚠️
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.
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.
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.
Seems like a simple question, but I have been tearing my hair out for hours now.
I have a series of files ie.
kml_image_L1_0_0.jpg
kml_image_L2_0_0.jpg
kml_image_L2_0_1.jpg
kml_image_L2_1_0.jpg
kml_image_L2_1_1.jpg
etc. However just plotting them on the leaflet map surface understandibly puts the images at 0,0 on the earths surface, and the 0 zoom level inferred by the files should really be about 15 or so.
So I want to specify the latitude and longitude where the images should originate , and what zoom level they should start at. I have tried bounds (which doesn't display anything) and I have tried playing with offsetting the zoom level.
I need this because a user needs to click on an offline map to specify where they are and I need the GPS coordinates.
I also have a KML file but it seems to be of more help for plotting vector data on the map.
Any help is much appreciated, cheers.
If I understand correctly, the "kml_image_Lz_x_y.jpg" images that you have are actually tiles, with zoom, horizontal and vertical indices in their file name?
And your issue is that they use (z,x,y) numbers as if they started from the top-most level (zoom 0, single tile for entire world), but in fact they are just a small portion of the pyramid of tiles?
And you cannot use them as is because you still want to get actual geographic coordinates (latitude, longitude), which would be totally wrong if you used the tiles as if they were showing the entire world?
In that case, you have several options as workarounds:
The most simple and reliable would probably be to simply write a small script to rename all your tiles to their true (z,x,y) numbers.
Another option would be to modify the (z,x,y) numbers before they are written in the tile src attribute, and apply the appropriate offset (constant for z, scaled by z for x and y). That should probably happen in L.TileLayer.getTileUrl() method.
Good luck! :-)