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
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})
Can someone provide an explanation on how to use the Leaflet Marker Icon XY Coordinates listed here:
http://leafletjs.com/examples/custom-icons/
Is lng/lat directly mapped to x/y? For example, sometimes in game engines, the Y pixel increases in value, but goes down the page.
Here is it the same? I can't quite wrap my head around it.
Not exactly sure what you mean by "Is lng/lat directly mapped to x/y?", but here are some explanations that should talk enough:
(tile courtesy MapQuest)
As in most image manipulation software:
X increases from left to right
Y increases from top to bottom
When specifying iconAnchor and shadowAnchor for Leaflet custom icons, these directions still apply. Furthermore, like in most image software as well, the origin is the top left corner of your image.
var myIcon = L.icon({
iconUrl: 'path/to/image.png', // relative to your script location, or absolute
iconSize: [25, 41], // [x, y] in pixels
iconAnchor: [12, 41]
});
As explained in the doc, if you specify iconSize but not iconAnchor, Leaflet will assume your icon tip is at the center of your image and position it accordingly (same for shadow).
But if you do specify neither iconSize nor iconAnchor, Leaflet will position your icon image "as is", i.e. as if its tip was its top left corner. Then you can apply a className option and define it in CSS with negative left and top margins to re-position your image.
var myIcon = L.icon({
iconUrl: 'path/to/image.png',
// iconSize: [25, 41],
// iconAnchor: [12, 41], // [x, y]
className: 'custom-icon'
});
.custom-icon {
margin-left: -12px; /* -x */
margin-top: -41px; /* -y */
}
This usage might be more interesting when using a DivIcon, for which you may not know the size in advance, and use CSS transforms to position it.
As for the popupAnchor, it uses the icon tip as origin, so you will most likely specify a negative y value, so that the popup appears above the icon.
popupAnchor: [1, -34] // [x, y]
Finally when adjusting your anchor values, a useful trick is to add a normal default marker at the exact same Lat/Lng location as the marker with your custom icon, so that you can compare both icon tip positions easily.
Working example: http://markercluster.meteor.com/
If you double click on the map to add a marker, then this place will be the upper left corner marker, not pin.
The coordinates of the mouse pointer and marker coordinates coincide: it can be seen in the browser console.
Actually the question: What am I doing wrong? How to make a marker added correctly?
Solved by adding option iconAnchor
EDIT:
myIcon = L.icon(
iconUrl: "packages/leaflet/images/marker-icon.png"
shadowUrl: "packages/leaflet/images/marker-shadow.png"
iconAnchor: [12, 41] #[iconWidth/2, iconHeight]
)