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
Trying to construct a Leaflet map. The goal is to place average points on the map for each country, using Choropleth. BindpopUp works. But for some reason, it doesn't show the borders of the countries like it was intended to but only the simple markers. Which is what I do not want.
var myMap = L.map("map", {
center: [40.7128, -74.0059],
zoom: 2.5
});
// Adding tile layer
L.tileLayer(
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
{
attribution:
'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: "mapbox.streets",
accessToken: API_KEY
}
).addTo(myMap);
var geojson;
// Grab the data with d3
d3.json("static/js/wine.json").then(function(data) {
// This should place borders for the countries
L.geoJson(data).addTo(myMap);
// Create a new choropleth layer
geojson = L.choropleth(data, {
// Define what property in the features to use
valueProperty: "points",
// Set color scale
scale: ["#ffffb2", "#b10026"],
// Number of breaks in step range
steps: 10,
// q for quartile, e for equidistant, k for k-means
mode: "q",
style: {
// Border color
color: "#fff",
weight: 1,
fillOpacity: 0.8
},
// Binding a pop-up to each layer
onEachFeature: function(feature, layer) {
layer.bindPopup(
feature.properties.country +
", " +
feature.properties.points+
"<br>Median Price per bottle of wine:<br>" +
"$" +
feature.properties.price
);
}
}).addTo(myMap);
});
Based on the sample data from your previous question, you simply need to modify your GeoJSON data to specify "Polygon" type geometries (with array of coordinates), instead of your current "Point" type geometries (which are rendered by default by Leaflet as simple Markers).
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 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