I'm struggling to understand the coordinate system used by OpenLayers.
Leicester, UK is at approx.
Latitude: 52.63973017532399
Longitude: -1.142578125
But to display the same location using OpenLayers I have to use:
Latitude: 6915601.9146245
Longitude: -125089.1967713
e.g:
var center = new OpenLayers.LonLat(-125089.1967713, 6915601.9146245);
var map = new OpenLayers.Map("demoMap");
map.addLayer(new OpenLayers.Layer.OSM());
map.setCenter(center, 12);
These are clearly not Latitude-Longitude coordinates, is there some conversion I need to take account of?
A working example is http://craig-russell.co.uk/demos/openlayers/so_map.html
It looks like I do need to map between coordinate systems.
This is done with the transform() function like so:
var coor_from = new OpenLayers.Projection("EPSG:4326");
var coor_to = new OpenLayers.Projection("EPSG:900913");
var center = new OpenLayers.LonLat(-1.142578125, 52.63973017532399);
var map = new OpenLayers.Map("demoMap");
center.transform(coor_from, coor_to);
map.addLayer(new OpenLayers.Layer.OSM());
map.setCenter(center, 12);
Now it is possible to do:
var map = new OpenLayers.Map("demoMap");
var p = map.getView().getProjection();
var cord = ol.proj.fromLonLat([longitude, latitude], p);
Related
I've got OpenLayer map. I'm drawing markers (named features) onto this map, but I don't know how to export/serialize these elements.
There isn't probably any function to export.
Here is my code
var map, vectors, controls;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.OSM( "OSM",
"http://a.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png", {layers: 'basic'});
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
renderers: renderer
});
map.addLayers([wms, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
controls = {
point: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon),
drag: new OpenLayers.Control.DragFeature(vectors)
};
console.log(map.addControl(controls['point']));
var control = controls['point'];
control.activate();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(16.6833, 53.7167).transform(fromProjection, toProjection);
map.setCenter(position, 12);
document.getElementById('noneToggle').checked = true;
}
Please for help me
Ok, I found soulution. All elements are storage in vectors object
My problem is that when my map is loaded at that time I want to get X and Y cordinates of all four corners of screen as per resolution. My code:
map = new OpenLayers.Map("mapdiv", {
controls: [new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
],
numZoomLevels: 10
});
map.addLayer(new OpenLayers.Layer.OSM("OpenCycleMap"));
epsg4326 = new OpenLayers.Projection("EPSG:4326");
epsg900913 = new OpenLayers.Projection("EPSG:900913");
var lonLat = new OpenLayers.LonLat(72.58, 23.03).transform(epsg4326, epsg900913);
console.log(lonLat);
var zoom = 15;
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
map.events.register("click", map, function (e) {
var lonlat = map.getLonLatFromViewPortPx(e.xy);
alert(lonlat);
});
markers.addMarker(new OpenLayers.Marker(lonLat));
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayer(polygonLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.setCenter(lonLat, zoom);
You should try to post a fiddle when you can. Assuming you're using OpenLayers v2.
If you meant to ask how to get the corners of the viewport, try:
map.getViewport().getClientRects()[0]
If you meant the extent of the map in coordinates:
map.getExtent()
Hi I want to draw a line (free-form, Photoshop pencil / paintbrush style) over Google maps.
What would be the best way to do it?
How complicated would it be to do this AND keep the zoom option (so that line scales / disappears when the map is scaled)?
Which would be the best library to use for that (canvas? svg? something else)?
You could use the built indrawing tools, but if I recall correctly, you would need to click quite a bit to get a free form line.
Here's another pretty rough idea. Capture the mouse coordinates of the map container, grab the latLng from a google.maps.MapCanvasProjection and push the coordinates to a polyline path.
var map;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var markers = [];
var isDrawing = false;
var overlay = new google.maps.OverlayView();
overlay.draw = function () {};
overlay.setMap(map);
// Add a listener for idle event and call getElevation on a random set of marker in the bound
google.maps.event.addListener(map, 'click', function () {
var polyLine = new google.maps.Polyline({
map: map
});
$("#map").mousemove(function (e) {
var pageX = e.pageX;
var pageY = e.pageY;
var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));
var latLng = overlay.getProjection().fromDivPixelToLatLng(point);
polyLine.getPath().push(latLng);
});
});
hi i'm using Openlayer map this is my script , map is ok but the markers wouldn't works:
var map = new OpenLayers.Map ('open_map', {
controls:[
new OpenLayers.Control.Navigation()
],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var lonLat = new OpenLayers.LonLat(_json.lon, _json.lat).transform (
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var size = new OpenLayers.Size(16,27);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.google.com/mapfiles/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(lonLat, icon.clone()));
var mapnik = new OpenLayers.Layer.OSM("Test");
map.addLayer(mapnik);
map.setCenter (lonLat, 5 /* zoom lvl */);
console.log(lonLat);
console.log(_json.lon);
console.log(_json.lat);
this is the console log:
when i do not use markers the map zoom is exactly in the lon and lat i pass, while if i use marker the marker is putted really outside of the place they needs to be on.
does anyone has suggestions?
Currently you are:
creating markers from original coordinates
transforming coordinates from 4326 to 900913 and using them to center map.
In what system are your coordinates in _json object? In case, they are EPSG:4325 (from -180 to 180 or 0 to 360), create markers from transformed coordinates:
var lonLat = new OpenLayers.LonLat(_json.lon, _json.lat).transform (
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
// map.getProjectionObject() doesn't work for unknown reason
);
markers.addMarker(new OpenLayers.Marker(lonLat, icon));
markers.addMarker(new OpenLayers.Marker(lonLat, icon.clone()));
map.setCenter (lonLat, 5 /* zoom lvl */);
PS, is there any particular reason to create two markers to same place:
markers.addMarker(new OpenLayers.Marker(lonLat, icon.clone()));
I need to find google map radius (visible area) in km. Can You give me some example?
i tried
`
var bounds = new google.maps.LatLngBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var proximitymeter = google.maps.geometry.spherical.computeDistanceBetween (sw, ne);
`
but it returns same value every time
You're finding the cross-sectional distance. This will determine the vertical and horizontal distance of the shown map.
var bounds = new google.maps.LatLngBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var east = new google.maps.LatLng(0, ne.lng());
var west = new google.maps.LatLng(0, sw.lng());
var north = new google.maps.LatLng(ne.lat(), 0);
var south = new google.maps.LatLng(sw.lat(), 0);
var width = google.maps.geometry.spherical.computeDistanceBetween(east, west);
var height = google.maps.geometry.spherical.computeDistanceBetween(north, south);
From this you can find the "radius".