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', {
...
})
...
Related
Please could I gain some assistance with the following problem. I would like to create a CQL filter in leaflet which filters data from GeoServer, with the data hosted in a PostGIS database.
For example, selecting a reservoir name from the NAME field in the database.The filter will be variable as the user can enter different names through an input dialog field.
I am displaying my layers as WMS, and although I was able to get an interactive filter working in openlayers 3, I still have had no like with leaflet.
I am new to the web development side of GIS and any help or pointers in the right direction would be greatly appreciated.
Kind regards,
Cameron
In leaflet you use TileLayer.WMS to plot wms layer on map. like this:
var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r-900913',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2012 IEM Nexrad"
});
You see some standard leaflet WMS options there like format, version ..crs etc.
But leaflet send all extra parameters/options in url to support non-standard WMS parameter . CQL_FILTER is one of them, so what you need to do is supply cql_filter options (column name is case sensitive):
var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r-900913',
format: 'image/png',
transparent: true,
cql_filter: 'NAME=filterhere'
attribution: "Weather data © 2012 IEM Nexrad"
});
This is my first time posting to the forum and already I have received great help!
I have managed to get the cql_filter as suggested within my code as below:
var contours = L.tileLayer.wms('http://gis01-dbn:8080/geoserver/Inyaninga_243-198/wms', {
layers: 'Inyaninga_243-198:contours_3857',
format: 'image/png',
transparent: true,
cql_filter: 'elevation= 126',
});
Is there however any way to make this elevation parameter receive user input and update?
I have created a form in the html as such:
<form>
Elevation(m):<br>
<input type="text" id="myInput">
<input type="button" value="Elevation">
</form>
However, I am getting stuck with passing "myInput" into the cql_filter to accept a value which the user can enter.
I have tried creating a function housing the cql_filter but again cannot call this into the cql_filter option when loading the WMS.
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 got a link http://thematicmapping.org/playground/zoomify/example.html
this link use some free plugin to load custom images by leaflet js
here small code
var map = L.map('photo').setView(new L.LatLng(0,0), 0);
L.tileLayer.zoomify('http://thematicmapping.org/playground/zoomify/books/', {
width: 5472,
height: 3648,
tolerance: 0.8,
attribution: 'Photo: Bjørn Sandvik'
}).addTo(map);
but i do not want to use any plugin. so just curious to know is it possible to load custom slice images with leaflet js. if yes then please drive to right article or code sample which help me to construct it.
thanks
Sorry this is a bit delayed, but you can do this by adding your own images into folders names by zoom level {z}. You can include them like this:
L.tileLayer('tiles/{z}/map_{x}_{y}.png', {
Here's a good description how to convert your image into the correct slices:
http://omarriott.com/aux/leaflet-js-non-geographical-imagery/
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
We use leafletJS to show maps with round about 100 markers. Some of these markers are located on exact the same position. Marker2 is above Marker1 so Marker1 isn't visible. Is there a way to rotate Markers in a way that you can see there are more then one marker?
may be you should look at https://github.com/Leaflet/Leaflet.markercluster plugin
here demo - http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
The drawback with walla's answer is that Leaflet.markercluster requires clustering, which may not be an option depending on your requirements i.e. you need to always display individual markers.
OverlappingMarkerSpiderfier-Leaflet (a bit of a mouthful) works well in this case and it's fairly well documented. It displays a 'spider' of markers on click only if they overlap i.e. if the zoom level increases so markers don't overlap, then it won't 'spider' on click, which is quite nice. Demo.
It's available as a NPM package but it isn't a proper ES module, so usage is a bit trickier than usual if you're expecting an ES module:
// Need to specifically import the distributed JS file
import 'overlapping-marker-spiderfier-leaflet/dist/oms';
// Note access to constructor via window object
// map refers to your leaflet map object
const oms = new window.OverlappingMarkerSpiderfier(map);
oms.addListener('click', (marker) => {
// Your callback when marker is clicked
});
// Markers need to be added to OMS to spider overlapping markers
markers.forEach((marker) => {
oms.addMarker(marker);
});
// Conversely use oms.removeMarker(marker) if a marker is removed
Alternatively there is a forked version (confusingly) called OverlappingMarkerSpiderfier that is a proper ES module so you can do:
import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier'
const oms = new OverlappingMarkerSpiderfier(map);
However as of 24 Jan 2020 there's a fair bit of divergence based on commits between the two so YMMV.
FWIW I'm using the original.
If anyone is looking working sample for Angular below are the steps,
Install it via npm: npm i --save overlapping-marker-spiderfier-leaflet
Then import it into the component where you need it: import 'overlapping-marker-spiderfier-leaflet/dist/oms';
Add this line on top of the file where you import it: const OverlappingMarkerSpiderfier = (<any>window).OverlappingMarkerSpiderfier;
Add the oms markup like that: this.oms = new OverlappingMarkerSpiderfier(this.map, { nearbyDistance: 20, keepSpiderfied: true });
Add the markers to oms at the same place where you add your markers to the map so oms can track them properly this.oms.addMarker(marker);
xlm is already gave a complete answer. Thanks to him for that answer. But this is a slightly changed answer that worked for me in angular.
we had the same problem, follows the jsFiddle with the solution we found http://jsfiddle.net/atma_tecnologia/mgkuq0gf/2/
var marker1 = new google.maps.Marker({
position: myLatLng,
map: map,
icon: {
url: image,
size: new google.maps.Size(134,130), //different sizes
},
zIndex: 2, //different overlays
title: '1º marker',
});