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.
Related
I have a layer called "Searched LayerX" having a vector tile source. I am having a simple requirement of highlighting a feature inside this "Searched LayerX" at runtime.
I was thinking of using the result of queryRenderedFeatures on "Searched LayerX" with the filter of unique ID of this particular feature and using this feature's geojson as a separate source to the new layer which I will be adding as "Selected LayerX".
var features = mapBox.queryRenderedFeatures({layers:['Searched LayerX'], filter : ["==",'gid','7818_2_CA']})
var selectedFeature = features[0];
Resultant feature set does not provide any geojson which I can use to create a new geojson source.
So my question is, how do I use the result as a different source to my "Selected LayerX"?
You can use the method described in the first link below - but understand that the returned feature is not the same as the source GeoJSON feature - it is the vector tile representation of that feature at that zoom level, which means it might be highly simplified.
https://gis.stackexchange.com/questions/186533/highlight-feature-with-click-in-mapbox-gl
Another method is to add another layer with the same source, and use the filter function for the highlight as shown in the two links below -
http://www.mapbox.com.s3-website-us-east-1.amazonaws.com/mapbox-gl-js/example/query-similar-features/
highlighting polyline features in mapbox-gl.js
Try this post, I have added the code which will let you have the features using querySourceFeatures() https://stackoverflow.com/a/66308173/9185662
Here's a brief description of what I'd like to do (and I'm very, very new to this but seem to have hit a wall):
Display a map of color-coded buildings based on a custom tag (miamioh_lds).
What I've tried: in Mapbox Studio Classic starting with the Emerald style (coordinates 84.7286, 39.5033)
#building [miamioh_lds="uitcp"] {
polygon-fill: #f61313;
}
I would expect Hoyt Hall to be red, but it is not, even if I remove all other #building CartoCSS statements.
I would like the building filled, which is why I'm using tags and fill instead of using a data source, which seems to be focused at adding markers. I'm using Mapbox because my goal is to bring the map into Tableau (which I'll use to add a marker off dynamic data, which is why I need a fill, not a marker here).
Can I use custom tags in CartoCSS? If so, what am I doing wrong?
Thanks!
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
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', {
...
})
...
I'm still working on my map project. I use mapnik tools to render my own maps.
Mapnik reads a xml file to style each tiles.
At this moment, i managed to remove street names and all stuff that was useless for my project. The only problem i have is about removing the street numbers, which still appear even when all useless layers are off.
I give you a pastebin link to my xml file: http://pastebin.com/ZRtmYBRz.
Do you know how i can remove the street numbers ? Thanks.
Before :
Now:
Try using a filter on the addr:housenumber tag of the nodes in the source file that contain that info. Once you get those, you can change the rendering by using a TextSymbolizer.
More info on https://github.com/mapnik/mapnik/wiki/TextSymbolizer