MapboxGL extruding lines/circles - javascript

I'm trying to implement a LineString extrusion depending on timestamp. As mentioned on github it is supposed to be implemented, but it isn't. It is supposed to look something like the screenshot below.
So far I could find out that it is possible to use extrusion for polygons but then i would have to somehow create polygons from my LineStrings and circles. Is there another way to implement this? My plan is to show human movement in association with there timestamps (smallest z-axis heigth/altitude would represent the oldest timestamp).
Maybe there is another framework where this is possible but so far i m very pleased with MapboxGl JS. Thanks for anyhelp.

You can only extrude polygon. You could use turf buffer to create polygon features from your linestring segments.

UPDATE:
I ended up using fill-extrusion. I created Polygons between my geo points and extruded the or as mention it works perfectly with turf as well.

Related

How to visualize multiple lanes (bus, cycle etc.) from single polyline (OSM data) in Leaflet?

My use case:
Single polyline is tagged with multiple lanes containing also a cycle lane.
How would I go about visualizing them side by side using Leaflet? Polyline is a set of GPS coordinates and I would like to have e.g. 3 polylines drawn where there is lane, lane, cycle lane.
I understand some kind of offsetting is required, but how do I go about calculating the offsetted GPS coordinates?
Any tips on plugins, algorithms, code examples are welcome. Since I am using Javascript, JS examples are preferred, but I can work with other languages as well.
Here, this sould work Displaying overlapping polyline segments as multiple lines with offsets
also an example Bus Lines

How to draw a polygon on BingMap based on pushpins?

I have a number of Pushpins on a BingMap v8. I'd like to draw a polygon around these pins.
I see a lot of examples of how to draw polygons manually, but see nothing about using Pushpins as a guide.
I am looking for something like below. Does this functionality exist in BingMaps v8?
There are two ways to do this. The most common is to use a Convex Hull which generates a polygon that is similar to stretching an elastic around the pushpins. The second option is a Concave Hull which tries to create a tighter fitting polygon around the data set. The Bing Maps V8 web control has built in calculations for both of these in the spatial math module. Here is a code sample that shows how to do both of these: http://bingmapsv8samples.azurewebsites.net/#Concave%20and%20Convex%20Hulls
Here is documentation on the Spatial Math module: https://msdn.microsoft.com/en-us/library/mt712834.aspx

Apply hash pattern to polygon in openlayers

I am creating a vector layer comprised of polygons from a KML file using Openlayers and I need to apply a "hash" pattern (diagonal striping) to the polygons. I know Openlayers doesn't natively support adding a background image to a polygon in a vector layer but I'm wondering if anyone has any ideas on how to accomplish this? The styling of a vector polygon appears to be limited to solid colors and opacity. If need be I'll extend OpenLayers to add this functionality in by manually drawing the hash lines within the polygon boundaries but I'm hoping someone has a simpler suggestion before I head down that road.
Using SLD this can now be done. Not sure if it's in version 2.11 or the trunk development but i saw the addition was committed about 6 months ago.
It uses an ExternalGraphic so you can set an image of whatever pattern or color you want.
Here's the Example
I have not try this yet, but I have similar problem.
The solution I will try is svg pattern.
OpenLayers has SVG.js which is used to draw polygons. I will modify that to support patterns.
Look Image -->
http://i2.aijaa.com/b/00653/9707550.jpg
In this example i have modified http://openlayers.org/dev/examples/behavior-fixed-http-gml.html example to demonstrate pattern usage. --> Could this be good solution?

Javascript Canvas Lat Lng Plotting

I want to create a data visualization similar to this:
...but for the entire globe. The canvas size will be arbitrary but won't need to resize with the browser (I will set the width and height before I start plotting points). I need to figure out a way of converting latitude and longitude coordinates to points on the canvas. Does anyone know how to do it?
First of all you need to choose projection. Then you can use proper formula. Or you can just use existent solution like proj4js for example. This is JS port of well-known proj utility for working with various projections.
I would recommend to use Miller Projection for the visualizations on the whole globe. You can find formulas here.

Overlay for plotting MGRS

I'm trying to plot MGRS lines over a map in an overlay using OpenLayers (JavaScript). Where I'm really having problems is identifying the strange squares (non-100kmx100km grids). Does anyone know where I might find an algorithm for plotting these?
In particular, the information I have or can find is:
Convert a Lat/Long to MGRS
Convert a full MGRS string (i.e., 17SLA123678 but not 17SLA) to Lat/Lon
Convert Lat/Lon to screen pixel and vice-versa
Thanks!
I don't know the MGRS system, but the Proj4JS library may be useful. This is used to transform between coordinate systems, so you can set it up to convert from a coordsys to pixels, or more commonly from one coordsys to another.
it is open source, and broadly based on the well known proj.4 library, and interfaces with OpenLayers. Actually, OpenLayers uses proj4js to transform between different coordinate systems.
I just added some of that functionality to https://github.com/jaycrossler/js-maptools (uses Leaflet instead of OpenLayers). It will draw a polygon over the USNG/MGRS cell that the mouse is over.

Categories

Resources