I have a few WMS layers generated by geoserver (data from postgis), in leaflet I'm creating layers using both L.tileLayer.wms and L.tileLayer. In both cases I have the same result - there is the same data on each tile. The data is repeated on each tile. The data is not on the correct coordinates.
Hard to explain, you can look at enclosed printscreen here.
My code look like this:
var sondy = new L.tileLayer.wms('http://localhost:8080/geoserver/archeo/wms?bbox=-556182.167458477,-1031638.88186088,-556085.240458477,-1031526.68186088&width=442&height=512', {
version: '1.1.0',
layers: 'archeo:sondy_5514>4326',
format: 'image/svg+xml',
crs: L.CRS.EPSG4326,
maxZoom: 21,
transparent: true,
attribution: 'Map data © Archeo'
});
var lokalita = new L.tileLayer('http://localhost:8080/geoserver/archeo/wms?service=WMS&version=1.1.0&request=GetMap&layers=archeo:lokalita%3E4326&styles=&bbox=17.001919195719633,50.3879944052749,17.00420450498308,50.38958109165828&width=512&height=355&srs=EPSG:4326&format=image%2Fsvg%2Bxml', {
layer: 'lokalita',
opacity: 1,
maxZoom: 21,
transparent: true,
attribution: 'Map data © Archeo'
});
Do you have an idea where is the problem? Is it in geoserver or leaflet code?
Thanks in advance,
Markéta
Ciao,
I am not an expert with leaflet but to me it looks like something's wrong in how you initialize your layers (for sure the WMS one, why you put the bbox in the source URL??):
Check this link:
http://leafletjs.com/reference.html#tilelayer-wms
Related
I have implemented the following piece of code where I need to fit a layer over a map, that I made using QGIS. But the coordinates are not working correctly, what should I do? The problem are the wrong coordinates or there is a way to fit the layer in the map correctly using overlay?
var L;
var initialCoordinates = [-14.91, -43.20];
var initialZoomLevel = 4;
// create a map in the "map" div, set the view to a given place and zoom
map = L.map('heatmap').setView(initialCoordinates, initialZoomLevel);
L.map('map', {
crs: L.CRS.EPSG4326
});
// add an OpenStreetMap tile layer
// L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
// attribution: '© OpenStreetMap © CartoDB',
// maxZoom: 19
// }).addTo(map);
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
}).addTo(map);
// [[5.32, -28.95], [-33.1999, -73.9]]
var imageUrl = '/images/temperatureMapDefault.png', //temperatureMapDefault.png
imageBounds = [[5.32, -28.95], [-33.1999, -73.9]]; // [[ymin, xmin][ymax, xmax]]
L.imageOverlay(imageUrl, imageBounds).addTo(map);
The coordinates for the bounding box are working just fine; the problem is in the projections.
Your QGIS project, and your output image, are using EPSG:4326. Leaflet uses EPSG:3857 (spherical mercator) for display. If you try to overlay a stretched EPSG:4326 image over a EPSG:3957 one, the top and bottom edges will fit but you'll experience a vertical shift.
You can see this more clearly by creating a bigger image in EPSG:4326 with country boundaries. I encourage you to experiment.
Please read https://docs.qgis.org/2.18/en/docs/user_manual/working_with_projections/working_with_projections.html and related documentation in order to configure your QGIS project to use a different CRS.
I am using leaflet and geoserver. I want to fetch only required region using Web Map Service (WMS). I am able to fetch all of the region from geoserver. But what if I need only one region. I write the following code for show all the data;
//load data form geoserver
var mywms = L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", {
layers: 'tajikistan:country1',
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "country layer"
});
mywms.addTo(map);
I want to add only one region (named as centre) from this server. I think I have to add the query in this dataset. But I don't know how can I query. Any help?
The WMS layer can be filtered by CQL_FILTER. Put option CQL_FILTER in code to filter required data;
L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", {
layers: 'tajikistan:country1',
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "country layer",
CQL_FILTER: "name_rg='centre'",
});
Anyone having problems to display Open street Map on leaflet?
Seems like the server is been down for two days?
var markersLayer = new L.LayerGroup(); // NOTE: Layer is created here!
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap ',
maxZoom: 18
});
var cartodb_light = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: 'Map data © OpenStreetMap contributors, © CartoDB ',
maxZoom:18
});
My ESRI layer does display but not the OSM? Anyone knows whats going on? It seems i cannot display the standard map on the website also... ?
I have implemented the following piece of code where I need to fit a layer over a map, that I made using QGIS. But the coordinates are not working correctly, what should I do? The problem are the wrong coordinates or there is a way to fit the layer in the map correctly using overlay?
var L;
var initialCoordinates = [-14.91, -43.20];
var initialZoomLevel = 4;
// create a map in the "map" div, set the view to a given place and zoom
map = L.map('heatmap').setView(initialCoordinates, initialZoomLevel);
L.map('map', {
crs: L.CRS.EPSG4326
});
// add an OpenStreetMap tile layer
// L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
// attribution: '© OpenStreetMap © CartoDB',
// maxZoom: 19
// }).addTo(map);
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
}).addTo(map);
// [[5.32, -28.95], [-33.1999, -73.9]]
var imageUrl = '/images/temperatureMapDefault.png', //temperatureMapDefault.png
imageBounds = [[5.32, -28.95], [-33.1999, -73.9]]; // [[ymin, xmin][ymax, xmax]]
L.imageOverlay(imageUrl, imageBounds).addTo(map);
The coordinates for the bounding box are working just fine; the problem is in the projections.
Your QGIS project, and your output image, are using EPSG:4326. Leaflet uses EPSG:3857 (spherical mercator) for display. If you try to overlay a stretched EPSG:4326 image over a EPSG:3957 one, the top and bottom edges will fit but you'll experience a vertical shift.
You can see this more clearly by creating a bigger image in EPSG:4326 with country boundaries. I encourage you to experiment.
Please read https://docs.qgis.org/2.18/en/docs/user_manual/working_with_projections/working_with_projections.html and related documentation in order to configure your QGIS project to use a different CRS.
I have a leaflet map that I will with this:
$('#map').height($(window).height()-64+'px');
var map = L.map('map' , { zoomControl:false }).setView([51.505, -0.09], 13);
new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
This gives a greyscale kinda boring map. I am trying to get a more colorful one for open street view like the one in the below link of you click on the layers and click "streets"
http://leafletjs.com/examples/layers-control-example.html
If you want to have a colored OSM map, change your L.tileLayer function with this
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
});
Here is a complete list of various basemap providers for leaflet.
Check this link as well