I am using leaflet which displays offline tiles that have been created using maperitive. Everything works just fine but does anyone know how to trigger the error event in case the requested tile does not exist? In case the requested tile cannot be loaded, you can specify a default tile.
var myLayer = new L.TileLayer(..., {errorTileUrl: '/path/to/default/tile.png'});
which actually sets the default tile if there is an error loading the requested tile. But this is not exactly what I need. I need it to fire an event.
The leaflet code itself is pretty simple.
L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18
}).addTo(map);
myLayer.on('tileerror', function(error, tile) {
console.log(error);
console.log(tile);
});
Ref: https://github.com/Leaflet/Leaflet/blob/v0.7.3/src/layer/tile/TileLayer.js#L581
Does it help ?
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 have already added geojson features to my leaflet map. I want to be able to loop through those geojson features. WHen I do map.eachLayer(function(layer) {...}) it only shows be the tile layer and none of the geojson that are added.
Rather than map.eachLayer, you should be using the .eachLayer method on the L.geoJson itself. For example:
var geoJsonLayer = L.geoJson(myGeoJson).addTo(map);
geoJsonLayer.eachLayer(function(layer) {
layer.bindPopup(layer.feature.properties.name);
});
You can also specify a function to be applied to each feature at the time you create the L.geoJson, using the onEachFeature option.
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', {
...
})
...