OpenLayers: lock map to the vector's extents - javascript

I'm learning how it is possible to create a library in JavaScript using OpenLayers. Normally I use the code below to lock my map on the vector extent passed manually.
var minX= 3.0025038498794938;
var minY= 47.7706339888675302;
var maxX= 5.1702255722362533;
var maxY= 49.5690401585264695;
var maxExtent = [minX, minY, maxX, maxY];
var boundary = ol.proj.transformExtent(maxExtent, 'EPSG:4326', 'EPSG:3857');
var center = ol.proj.transform([4.0863647111, 48.6698370737], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
extent: boundary,
center: center,
zoom: 9,
maxZoom: 18,
minZoom: 8,
});
map.setView(view);
My aim is use the same phylosophy but using the extent of a vector inside a specific function. I'm be able to load the map on a zoom on the vector extensions:
function getPolygonsExtent() {
vectorsLayer.getSource().once('change', function(evt) {
if (vectorsLayer.getSource().getState() === 'ready') {
if (vectorsLayer.getSource().getFeatures().length > 0) {
extent = vectorsLayer.getSource().getExtent();
options = {
size: map.getSize(),
padding: [0, 0, 0, 0],
}
map.getView().fit(extent, options);
}
}
});
};
But I've no idea how I can follow my aim. I thought there was a function like map.getView().setExtent(extent);, but is is not so. Any suggestions?

There is no setExtent() method so you will need to create a new view
map.getView().fit(extent, options);
var newView = new ol.View({
extent: extent,
showFullExtent: true,
center: map.getView().getCenter(),
zoom: map.getView().getZoom(),
maxZoom: 18,
minZoom: 8,
});
map.setView(newView);
The fit() method fits the extent inside the map, but by default the extent option constrains the map inside the extent, use showFullExtent for similar behaviour to fit(). If your fit options include a duration you will also need a callback to update the view when it is finished inside of doing it in inline code.

Related

Map crashes when I zoom to an extent that is too far east

I've got a map with a button that zooms to the extent of a feature. It works fine most of the time but when the extent is too far east the entire map dissapears.
This is what I've got in javascript:
function initMap() {
var view = new ol.View({
center: endpoint,
zoom: 4,
maxZoom: 16,
});
map = new ol.Map({
target: 'map',
layers:[],
view: view
});
map.addControl(zoomToExtentControl);
};
zoomToExtentControl = new ol.control.ZoomToExtent({
extent: [-1013450.0281739295, 3594671.9021477713, 6578887.117336057, 10110775.689402476],
className: 'custom-zoom-extent',
label: 'Z'
});
and later in another function:
let xMinMax = ol.proj.fromLonLat([xMin, xMax]);
let yMinMax = ol.proj.fromLonLat([yMin, yMax]);
let padding = 1.06;
zoomToExtentControl.extent = [(xMinMax[0] * padding), (yMinMax[0] * (padding-0.02)), (xMinMax[1] * padding), (yMinMax[1] * padding)];
Why does the map crash when the extent is in the east but work fine when its not? How can I fix this?
I don't understand the xMinMax/yMinMax calculation, ol.proj.fromLonLat input is a coordinate as longitude and latitude, i.e. an array with longitude as 1st and latitude as 2nd element. It seems you are using two longitudes or two latitudes (I read two x and two y).

setView not defined with bing API

Im trying to change the mapview while using Bing maps API. I have my map initialized already but im trying to change the map view to center in on a pin who's location i have. Im merely trying to get the view to move using setView but im unsure how to move it.
function findpin() {
console.log("hello3");
var pin;
//loop through and find searched pin object
for (var i = 0; i < allPins.length; i++) {
if (searchbox.value == allPins[i].entity.title) {
pin = allPins[i];
break;
}
};
console.log(pin);
//set pin
pinSelected(pin);
//var locs = [array of Microsoft.Maps.Location];
//var rect = Microsoft.Maps.LocationRect.fromLocations(locs);
map = setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center:new Microsoft.Maps.Location(0, 0),
zoom:100,
});
console.log("hello5");
}
Assuming that you initialized the map by:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
Then you can use the setView on the instantiated map to update the view:
map.setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(0, 0),
zoom: 20
});
Notice that the max zoom level is 20.

Leaflet custom map with custom tiles

I am trying to make a custom map with leafletjs, and i've figured it out for the version 0.6.x but when it comes to the latest version (0.7.x) it does not work.
This is the code that works with 0.6.x
Anyone has had this issue before?
var mapMinZoom = 0;
var mapMaxZoom = 5;
var map = L.map('wu-map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 3072], mapMaxZoom),
map.unproject([4352, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('images/map/{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with MapTiler',
noWrap: true,
tms: false
}).addTo(map);
There is a bug in leaflet.js 0.7 version that appears when crs option is set to L.CRS.Simple value (and not only). Leaflet 0.7 introduced L.CRS.getSize (a function which returns the size of the world in pixels for a particular zoom for particular coordinate reference system), which by default calls and returns the same value as L.CRS.scale. It works great for the default CRS and fails for others.
All I can suggest is to remove crs: L.CRS.Simple from your options object, it will be set to default value (L.CRS.EPSG3857):
var map = L.map('wu-map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom
}).setView([0, 0], mapMaxZoom);

coordinates returned are not correct

I'm using OpenLayers3 with OSM as a background map. I'm retrieving coordinates when clicking on the map. However, for some reason I do not understand, the coordinates returned differ from what they should be.
The crs is EPSG:3857 and the coordinates returned are for example:
[149320862354.13303, 7149613.877682245]
But they rather should look like this:
[1347655.049747, 7147342.608955]
I do not know why they are returned like this. I did not change anything in my code or configuration.
map.on('singleclick', function (e) {
var coordinates = map.getEventCoordinate(e.originalEvent);
console.log(coordinates);
}
Any ideas what is causing this?
Edit:
I've logged the map object to console:
projection_: ol.proj.EPSG3857_
revision_: 0
values_: Object
center: Array[2]
0: 149320863424.25146
1: 7177589.830034621
length: 2
__proto__: Array[0]
resolution: 152.8740565703525
rotation: 0
As you can see the coordinates of the center (especially center[0]) are wrong. I guess this issue may be caused by creating the map.
var map = new ol.Map({
layers: [
gnMap.getLayersFromConfig() //MapQuest, OSM, Bing
],
renderer: 'canvas',
view: new ol.View({
center: [0, 0],
projection: 'EPSG:3857',
zoom: 2
})
});
But I can't figure out why those are either created or returned wrong.

mapbox.js: set map limit bounds

I'm working on a map with mapbox.js but I want to set a limit to map bounds and zoom.
What code I've to add to this script?
var map = L.mapbox.map('map', 'examples.map-9ijuk24y').setView([40, -74.50], 9);
These are options you can put in an object to pass to L.mapbox.map as the third argument. The documentation for L.mapbox.map says that is can take all the same options as Leaflet's L.map, which are documented here. The options you want are minZoom, maxZoom, and maxBounds. Eg:
var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {
minZoom: 5,
maxZoom: 12,
maxBounds: [[30.0,-85.0],[50.0,-65.0]]
}).setView([40, -74.50], 9);

Categories