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));
});
Related
I am using OpenLayers map in UWP desktop app.But my opelayers Map is not showing driving distance(Route) from one point to another point. i can able to show map and markers on it like location markers on map but not able to show route between source and destination.
Any help Would be appreciated.
Here is my code:
var lat = mylatitutde;
var long = mylongitutde;
var zoom = 8;
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var fromProjection = new OpenLayers.Projection("EPSG:4326");
// Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913");
// to Spherical Mercator Projection
map = new OpenLayers.Map("Map");
map.addControl(new OpenLayers.Control.PanZoomBar());
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var position = new OpenLayers.LonLat(long, lat).transform(fromProjection, toProjection);
var marker = new OpenLayers.Marker(position);
var feature = new OpenLayers.`enter code here`Feature(markers, position);
vectorLayer.addFeatures(feature);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
map.addLayer(vectorLayer);
Is there any solution to show route between two locations in Open Layers map??
Calculating the optimal path to drive from A to B is not a task OpenLayers is designed for. It is merely there to display a map and map-related-things on it.
Of course, OpenLayers can display a route, but you somehow first have to calculate it. There are good examples on the OL website. Here is one showing a precalculated route as PolyLine, or one using IGC data.
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)
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);
I'm very new to OpenLayers and I'm trying to show a map on my home page, which shows only Australia, and then later add some points on the map. The important thing right now, is to just open the map to Australia.
I'm using the example found on OpenLayers home page, with:
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
....
I'm guessing that I have to pass something to the constructor to have it display only a specific region?
Thanks,
Sam
Found this on another stackoverflow question:
var bounds = new OpenLayers.Bounds(-125, 25, -65, 50);
var map = new OpenLayers.Map('map', {restrictedExtent: bounds });
Open Layers uses projection to accommodate a 2D map of a 3D world. Projection is a mathematical way of saying that on a 3D sphere (the world) the coordinates x,y are actually x,y somewhere else on a 2D map. In openlayers this involves changing the view, you can use the fromLonLat() method. More information on projection here: https://openlayers.org/en/latest/doc/faq.html
mapOfAustralia = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: targetElement,
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}),
view: new ol.View({
center: ol.proj.fromLonLat([133.7751, -23.2744]),
zoom: 4
})
});
function initialize(){
// Creating a map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(53.0123601276819, -2.44519164333635),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var m = [];
function addMarker(title, lat, lng) {
m[m.length] = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title,
clickable: true,
icon: 'http://domain.com/MVC/images/full.png'
});
}
addMarker('Home', 53.0682143712504, -2.52150736731894);
addMarker('Away', 53.0123601276819, -2.44519164333635);
addMarker('Away', 59.0123601276819, -2.44519164333635);
// Create a LatLngBounds object
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < m.length; i++) {
// Insert code to add marker to map here
// Extend the LatLngBound object
bounds.extend(m[i]);
}
alert(m[0]);
map.fitBounds(bounds);
document.write(getBounds());
}
The above is my code.
My intentions are to develop a map which shows numerous markers and pans the zoom such that all the markers fit on my screen.
I am new to JS.
My understanding is that
var m = [];
creates an empty array.
Then everytime i call addMarker() the details get added to this array m
At the top I set a default zoom and center point.
I then add various markers.
I then loop through each key in the m array and extend the bounds using the data from this.
It is then my understanding that map.fitBounds(bounds); should redefine the zoom/center as applicable to fit all the markers.
It does not.
All my markers show, but the zoom/center is not auto adjusting as such, and I have no idea why.
Any advice would be greatly appreciated.
Thanks
You need to pass a LatLng object to the bounds.extend function.
Here is the code :
....
bounds.extend(new google.maps.LatLng(lat, lng));
....
Here is a clarification of the above answer which is correct except it's missing a parenthesis and a little brief.
//make an empty bounds variable
var bounds = new google.maps.LatLngBounds();
//do your map stuff here
//special note: make sure your lat and lng are floats or googleMaps will error
var lat = 38.103;
var lng = -121.572;
bounds.extend(new google.maps.LatLng(lat, lng));
//adjust the viewport of the map
//special note: this only needs to be done once, don't put it in a loop
map.fitBounds(bounds);