How can I add a 3 dimensional sphere to Mapbox GL using the Javascript API? I've read about the fill-extrusion property but I'm unsure how I would use it for a sphere. I'm trying to create a semi-transparent dome around a latitude/longitude coordinate based on a distance radius.
There's no way to do anything like that at present. The only 3D features are fill-extrusions, which have flat tops. Maybe you could create an image that looked like a 3D dome, and overlay that.
Related
I have a triangle polygon filled with color and low opacity. That was no problem so far.
What I'm trying to achieve looks like this (without points and lines). It is basically triangle polygon with fill color but opacity smoothly lowering from one of the triangle apexes.
Is there any way to achieve this with mapbox? Thanks!
There is no easy, built in way to do this with Mapbox GL JS.
The best way I can think of is to create a Marker (an HTML object anchored at a specific lat/lng) to draw the shape. You will have to do some maths to translate the coordinates of the triangle's vertices into screen coordinates. You will also have to update the calculations if the viewport zooms or rotates.
We are trying to create a polygon programmatically in typescript using mapbox gl. But starting height and ending height of the polygon will be different to create a slope. Please let me know is there any way to achieve this requirement.
Mapbox GL JS does not support 3D shapes with sloping surfaces. You could use something like three.js (via ThreeBox) to achieve it.
I want to overlay my data-layer on top of the water but below the land surface.
But the problem is that there is basically no "ground" layer on mapbox layers. There are different layers like 'water', 'roads' etc layered on top of a background which is basically 'land'
I have been able to use 'roads' on top on my data which gives the following images. but is there a way to visualize my data only on 'water' and not on 'land'?
For more information. data is in geojson format. I have used movelayer() funtion of mapbox and checked by moving my datalayer below each layer of map.getStyle().layers one by one.
Also, can this be done in different styles available in mapbox?
To do what you're trying to achieve, you'll have to find another tileset of land polygons to use as a mask. There isn't a way to dynamically clip a layer to within the polygons of another layer, for instance.
I am wanting to layer multiple image overlays over each other on a map (minimum will be 3, maximum 10). These are weather radar images with each image being a higher elevation in the storm. I have attached a screenshot. Just imagine several layers over that image in the same spot.
I am hoping there's an easy image style like "HeightAboveGround" or something like that that will let me do this.
If this is possible, is there also a way to tilt/rotate image overlays? This would be such a nice feature in the map.
I am wanting to layer multiple image overlays over each other...with each image being a higher elevation in the storm.
There is no way to render image overlays at any height other than zero.
If this is possible, is there also a way to tilt/rotate image overlays?
If by "tilt", you mean, along an axis parallel to the ground, such that one end of the image is higher than the other, then there's no way to do that.
If, by "rotate" you mean, along an axis perpendicular to the ground, so that the image no longer aligns with north, then there's no way to do that either.
Sorry this couldn't be more helpful. :) If 3D is important to your application, you might want to consider using a true 3D library (as opposed to 2.5D) such as Cesium.
I'm using Leaflet and MapBox. I need to develop an api which will show certain city points with labels, and accordingly draw routes between them. I have BlueMarble tiles till certain zoom, and then MapBox Streets. What is the best way to realize that idea? Are circles and paths the best option? Thank you.
I am not sure that you need to create an API for what you want to do.
http://leaflet.cloudmade.com/examples/geojson.html
In the Leaflet tutorials it shows you how to create LineStrings and Points from GeoJson data. So with latitude and longitude coordinates for the Cities you can create Points and use LineStrings to create the routes and add a them as a GeoJson Layer to the map.