I am trying to add a Mapbox map to my flask app. I have experience in python but I am new to JS and HTML. I am trying to add a 3D building app to visualize the results and I have got the layout of 3D maps from the Mapbox documentation page. However, I would like to add a marker at a particular location using latitude and longitude but I am not able to do so. Please let me know how can I add a location marker to the Mapbox 3D map.
The code for the 3d map is: https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/
This example shows how to add a Marker to a map https://docs.mapbox.com/mapbox-gl-js/example/set-popup/, however it will be on the ground plane, not at any given elevation in 3D.
// create the marker
new mapboxgl.Marker()
.setLngLat([lng, lat])
.addTo(map);
Related
See attached image, I have a Mapbox map and a marker that is "centred in the map", what I want is the marker's point to be at the centre (where the red arrow is) and not the middle of the marker.
the marker is Mapbox, setting the lng lat is Mapbox, getting the centre of the map is Mapbox, does anyone know if Mapbox construct the marker in such a way where the end point is the middle?
if not, is there a way to adjust ?
thanks
Martin
for anyone else needing this information
1)
mapbox allows the markers centre to be set when you add the marker, so you can say the centre is top, bottom, centre etc etc
2)
out of the box the mapbox markers are centred in the correct place using "centre". proved this by debugging the GPS from mapbox and comparing to google maps lng,lat and then using every setting to see which one was exactly the same mapping
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.
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.
I am new to leaflet. currently I am working on leaflet to render vector tiles. my application's requirement is that on click i should get features from map tiles in geojson format.
In Mapbox map.queryRenderedFeatures(e.point). I want to do exact same thing, but in leaflet. Please check here to check how mapbox is fetching features.
Please help.
Current Leaflet implementation does not supports querying rendered features. Hence switching to Mapboxgl
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.