I have a standard leaflet map, for various reasons (high resolution data) I need to zoom in further than the default settings allow, to centimetres.
how do I override this max zoom setting?
My code is currently:
<script>
// Set the projection system using proj4js and proj4leafletjs(not sure this works yet)
var crs = new L.Proj.CRS('EPSG:32365',
'+proj=utm +zone=35 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [
8192, 4096, 2048, 1024, 512, 256, 128
],
origin: [0, 0]
})
// Creating map options
var mapOptions = {
center: [38.623162,27.9282893],
zoom: 10,
zoomSnap: 0.25
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
</script>
Related
I'm using ol v5.3.0 for view static image.
I want to bound the image for the size of the ol div.
When the image minimize more than the div size the will not minimize anymore.
I tried to use the projection attribute of the static image with the extent of the original image size
But it does not help.
there is any option to do it?
Based on this example https://openlayers.org/en/v4.6.5/examples/static-image.html
Instead of opening immediately at zoom 2, if first you fit the extent to the map size and get the zoom level (which will be fractional) which that produces and set it as the minimum zoom the map cannot be zoomed out beyond the size of the image (although it is possible to pan outside the extent).
var extent = [0, 0, 1024, 968];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: '© xkcd',
url: 'https://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageExtent: extent
})
})
],
target: 'map',
view: new ol.View({
projection: projection
})
});
var view = map.getView();
view.fit(extent, { constrainResolution: false });
view.setMinZoom(view.getZoom());
// set opening zoom level (zoom set by code must not be less than the minZoom)
view.setZoom(Math.max(2, view.getMinZoom());
var center = ol.extent.getCenter(extent);
view.on(['change:center','change:resolution'], function() {
// map.on('moveend', function() { // alternative
var viewCenter = view.getCenter();
if ((viewCenter[0] != center[0] || viewCenter[1] != center[1]) && view.getZoom() == view.getMinZoom()) {
view.setCenter(center);
}
});
I'm working on a dynamic image mapper that will users can load their floor plan of apartment then put markers on parts of floor. So I wan't to change url of image layer of Leaflet map dynamically.
I'm loading map with ChangeMap function for the first time. It loads my image correctly.
function ChangeMap(_url)
{
var map = L.map('map', {
minZoom: 1,
maxZoom: 5,
center: [0, 0],
zoom: 3,
crs: L.CRS.Simple
}).setView([50.4333, 30.5167], 3);
// dimensions of the image
var w = 1526,
h = 626,
url = _url;
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
var bounds = new L.LatLngBounds(southWest, northEast);
// add the image overlay,
// so that it covers the entire map
var overlay = L.imageOverlay(url, bounds);
overlay.addTo(map);
}
But if I try another time without refresh the page I'm getting an error "map container is alreay initialized". After that error I thought I can add div with id='map' dynamically like this.
var mapContainer = $("#mapContainer");
mapContainer.append("<div id='map' width='100%' height='400px'></div>");
I added that append function at the beginning of my ChangeMap() function. But this time there was no map on page. How can I do this ?
Only initialize the map once...So take var map = L.map('map', {... out of ChangeMap and only run it once before.I'd also recommend only initializing the L.imageOverlay once...and using setUrl to dynamically swap when needed inside ChangeMap.
I am using mapbox/leaflet to display a picture of a human body rather than a regular map.
I am using leaflet draw and I need to be able to create a circle and move it around while maintaining its radius. However, when I move it towards the bottom of the map/screen, the size increases exponentialy. I want it to stay the same size.
I assume it's something to do with projection or CRS but I'm not sure what to do to stop it.
My code is :
var mapMinZoom = 0;
var mapMaxZoom = 4;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple,
noWrap: true,
continuousWorld: true
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 3840], mapMaxZoom),
map.unproject([4096, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('/tiles/{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with MapTiler',
noWrap: true,
continuousWorld: true
}).addTo(map);
var touches;
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
}
}).addTo(map);
map.on('draw:created', function (e) {
featureGroup.addLayer(e.layer);
});
Any ideas? I don't need to use leaflet draw, just the L.circle would do, but it has the same issue.
Gif of issue here :
Turns out there are a load of todos in the leaflet 0.7 code... including this little gem :
// TODO Earth hardcoded, move into projection code!
_getLatRadius: function () {
return (this._mRadius / 40075017) * 360;
},
_getLngRadius: function () {
return this._getLatRadius() / Math.cos(L.LatLng.DEG_TO_RAD * this._latlng.lat);
},
Updated to 0.8Dev and it has all been fixed!
My leaflet map with custom tiles is working properly until I try to set the max bounds for my map.
var SWCorner = new L.LatLng(-312, -180);
var NECorner = new L.LatLng(180, 312);
var MaxBounds = new L.LatLngBounds(southWest, northEast);
var map = L.map('map', { crs: L.CRS.EPSG4326, draggable: true }).setView([-63, 65], 1);
map.setMaxBounds(MaxBounds);
L.tileLayer('http://localhost:9000/CustomIcons/tile_{z}_{x}-{y}.png', {
boxZoom: false,
minZoom: 1,
maxZoom: 5,
tms: true,
noMoveStart: true,
keyboardPanOffset: 10,
noWrap: true,
tileSize: 350
}).addTo(map);
Things I have tried are:
var SOMmap = L.map('SOMmap', { crs: L.CRS.EPSG4326 maxBounds: new L.LatLngBounds([-312,-180],[180,312]}).setView([-63, 65], 1);
var SOMmap = L.map('SOMmap', { crs: L.CRS.EPSG4326,
draggable: true, maxBounds: MaxBounds }).setView([-63, 65], 1);
var SOMmap = L.map('SOMmap', { crs: L.CRS.EPSG4326,
draggable: true
}).setView([-63, 65], 1).setMaxBounds(MaxBounds);
Whenever I try to set the max bounds, the tiles always vanish. How do I need to call the setMaxBounds?
From http://spatialreference.org/ref/epsg/4326/
EPSG:4326
WGS 84
WGS84 Bounds: -180.0000, -90.0000, 180.0000, 90.0000
Projected Bounds: -180.0000, -90.0000, 180.0000, 90.0000
Scope: Horizontal component of 3D system. Used by the GPS satellite navigation system and for NATO military geodetic surveying.
Last Revised: Aug. 27, 2007
Area: World
So your values for the LatLngBounds are not valid in this projection lat should be between -180 and 180 , lng between -90 and 90
Im using an Leafletjs for an home project(This is have it looks, right now.
But i can't find have to setup the projection, i have found it for OpenLayers, which looks like this:
// Openlayers settings
//var defaultMaxExtent = new OpenLayers.Bounds(427304, 6032920, 927142, 6485144);
var defaultMaxExtent = new OpenLayers.Bounds(427304, 6032920, 927142, 6485144);
var defaultProjection = "EPSG:25832";
var defaultUnits = "Meters";
var defaultResolutions = new Array(1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024);
var defaultExtent = new OpenLayers.Bounds(215446, 2103547, 706886, 6203897); //this extent is used when the page is loaded.
//var defaultExtent = new OpenLayers.Bounds(705446, 6203547, 706886, 6203897); //this extent is used when the page is loaded.
map = new OpenLayers.Map('map', { projection: defaultProjection, units: defaultUnits, maxExtent: defaultMaxExtent, resolutions: defaultResolutions, controls: [
// Hide controls by default
new OpenLayers.Control.Navigation({ wheelChange: HideInfoBox() }),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()]
});
layer = new OpenLayers.Layer.WMS("kort", "http://serverAddress?", { nbr: '', username: 'admin', password: 'adminadmin', layers: 'Overlayer', format: 'image/png' });
Anybody that can help me?
Update:
I have tried to take the standard projection from Leaflet and customized it, like so
L.CRS.EPSG25832 = L.extend({}, L.CRS, {
code: 'EPSG:25832',
projection: L.Projection.SphericalMercator,
transformation: new L.Transformation(0.5 / Math.PI, 0.5, -0.5 / Math.PI, 0.5),
project: function (latlng) { // (LatLng) -> Point
var projectedPoint = this.projection.project(latlng),
earthRadius = 6378137;
return projectedPoint.multiplyBy(earthRadius);
}
});
Now the projection is correct. But the problem now is the coordinates is wrong, so forexample if i get the coordinates from Leaflet, Kolding is now loacted in mid france not in Denmark.
I found the solution to the problem myself.
By doing this instead:
var crs = L.CRS.proj4js('EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs', new L.Transformation(0.5 / (Math.PI * L.Projection.Mercator.R_MAJOR), 0.5, -0.5 / (Math.PI * L.Projection.Mercator.R_MINOR), 0.5));
var map = new L.Map('Krak-Map', { center: new L.LatLng(latitude, longitude), zoom: 17, crs: crs });