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.
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 have the following Leaflet map: JSFiddle link
<div id="mapid" style="height: 300px;"></div>
<script>
var mapboxTiles = L.tileLayer(mapBoxUrl, {
attribution: attributionText
});
var map = L.map('mapid')
.addLayer(mapboxTiles)
.setView([42.888284, -78.877222], 16);
</script>
The font size for the street labels is very small, to the point of being unreadable, and when you zoom in, the font size gets smaller. Is there a way to control the font size?
It looks like you have 512px sized tiles, but mapping the Earth as if they were 256px sized.
Therefore you need a combination of tileSize and zoomOffset options on your Tile Layer to compensate for these settings, and retrieve the correct view with readable sized text on the tiles:
var mapboxTiles = L.tileLayer(mapBoxUrl, {
attribution: '© Mapbox © OpenStreetMap',
tileSize: 512,
zoomOffset: -1
});
Updated JSFiddle: https://jsfiddle.net/zq02pnpg/2/
I had this problem too. On my case, the map was rendering just okay on desktop, but when it came to mobile devices, it)(The font size) gets really small and is not readable.
I tried doubling the tile size as well as the zoom offset and it worked.
var mapboxTiles = L.tileLayer(mapBoxUrl, {
attribution: '© Mapbox © OpenStreetMap',
tileSize: 1024,
zoomOffset: -2
});
I'm not sure if this is a violation of any kind but it worked for me!
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
I've created a map in leaflet.js with multiple layers but can't work out how to toggle one layer to initially appear on the map.
Here is the link
I'm sure it's fairly straightforward but just can't figure it out.
After declaring your layers you need to add one to the map, just like you did with your tilelayer. See the code below. That should work. The layercontrol will work out that the layer is visible/added to the map and check it in the list.
var map = L.map('map').setView([52.814172, -2.079479], 9);
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg', {
maxZoom: 18,
attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
}).addTo(map);
// Left out layer-declarations, they are HUGE
anti_soc.addTo(map); // here it is
var overlayMaps = {
"Anti-social behaviour" :anti_soc,
"Criminal damage and arson": crim_dam,
"Burglary": burg,
"Violence and sexual offences": viol,
"Other theft": other_theft,
"Vehicle crime": veh_crime,
"Shoplifting": shoplift,
"Public order": pub_ord,
"Robbery": robb,
"Bicycle theft": bikes,
"Drugs": drugs,
"Theft from the person": theft_person,
"Other crime": other_crime,
"Possession of weapons": weap
};
L.control.layers(null, overlayMaps).addTo(map);
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