I tried to integrate this map: https://a.tiles.mapbox.com/v4/felixmichel.kh7h21lp/page.html?access_token=pk.eyJ1IjoiZmVsaXhtaWNoZWwiLCJhIjoiZWZrazRjOCJ9.62fkOEqGMxFxJZPJuo2iIQ#11/47.6732/7.5352 into cartodb. But, it doesn't work. I work with cartodb.js because I added some more queries, so I needed the right link for this part:
L.tileLayer('https://a.tiles.mapbox.com/v4/felixmichel.kh7h21lp/page.html?access_token=pk.eyJ1IjoiZmVsaXhtaWNoZWwiLCJhIjoiZWZrazRjOCJ9.62fkOEqGMxFxJZPJuo2iIQ#11/47.6732/7.5352', {
attribution: 'CartoDB'
}).addTo(map);
Or if somebody knows a beautiful terrain map I am happy too.
Your tileLayer url is faulty, it expects the url to have placeholders for zoomlevel {z} and {x} and {y} for the axis values. You've used the url from an actual tile, which will not work.
L.tileLayer('https://a.tiles.mapbox.com/v4/felixmichel.kh7h21lp/{z}/{x}/{y}.png?access_token={token}', {
attribution: 'Mapbox',
subdomains: ['a','b','c','d'],
token: 'pk.eyJ1IjoiZmVsaXhtaWNoZWwiLCJhIjoiZWZrazRjOCJ9.62fkOEqGMxFxJZPJuo2iIQ'
}).addTo(map);
Note that as you can see, it also supports the {s} placeholder to load from multiple subdomains (which must be supported by your tileprovider. Mapbox does) which is much faster because browsers can simultaneously load from four subdomains at once. I also separated the access token from the url with the {token} placeholder to demonstrate that you can use your own custom tokens if needed.
Here's a working example of this on Plunker: http://plnkr.co/edit/lsTO9KzPMyzEKr06It1I?p=preview
And here's the reference for Leaflet's L.TileLayer: http://leafletjs.com/reference.html#tilelayer
Related
I'm unsure of the correct syntax to add Ordnance Survey vector tiles to a React-Leaflet application.
The example code at https://labs.os.uk/public/os-data-hub-examples/os-vector-tile-api/vts-3857-basic-map loads some vector tile libraries from Mapbox:
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js"></script>
<script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
then uses this JavaScript syntax to load the OS vector tiles:
// Load and display vector tile layer on the map.
var gl = L.mapboxGL({
style: 'https://api.os.uk/maps/vector/v1/vts/resources/styles?key=' + apiKey,
transformRequest: url => {
return {
url: url += '&srs=3857'
}
}
});
(I've verified that my OS api key works in the stand-alone demo.)
How can accomplish the equivalent using React and Leaflet?
I'm using React-Leaflet to add Leaflet functionality to my React app, and I've tried adding react-leaflet-vector-tile-layer - I've verified that this works for vector tile layers supplied by Mapbox Studio:
<VectorTileLayer
styleUrl="mapbox://styles/my-org/my-style"
accessToken="my-key"
/>
I'm trying to use this approach for the Ordnance Survey vector tile layer too but it's not working as I probably have the syntax wrong:
<VectorTileLayer
styleUrl="https://api.os.uk/maps/vector/v1/vts/resources/styles?key=my-key"
/>
No error message is shown but the OS vector tile layer does not appear on the map. In the developer console I can see a PBF file has been downloaded but it doesn't draw on the map. Could this be because I'm missing the transformRequest function in their example? Assuming it's required, how can I add this transformation request when using react-leaflet-vector-tile-layer?
The answer came from Ted Piotrowski, the developer of the react-leaflet-vector-tile-layer library. I needed to add the transformRequest parameter using this syntax:
<VectorTileLayer
styleUrl="https://api.os.uk/maps/vector/v1/vts/resources/styles?key=my-key"
transformRequest={url => { return { url: url += '&srs=3857' }}}
/>
I'm trying to create an interactive map out of an image using Folium as part of a Django project in which I want to display the generated HTML on a website.
I want to be able to see only the image upon which I place markers etc., not the actual world map that is by default created.
The image is a map of a fantasy world.
I found this tutorial and tried to apply it to Folium and that generally worked. I'm essentially adding an Image Overlay with "my" map to a map-object. However, that does not remove the original real-world map, meaning when I then save this map, it still also displays a world map that I do not care about in the lower left corner attached to my image overlay.
import folium
def create_aldrune_map():
base_map = folium.Map(crs='Simple', zoom_start=4)
aldrune_overlay = folium.raster_layers.ImageOverlay(
image='Path/To/Image',
bounds=[[0, 0], [1000, 1300]],
zindex=1)
aldrune_overlay.add_to(base_map)
base_map.fit_bounds(bounds=[[0, 0], [1000, 1300]])
base_map.save('Path/To/Output')
How do I get rid of the real-world map?
Let me quote from the Folium documentation, emphasis mine:
class folium.folium.Map(location=None, width='100%', height='100%', left='0%', top='0%', position='relative', tiles='OpenStreetMap',
(snip)
, **kwargs)
Parameters
tiles (str, default 'OpenStreetMap') – Map tileset to use. Can choose from a list of built-in tiles, pass a custom URL or pass None to create a map without tiles. For more advanced tile layer options, use the TileLayer class.
Therefore you probably want something like:
base_map = folium.Map(crs='Simple', zoom_start=4, tiles=None)
I want to draw a choropleth map based on german zipcode areas and some data.
It should look like this, just down to zipcodes:
https://maps.aimpulse.com/osm/addresses/
I asked the osm irc channel and have been told that it might even be possible with leaflet.js
So I read a bit here and there but I couldn't even find any starting point.
So any ideas are welcome.
Edit: Thanks to the answer and comment so far I think my main question is:
How do I get a list of german zipcode/postcode areas, with the corresponding coordinates for the polygons?
According to the irc channel, OpenStreetMap (OSM) has this data, and it should be possible to have it in GeoJSON format.
Yep, you could/should use leaflet.js.
You simply can create a map and add osm as TileLayer. After adding OSM tilelayer you can add your zipcode information.
The question is: how do you get them?
If you have the data as file (geojson) you can add a geojson layer.
leaflet.js has many other options to add the zipcode information.
I am quite sure that leaflet.js can do the trick.
So you can start with:
var map = L.map('map').setView([50.106545, 8.638599], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Now it depends on your zipcode-data how to implement them in leaflet.
Now I get it!
Getting those information is quite difficult!
You can try getting the zipcodes from the "Geoportal" - probably using the search word "Verwaltungsgrenzen".
Otherwise you can have a look at the OSM Boundaries. But those informations are incomplete.
The german "post office" also hold those data, but this might be expensive!
I've found this repository with that information, I don't know if it is updated but works.
I am following markercluster examples from Mapbox library, but can't solve my problem. If you guys take a look at my working example here, you will notice this line of code:
L.mapbox.featureLayer(markerLayer).on('ready', function(e) {
What I initally thought was I could put markers inside of markercluster featureLayer, but I guess it was a wrong approach. Any solutions? Thanks.
Example following here
The mapbox example you refer to makes an AJAX call to retrieve the GeoJSON data, hence it needs to attach an on "ready" listener.
In your case your GeoJSON data is defined in your scripts, so the "ready" event will not be triggered (besides, you should use L.mapbox.featureLayer with your GeoJSON object directly, not a Feature Layer).
You can simply use the eachLayer method to iterate through all created markers within the Feature Layer, and add them into your Marker Cluster Group.
var clusterGroup = new L.MarkerClusterGroup();
var markerLayer = L.mapbox.featureLayer(markers).eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
Updated Plunker: http://plnkr.co/edit/fN6xYcn1Lg532eLe39IS?p=preview
I'm using LeafletJS to add a map component to my app. Everything is fine and dandy except for the localization of the map. Some country names are shown in the local language (I'm assuming).
Is there a way to show the country names in English?
This is the current code that I use
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution : '© OpenStreetMap contributors',
noWrap : true
}).addTo(map);
The standard tile server of OSM tries to display labels in the local language whenever such data is available (local meaning the language of the country currently displayed, not your local language). The tiles, served by the tile server, already contain the labels, so you cannot remove them afterwards. But you can:
render them on your own (which requires suitable hardware) with an adjusted stylesheet, or
use tiles without labels and create a label overlay
try to see if there is a different tile server which only displays english labels. open mapquest for example has tiles based on OSM data where all labels are in english.
Map internationalization in the OSM wiki has some more examples
And always remember to comply with the tile usage policy of the tile server you choose.
All you need to do is to work with basemaps instead of openstreetmap
const mainLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', {
minZoom: 3,
maxZoom: 17,
attribution: '© carto.com contributors'
});
mainLayer.addTo(this.map);
For German language
You can use this german tile server: https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png.
L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
...
})
...