OpenLayer map markers don't works - javascript

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

Related

OpenLayers marker rotation

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

Restricting panning to one globe in Google Maps API

I have a map created using the Google Maps API, and I'd like to restrict panning to one globe; by default you can pan continuously east/west, the map repeats endlessly. I'm trying to use henningj's solution posted to this question
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(85, -180),
new google.maps.LatLng(-85, 180)
);
lastValidCenter = map.getCenter();
google.maps.event.addListener(map, "center_changed", function() {
if (allowedBounds.contains(map.getCenter())) {
lastValidCenter = map.getCenter();
return;
}
map.panTo(lastValidCenter);
});
What I have currently allows no panning whatsoever, the call to 'contains' always fails. If I log map.getCenter() it all looks sensible enough, I think(?!):
Object { A: 54.683366, F: 25.31663500000002 }
Can anyone see what I'm doing wrong?
You have your allowedBounds defined incorrectly. It should be (from the documentation):
LatLngBounds(sw?:LatLng, ne?:LatLng) Constructs a rectangle from the points at its south-west and north-east corners.
This:
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(85, -180),
new google.maps.LatLng(-85, 180)
);
Should be:
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-85, -180), //sw
new google.maps.LatLng(85, 180) //ne
);
(negative longitudes are west of positive ones, negative latitudes are south of positive ones)
proof of concept fiddle
You can setting a proper Zoom Level and resticting the min e max zoom level
var mapOptions = {
center: new google.maps.LatLng(50.431487, 30.539285),
zoom: 2,
minZoom: 2,
maxZomm:19,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

How to serialize OpenLayers features?

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

how to get uper-left and lower-right x y position of screen in openLayers map?

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

OpenLayer Coordinate System

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

Categories

Resources