I have the following problem. I want to use osm bright, but I can’t understand how to do this. I found only how to use a standard OSM tiles skin:
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
Maybe you know a way how to connect the Bright version in the same way?
Related
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.
I would like to setup a tiles server.
I found some documentation on the net and followed this tutorial.
Now it seems like I have a well configured server with a small map (Guyana) in my database, that's cool !
But now, I still don't understand how to get and configure an interface to display my map...
The tutorial suggests and give some links to OpenLayers and Leaflet but it seems to use online maps but I want to render my local files.
Also, the tutorial say that "mapnik" is what does the rendering, but no idea how to use it !
I'm using Ubuntu 14.04, apache2, Mod_tile, renderd, mapnik, osm2pgsql and a postgresql/postgis database in virtualbox.
If you have some tips you're welcome ! Thanks
If you already imported a shapefile to a PostGIS database, you can create a style or use the OSM default style with the Mapbox Studio or TIlemill tool and then import to a mapnik.xml file.
With the mapnik style file, you can follow the guide to serve the tiles using Renderd and mod_tile.
If you can call browse to http://yourserveraddress/osm_tiles/0/0/0.png and see the world tile without problems your Tile Server has been configured correctly, if not something went wrong.
After this, you can use frontend frameworks like Leaflet following this guide.
A good way to learn more about the OSM world is to create your own API by the OSM API repository.
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.
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.
I would like to use the EPSG:4326 CRS in my leaflet app as I have a lot of WMS layers that are only available in EPSG:4326.
So, I'm looking for a tile service in EPSG:4326. But it seems like all the X/Y/Z links I am finding are in EPSG:3857.
Check out http://www.mapproxy.org, which would allow you to reproject OSM tiles on the fly.
Currently I do not believe that OSM has a server serving out tiles in EPSG:4326
Leaflet supports EPSG:4326 as well. See the documentation. You should probably try something like this:
L.map("id", {crs: L.CRS.EPSG4326});