Created map with leaflet js. Added osm as basemap with the attributes as below:
var osm_base_map = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
});
The map is working fine. But the problem is, some tiles are missing from the right side of the map when I am panning the base map as I marked with the attached image.
I am expecting to load all the tiles within the bounding box.
Please help.
Related
I am using leaflet and openstreet maps. I created a png using EPSG3857 however the image is not laying correctly on the map.
if you look at the Baja Region and Florida you will see the data on land. The data should be over the water not the land.
var map = L.map('map', { editable: true },{crs: L.CRS.EPSG3857}).setView(initialCoordinates , initialZoom),
tilelayer =
L.tileLayer(url_tile,
{
noWrap: true,
maxZoom: 12, minZoom: 2, attribution: 'Data \u00a9 OpenStreetMap Contributors Tiles \u00a9 HOT'
}).addTo(map);
var overlay_image = 'images/webmercator-google.png';
imageBounds = [[-90, -180], [90, 180]];
L.imageOverlay(overlay_image, imageBounds, { opacity: 0.8 }).addTo(map);
When using EPSG:3857, Leaflet clamps all latitude data to +/-85.05° (or, to be precise, +/-20037508.34 on the EPSG:3857 Y coordinate). This is done to prevent data appearing outside of the coverage area of default EPSG:3857 tiles.
To illustrate this, consider the following bit of code:
for (var i=83; i<90; i+=0.1) {
L.marker([i, i]).addTo(map);
}
That should (naïvely) display a lot of markers in a diagonal-ish line. But when actually doing that, the result looks like:
See how the markers don't go north of the 85.01° parallel, and how that fits the limit of tiles (blue sea versus grey out-of-map background).
Remember, EPSG:3857 and any other (non-traverse, non-oblique) cylindrical projections cannot display the north/south poles because they get projected to an infinite Y coordinate.
OK, so what does this have to do with your problem? You're using:
imageBounds = [[-90, -180], [90, 180]];
But, since Leaflet will clamp latitudes, that's actually the same as doing:
imageBounds = [[-85.01, -180], [85.01, 180]];
Keep this in mind when using L.ImageOverlays that cover areas near the poles. You probably want to recreate your image using a narrower band of latitudes.
I have a very large map project which uses labels (and only labels from mapbox. That is, I don't get any boundaries or terrain from mapbox.)
I bring those vector tiles into Leaflet Using mapbox-gl-leaflet.
Generally, everything works great. However as soon as the map is taller than it is wide, the labels no longer align with the countries (which have been drawn as polygons using GeoJSON). Here is a pic of what happens and the relevant code is below.map with labels unaligned
map with labels not alignted
Any thoughts or insights would be helpful. Here is the code that brings in the tiles:
settings.globalVariables.labelTiles = L.mapboxGL({
accessToken: myAccessToken,
style: 'mapbox://styles/markslawton/ckgsqyzhi0diy19rwi98mlt4g',
pane: 'labels',
}).addTo(settings.globalVariables.map);
Here is the code that creates the map:
Window.map = settings.globalVariables.map = new L.map('map', {
zoomControl: false,
zoomDelta: settings.map.zoomDelta,
zoomSnap: settings.map.zoomSnap,
minZoom: settings.map.minZoom,
maxZoom: settings.map.maxZoom,
dragging: true,
trackResize: true,
attributionControl: false,
// maxBounds:[[-90,-180],[90,180]]
});
I'm not 100% sure, but I suspect the issue is with the north/south bounds of your map. Mapbox is constrained to the Web Mercator projection, which tops out at around 85º/-85º latitude. Judging from your image here, you are trying to show latitudes well north of there.
You probably need to constrain the bounds of your map with tighter bounds, or increase the minimum zoom, so this situation doesn't arise.
In my angular application I have created the leaflet map and over the leaflet map I have created two more panels data in overlapping manner And I have created the circle of 5 km radius on the map. But my problem is the panels are covering the circle on the leaflet map
So my requirement is to move the center position of the map i.e circle to top position(top middle) than only the circle will be visible otherwise it will be covered by the panels on the map.
component.ts
map = L.map('map').setView([13.0827, 80.2707], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.control.zoom({
position: 'bottomright',
}).addTo(map);
I am new to leaflet map Can anyone help me regarding this.
You can let the map fit the circle bounds, like:
var circle = L.circle() // Your circle
map.fitBounds(circle.getBounds())
To show the circle on the left side of the map:
map.setView(circle.getLatLng(),map.getZoom(),{animate: false})
sw = map.getBounds().getSouthWest();
psw = map.latLngToContainerPoint(sw);
center = map.getCenter();
pc = map.latLngToContainerPoint(center);
dis = pc.x - psw.x;
middle = dis / 2
pnewCenter = L.point(pc.x+middle,pc.y)
center2 = map.containerPointToLatLng(pnewCenter);
map.setView(center2,map.getZoom(),{animate: true})
Is it possible to only have vertical bounds in leaflet to remove grey bands above and below the leaflet map?
Grey bands around map
I still want to keep horizontal wrap but just want to remove the grey areas.
you can simply use the minZoom option, and set it to 3, that's what I do ;)
this.map.setView(new L.LatLng(31.585692323629303, 35.19333585601518), 2);
L.tileLayer(`https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png`, {
maxZoom: 20,
minZoom: 3,
attribution: 'HOT'
}).addTo(this.map);
in my case using angular, hope it help
I want to calculate altitude of a marker but I didn't find any solution in Leaflet. I found the elevation plugin which allow to draw elevation profil on map, but I don't need that. Do you have idea how to calculate altitude? Thank you.
Edit: A nice option
Adding this for anyone who might want it: since having written this answer, I wrote the plugin leaflet-topography to make doing this very fast and easy.
Original answer:
Not sure if anyone has answered yet but I cracked my head over this for a week and found a nice solution. First, you need to get the leaflet plugin leaflet-tileLayer-colorPicker:
https://github.com/frogcat/leaflet-tilelayer-colorpicker
This plugin enables you to get the color of a certain pixel on the map, given the latitude and longitude. Then, you need a dataset. One that's designed for this is the mapbox Terrain-RGB tiles:
https://docs.mapbox.com/help/troubleshooting/access-elevation-data/
These tiles have elevation data encoded in RGB format. The description on mapbox's site was not step-by-step enough for a beginner like me, so here's how you can do it:
Add the Terrain-RGB tilelayer
var colorPicker = L.tileLayer.colorPicker('https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.outdoors',
accessToken: 'your mapbox accesstoken'
}).addTo(yourMap)
.setOpacity(0); // optional
Create a function which takes in latlng and outputs RGB as an array
function getElevation(location){
var color = colorPicker.getColor(location)
// location is an array [lat, lng]
Pick apart the RGB values of the array and put into mapbox's elevation equation
let R = color[0];
let G = color[1];
let B = color[2];
let height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)
let heightRounded = Math.round( height * 10) / 10 + ' meters';
return heightRounded;
}
That last bit is just to give a nice number rounded to the first decimal, output as a string like "182 meters", but you can write it however you like.
I had a similar problem working on a Shiny app with leaflet and found a workaround using Google Elevation API and google_elevation() function of googleway package
The latter (R part) is probably not in your interest but the Google Elevation API implementation should work for you.