Is there an easy way to lock the center of a map?
You can disable dragging / panning easily with map.dragging.disable(); but that doesn't make the center of the map fixed. Searched for it in the documentations and on the web but can't find anything.
The maxBounds option (paired with maxBoundsViscosity) should do the trick - just convert the LatLng you want to be centered into a zero-area LatLngBounds.
Use the option scrollWheelZoom: "center" to fix zooming with the scroll wheel to the center of the map.
var map = L.map('map', {
center: [0,0],
dragging: false,
scrollWheelZoom: "center",
});
Related
After drawing a polygon on the Map, when clicking on the Map, the polygon will turn into a static mode (blue color). Is it possible to keep the editable mode when the user clicks on the Map outside the polygon?
this.draw = new MapboxDraw({
displayControlsDefault: false,
});
this.map.addControl(this.draw);
I'm trying to make an moon CRS JS file, but my géo-mathematics are not very good, in fact, i don't understand ! But i've a to do a scientifics experience, can you help me ? Peraphs it can be done with just configuration.
Let me explain, i need to set magnetic north pole on moon map.
I use moon map from: https://cartocdn-gusc.global.ssl.fastly.net/opmbuilder/api/v1/map/named/opm-moon-basemap-v0-1/all/{z}/{x}/{y}.png
I need to change pole north, because when i set a marker to [0,0], the marker appear not where i want. In other manner, i need to move north pole where i want. On earth, and moon if i want.
After that, i ll set pointer from public data and whatch what it done. On moon, on earth, on personal photo.
thanks i'll try to find it
const map = L.map('map', {
// crs: L.CRS.EPSGMoonMercator, // MoonMercator
// crs: L.CRS.EPSGMoonSphericalMercator, // MoonMercator
// crs: L.CRS.EPSG3395, // Mercator
crs: L.CRS.EPSG3857, // SphericalMercator
center: [-70,0],
zoom: 4,
// minZoom: 3,
// maxZoom: 8,
});
Yellow is the image, cyan is the coords, red is the centre for both. Coords are like that because that is the allowable area in the map.
Ive got coordinates where the actual center of them is not the middle point of the coordinates. That means each side is a little wonky from the center.
As i know the exact center from the coordinates, could it be possible to anchor that center to the middle of the image where it is the actual center for those coordinates. Would be a blast to just slap it there.
Or could i somehow add a margin towards each direction so with a little fiddling i could make it like in the illustration.
I have attempted to play with the coordinates themselves to make it fit the image, but that feels impossible to make it right, the image either goes wonky or the markers that i add go off their right spots whenever i get one of the edges right.
Edit: and im using CRS.Simple here.
The best solution is using the turf library
const map = L.map('mapid').setView([52.308478623663355, 19.281005859375004], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const test = [
[15.3369140625, 49.55372551347579],
[23.97216796875, 49.55372551347579],
[23.97216796875, 54.316523240258256],
[15.3369140625, 54.316523240258256],
[15.3369140625, 49.55372551347579]
];
const polygon = turf.polygon([test]);
const centroid = turf.centroid(polygon);
const featCollection = {
features: [polygon, centroid]
}
const polu = L.geoJSON(featCollection).addTo(map);
map.fitBounds(poly.getBounds());
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
min-height: 100%;
}
#mapid {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#turf/turf#5/turf.min.js"></script>
<div id="mapid"></div>
I don't recommand to use turf if it is not necessary.
You can use the Leaflet built-in getCenter() function.
getCenter() is working for Polyline, Polygon and Rectangles.
getCenter(): Returns the center (centroid) of the polyline / polygon / rectangle.
Resolved by making calibration points to the imageOverlay, taking coords from those points, adding them into leaflet as markers, then fiddling around once again but with those calibration points i got them centered in under an hour. Still not perfect but i guess im happy with it.
I'm doing an app in my app. I'm using google maps flutter and I'm having an issue regarding scrolling. When I scroll the map I want to get the center points (long, lat) of the map that is if I scroll the map and stop at certain place it would grab the location points of center.
Can anyone suggest how to solve this issue? It can be very helpful Thank you in advance..
I would get the bounds of the screen, and then find the center of those bounds. If you have a GoogleMapController for the GoogleMap, just use a function like this:
getCenter() async {
LatLngBounds bounds = await mapsController.getVisibleRegion();
LatLng center = LatLng(
(bounds.northeast.latitude + bounds.southwest.latitude) / 2,
(bounds.northeast.longitude + bounds.southwest.longitude) / 2,
);
return center;
}
In the latest version of google maps flutter we can get the coordinates of location by passing in the screen coordinatinates,
// some code here
Size screen = MediaQuery.of(context).size;
// some code here
final coords = await mapController.getLatLng(ScreenCoordinate( x: screen.width/2, y:
screen.width/2));
I'm using an imageoverlay in leaflet
var imageUrl = 'img.png';
L.imageOverlay(imageUrl,mapBounds1).addTo(map);
When i zoom the map, the image zooms also , is there any way to make the image static ?
I also tried tiles (from the image), and it zooms also, i'm wondering if the only way is to create multiple tiles for each zoom.
Any help ?
You could try something like this...
map.on('zoomstart', function(e) {
//remove layer
});
map.on('zoomend', function(e) {
//add layer back with new bounds
});
You need to subscribe somehow to the viewreset event
viewreset is fired when the map needs to reposition its layers (e.g. on zoom), and latLngToLayerPoint is used to get coordinates for the layer's new position. (http://leafletjs.com/reference.html#map-viewreset)
I'm not sure this will work, but try something like
var imageUrl = 'img.png';
var overlay = L.imageOverlay(imageUrl,mapBounds1).addTo(map);
overlay.off('viewreset');