We Keep Coding

Restrict autocomplete to an array of polygons

I have a map in which I want to use autocomplete, but only within some areas. I have managed to create bounds as a recangle with two coordinates:
const southWest = new google.maps.LatLng( 55.25877294, 12.45849609 );
const northEast = new google.maps.LatLng( 56.30282487, 14.28497314 );
const defaultBounds = new google.maps.LatLngBounds( southWest, northEast );
But what I actually need is to have an array of coordinates as bounds, so that I can't search outside of the areas.
Here is my current solution: JS-FIDDLE
(I have some example coordinates in there on line 47 and below, if needed)

Spherical Mercator Lat/Lon from OpenLayers, want EPSG:4326 format

I am trying to get the EPSG:4236 format of longitude and latitude from OpenLayer, however I spent several hours trying to figure this out and I really don't get what I am doing wrong. I keep getting the spherical mercator format.
For setup I have the following:
var map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
This is my center of the map:
var lonLatCenter = new OpenLayers.LonLat( -73.0, 40.5 )
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom=14;
For click event I have the following code:
map.events.register("click", map, function(e) {
var position = map.getLonLatFromPixel(e.xy);
alert(JSON.stringify(position));
});
I get the following result when clicking on JFK airport in New York City:
{"lon":-8215245.2836805,"lat":4960351.5608374}
I have been reading information here but it seems to only show how to transform from EPSG:4326 to spherical mercator. Help would be appreciated and the link below is to the documentation :
http://docs.openlayers.org/library/spherical_mercator.html

Click event on map object return coordinates using map projection (shperical mercator).
You need to transform them to lat lon, like this
map.events.register("click", map, function(e) {
var position = map.getLonLatFromPixel(e.xy);
position.transform(map.getProjectionObject(), new OpenLayers.Projection('EPSG:4326'));
alert(JSON.stringify(position));
});

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

Drawing a path with a line in OpenLayers using JavaScript

I have seen the examples presented here of how to draw a line but the examples only show how to do it with the mouse, by clicking.
What I want to do is draw the line manually using JavaScript given a list of Longitude and Latitude coordinates.
The reason I cannot work on the source provided in the link above is because they are only calling activate on the feature, and then let the user point and click on the map.
Has anyone ever drew a path on an OpenLayers map programatically?
What I want to do is exactly this: http://openspace.ordnancesurvey.co.uk/openspace/example4.html, but without using OpenSpace.

You would need to make use of the LineString object
Here is an example:
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
var points = new Array(
new OpenLayers.Geometry.Point(lon1, lat1),
new OpenLayers.Geometry.Point(lon2, lat2)
);
var line = new OpenLayers.Geometry.LineString(points);
var style = {
strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5
};
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
lineLayer.addFeatures([lineFeature]);
Assuming map is your map object and lon and lat are float values.