I am working on an Open Source project and our goal is to create an inundation map similar to the following:
https://openlayers.org/en/latest/examples/sea-level.html
https://labs.mapbox.com/bites/00307/?elev=1#4/29.92/-91.19
We would like to use Mapbox's elevation data using as RGB raster tiles ("Mapbox Terrain-RGB"). Found here: https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#mapbox-terrain-rgb
I have built the structure of my Mapbox GL JS map and have hit the Terrain-RGB endpoint but am struggling to figure out how to consume this data using Mapbox GL JS; And complete RGB decoding in the client.
There is no available documentation or walkthrough for an inundation map on Mapbox currently so I am looking for some guidance.
The docs say it's possible so I'm obviously missing something. So far I've tested different variations of marker-url and url- in the Mapbox playground with both single point and feature collections (as shown in the examples) but all I'm getting are the generic markers.
Any guidance to point me in the right direction?
https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/geojson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"url-":"http%253A%252F%252Fwebsite.com%252Ffiles%252Fmarkers%252Fgreenpin.png"},"geometry":{"type":"Point","coordinates":[-122.2599,37.8098]}},{"type":"Feature","properties":{"url-":"http%253A%252F%252Fwebsite.com%252Ffiles%252Fmarkers%252Fgreenpin.png"},"geometry":{"type":"Point","coordinates":[-122.2591,37.8062]}},{"type":"Feature","properties":{"url-":"http%253A%252F%252Fwebsite.com%252Ffiles%252Fmarkers%252Fgreenpin.png"},"geometry":{"type":"Point","coordinates":[-122.2565,37.8063]}}]})/-122.2647,37.8006,12,0/1080x1080#2x?access_token={token}
This is not reflected in the official documentation, but in order to use a custom marker with a geojson overlay, you can rely on the marker-url property for your features.
If you update your request to the API to the following, you should achieve the desired result:
https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/geojson({"type":"FeatureCollection","features":[{"type":"Feature","properties":{"marker-url":"http%253A%252F%252Fwebsite.com%252Ffiles%252Fmarkers%252Fgreenpin.png"},"geometry":{"type":"Point","coordinates":[-122.2599,37.8098]}},{"type":"Feature","properties":{"marker-url":"http%253A%252F%252Fwebsite.com%252Ffiles%252Fmarkers%252Fgreenpin.png"},"geometry":{"type":"Point","coordinates":[-122.2591,37.8062]}},{"type":"Feature","properties":{"marker-url":"http%253A%252F%252Fwebsite.com%252Ffiles%252Fmarkers%252Fgreenpin.png"},"geometry":{"type":"Point","coordinates":[-122.2565,37.8063]}}]})/-122.2647,37.8006,12,0/1080x1080#2x?access_token={token}
Disclaimer: I currently work at Mapbox
I try to build a map for my stormchasing community. It is very important to see urban areas on the map. I tried to add a landuse=residential layer/filter but it seems Mapbox does not support this at all.
Any ideas or solutions on this?
You are correct that the Mapbox Streets v8 tileset does not contain a landuse=residential field. However, this type of data is available in OSM as shown here and can be downloaded using Overpass Turbo - you can refer to the "Add OpenStreetMap data to your Mapbox project" tutorial for steps on how to do that.
Once you've downloaded this data, you can upload it to your Mapbox account, add it as a new layer to your map, and style it accordingly.
Suppose, I've a MapBox Dataset in the form of an URL/Link. How to display that data in a Web Application that uses ArcGIS-js-API.
Any help will be appreciated!
If your Mapbox Dataset is GeoJSON, you could use geojson-layer-js to add the layer to the map.
A sample app, to use Mapbox Style as a Web Tile Layer in Arcgis-JS-API 4.4. Uses Mapbox DatasetID to visualise Popup content of that Mapbox style/Data.
Helps to Visualise & Interact with Mapbox data using an ARCGIS JS API 4.4 application
https://github.com/hostasite/MapboxDataUsingArcGis4.4
Is it possible to download OSM or embed OSM and use leafletjs on top of it to display heat map?
I have searched a lot and could not find anything related. I wanted something like this form Google Maps.
https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
I did find the mapbox but we need to pay them. I need something open source.
Please suggest me.
You can create heatmaps with Leaflet by using the various available plugins:
http://leafletjs.com/plugins.html#heatmaps
However, you'll need some vector data to build a heatmap, not just the tilelayer. If you want to use OpenStreetMap to get your data, try a service like http://overpass-turbo.eu/ to download the things you want in this format.