How can I rotate the marker with OpenLayers. I need it to be dynamic rather then static:
This is my code in component.ts file
var size = new OpenLayers.Size(30, 30);
var offset = new OpenLayers.Pixel(-(size.w ), -size.h);
var icon = new OpenLayers.Icon('ship.PNG', size, offset);
var zoom = 3;
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
.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);
map.setCenter(new OpenLayers.LonLat(3, 56.1122).transform(fromProjection, toProjection), zoom);
/* var angle = 30;
function _rotate() {
markers.setIconAngle(angle);
angle = (angle + 10) % 360;
setTimeout(_rotate, 1000);
}
_rotate(); */
markers.addMarker(new OpenLayers.Marker(lonLat));
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'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'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);
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".