We Keep Coding

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).

OpenLayers: lock map to the vector's extents

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.

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);

Mapbox draw direction via two markers

How can i draw route direction from start to finish if I have coordinates of this two points?
Now my code looks like this and it just gave me 2 static markers on map
var map = L.mapbox.map('map', 'mapbox.streets', {
zoomControl: false
}).setView([start.lat, start.lng], 12);
map.attributionControl.setPosition('bottomleft');
var directions = L.mapbox.directions({
profile: 'mapbox.walking'
});
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
L.marker([start.lat, start.lng], {}).addTo(map);
L.marker([finish.lat, finish.lng], {}).addTo(map);

If I understand correctly, you wish to use Mapbox's direction and routing layer to get the walking route between the two points and display it. To do so you need to set the origin and destination points and call the query() function of direction. You also need to add a routes control to the map. The revised code is as follows.
// example origin and destination
var start = {lat: 22.3077423, lng: 114.2287582};
var finish = {lat: 22.3131334, lng: 114.2205973};
var map = L.mapbox.map('map', 'mapbox.streets', {
zoomControl: false }).setView([start.lat, start.lng], 14);
map.attributionControl.setPosition('bottomleft');
var directions = L.mapbox.directions({
profile: 'mapbox.walking'
});
// Set the origin and destination for the direction and call the routing service
directions.setOrigin(L.latLng(start.lat, start.lng));
directions.setDestination(L.latLng(finish.lat, finish.lng));
directions.query();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions)
.addTo(map);
You may not need to add the origin / destination markers yourself, as origin / destination markers would be displayed as part of the directions control.

You'll need a polyline for that. Leaflet's (Mapbox is an extended version of Leaflet) class L.Polyline is what you need:
Reference: http://leafletjs.com/reference.html#polyline
Code:
var polyline = new L.Polyline([
[start.lat, start.lng],
[finish.lat, finish.lng]
]).addTo(map);
Example on Plunker: http://plnkr.co/edit/2XSeS1?p=preview

Leaflet OSM: Center mapview on polygon

I want generate a html file including Leaflet library to show an OpenStreetMap view with a polygon. The polygon on the map should be centered. To do so i followed this discussion, but its still unclear to me, how to center an arbitrary polygon and autozoom it. Autozoom means to me, that the polygon is completly in the visible map excerpt and fills it.
As example this would be the desired result:
This is my code so far:
var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];
function initmap() {
// set up the map
map = new L.Map('map');
/* --- Replace for different URL for OSM tiles */
var url_base ='URL_TO_MY_OPENSTREETMAPS_SERVER';
var latitude = 50.2222;
var longtitude = 3.322343;
var poly = L.polygon([
[50.2222, 3.322343],
[50.2322, 3.323353],
[...]
]);
// create the tile layer with correct attribution
var osmUrl=url_base+'{z}/{x}/{y}.png';
var osmAttrib='Map data ɠOpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 4, maxZoom: 20, attribution: osmAttrib});
// start the map at specific point
map.setView(new L.LatLng(latitude, longtitude),15);
map.addLayer(osm);
poly.addTo(map);
}
Especially it would be great, if there are "onboard" methods of Leaflet that i can use. How to calculate the center of a polygon is clear to (e.g. here) but maybe there are already implemnented methods i can use.
Solution:
// start the map at specific point
// map.setView(new L.LatLng(latitude, longtitude),15); <- Remove this line
map.addLayer(osm);
poly.addTo(map);
map.fitBounds(poly.getBounds()); // <- Add this line

Not exactly centering, but if you want the map to be fitted to the polygon:
map.fitBounds(poly.getBounds());
(doc).

To center more than one polygon is good to know that .fitBounds also accepts an array as argument, so you could do this:
const poly = [polygonA,polygonB,polygonC];
const bounds = poly.map(p=>p.getBounds());
mymap.fitBounds(bounds);