So I'm attempting to get Mapbox working with my Leaflet implementation (using React Leaflet), and my spidey sense is telling me something is off.
The URL:
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/11/568/825#2x.jpg?access_token=pk.eyJ1IjoiamFtaWxsZXI2MTkiLCJhIjoiY2t3Y3JnbG5uMzZ2MzJ1bmhyaHhpczJpcCJ9.3X8OkNioN_C8CN15YPmDDQ
Note: I created the access_token used above for this SO question, and will be deleted soon. So the link may not work when you see this, which is why I used SO's handy dandy image upload!
I assume this has something to do with how the tile coordinates and/or zoom is being calculated, but really, I don't have a damn clue in the world.
Using mapbox.mapbox-streets-v4 as the tileset_id produces results that are better, but still bad. I haven't yet been able to load a stylesheet either...
What gives?
As it turns out I was correct in my hunch that it had something to do with how the tiles were being generated by Leaflet. And while I'll probably never know the specific reasons behind it, I was able to solve it. The secret sauce ended up being mapbox-gl-leaflet.
I threw together a super simple example on Code Sandbox showing the successful implementation of Mapbox tiles as a React component within React Leaflet. It's pretty snazzy, IMO, even if you have to import a few hundred different packages (doubly if using TS) to make it all work 😕
https://codesandbox.io/s/sharp-payne-m3hll
NOTE: To see the codesandbox link working, you'll need to supply your own Mapbox API key. The API key from above won't work (even if it was still valid, which it may or may not be depending on how much I care to do anything about it...)
The mapbox.mapbox-streets-v11 tileset from Mapbox is originally intended to be used as vector data, e.g. with Mapbox Vector Tiles API : https://docs.mapbox.com/help/glossary/vector-tiles-api/
The only difference with your URL is the requested format mvt (instead of jpg). And no #2x resolution modifier.
What may be confusing is that the vector tilesets can also be requested as raster, by specifying a raster format like jpg or png through Mapbox Raster Tiles API https://docs.mapbox.com/help/glossary/raster-tiles-api/.
Mapbox server then generates an image from the vector data. But in the case of the streets tileset, it has a lot of data in hand, and it renders all of it, making it appear messed up.
Mapbox provides 5 default tilesets (https://docs.mapbox.com/studio-manual/reference/tilesets/), some of them are raster only (typically Satellite mapbox.satellite) while others are originally vector, but can also be generated as raster (Streets, Terrain, Terrain-RGB/elevation, Traffic).
Unfortunately Leaflet does not handle vector data built-in. If you really need to use vector data, you have to use plugins like Leaflet.VectorGrid or Mapbox GL Leaflet, or another switch to another mapping library.
Related
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
Hello
I started to work with mapbox about a month ago now but I'm stuck with some issues.
One of theses issues are related to the accuracy of the point displayed in Mapbox.
To sum up, I uploaded geojson data through mapbox studio dataset. When I look up for a particular point (to check) I see that the point is in the right place. However when I go the Mapbox Style editor and when I added the source of my previous dataset (I'm looking for the same point to check), I realized that the point is not at the right place anymore (few meters away).
Do you have any idea please ?
This the point in the dataset :
And the following is in mapbox style studio :
Thanks for your help !
I found the issue.
The issue came from the convertion from the dataset to the tileset...
When you upload your data through mapbox studio > dataset, to use these data you have to "transform" it into tileset (it is generated automatically to use it in mapbox studio style). So I was wondering if this transformation process removed some decimals or something. I looked to a lot of mapbox documentations page and I found this one. If I understood well the issue is caused by the zoom level (see the link above).
To bypass the "default" transformation from dataset to tileset, I tried to upload directly my geojson data through mapbox studio > tileset. But the issue was still present. I presume that they apply a default zoom level (Which limits accuracy) even through the mapbox studio tileset. I found a useful tool to modify the zoom level of a geojson data before uploading to mapbox studio tileset : tippecanoe
If I'm not wrong, according to the good options, the tool can choose the best zoom for the precisions of your coordinates. So, according to the documentation "If you aren't sure what options to use" I tried this :
tippecanoe -zg -o outputFile.mbtiles --drop-densest-as-needed inputData.geojson
Then I uploaded the outputFile into mapbox studio tileset and all the coordinates were well located !!
I'm building up experience with web development and my next projects are some web maps. I've looked into Google Maps and Open Street Maps and would like to use OSM for a project as it contains more detailed information of building footprints.
I've tried styling Google Maps which seemed fairly straightforward, but I'm a little lost with OSM. I've got to the point of trying to create my own renders (with TileMill) but this is crashing my system due to the amount of data.
What I essentially need is this (but for the UK);
http://maps.stamen.com/#terrain/12/37.7706/-122.3782
Are there any resources which you can recommend or how easy/ difficult is this to create myself? I think I would need to create the map (with TileMill or similar and then find my own servers to host), or is there an easy way to convert the standard map to Grayscale?
I want to keep it as simple as possible so please any recommendations?
Turning the standard map to grayscale: I might be very late to this but for anyone else running into this question: I found a very easy solution if you're working with HTML and Javascript using OpenLayers and the standard OpenStreetMap-Tile-Layer in color. I took the solution from here: https://openlayers.org/en/latest/examples/semi-transparent-layer.html
I don't know much about web development but this solution worked for me. Upon creating the map, as done in main.js in the example from the link, a class name is defined ('bw')
className: 'bw',
that can be used in index.html to manipulate the style o f it in the part:
<style>
.bw {
filter: grayscale(100%);
}
</style>
My application was altering a pre-built web-map from the qgis2web extension for QGIS. I was able to turn the tile layers from the background map to grayscale so the results would stand out more.
You could use https://github.com/Zverik/leaflet-grayscale to display any tile layer in grayscale. It's a plugin built upon the leaflet map displaying library.
Good day all.
I am a bit Interested in mapbox and your maps. Going thru your site I also realize that calls to the app helps you with revenue. THis is all well and good for doing an app to find the nearest coffee shop. However I am working on an application where Internet connectivity is not promised and in this case a .MBTile file would be perfect for me. I have not been able to export my maps I have created into a .MBTile even though that was directly mentioned in mapbox documentation. I would love some assistance in locating this feature or do I need a paid account to do so.
Ps I am aware this can be done with tilemil but I cannot get the maps I created from Mapkit into tilemil to do so.
Thanks
If you want to be able export .mbtiles you would have to design your map in TileMill. From there you would be able to export them into the format that you want. This would produce raster tiles rather than vector tiles however. https://www.mapbox.com/tilemill/
for my next project I'm looking for maps, that contains only frontiers of countrys, lakes, hills ans rivers.
Can I get such kind of maps with the OpenStreet-API?
best regards
The "OpenStreetMap API" provides map data, not map images. So, for the imagery you want, you either need to find a source that renders the style you want, or render your own.
I don't know of any services that provide exactly the render that you're looking for. However, it should be very easy to render your own tiles that do this - if you install TileMill and follow through the tutorial, you will find it very easy to delete layers from the default style until no names are included in the style.
Note that if you're planning on running a web service, you'll also need to serve your special new map tiles to your users.