I'm trying to draw with javascript a rectangle on a map with 4 given parameters (north, south, west, east). i already managed it to do this with google-maps, but i also wannt to get it work with openstreetmap (wich is using the openlayers-api)
here is my code, so far:
openstreetRectangle : function(param) {
var map, bounds, coords, defaults;
var mapnik = new OpenLayers.Layer.OSM();
defaults = {
n : 50.930985,
s : 50.92991,
w : 11.587115,
e : 11.588392
};
coords = $.extend(defaults, param);
bounds = new OpenLayers.Bounds(coords.w, coords.s, coords.e, coords.n);
map = new OpenLayers.Map("map");
if ((coords.s == coords.n) && (coords.w == coords.e)) {
var marker = new OpenLayers.Layer.Markers("marker");
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
marker.addMarker(new OpenLayers.Marker(bounds.getCenterLonLat(), icon));
map.addLayer(marker);
// Note that if you pass an icon into the Marker constructor, it will
// take that icon and use it. This means that you should not share icons
// between markers -- you use them once, but you should clone() for any
// additional markers using that same icon.
} else {
var boxes = new OpenLayers.Layer.Boxes("Boxes");
var box = new OpenLayers.Marker.Box(bounds, "#008DCF", 4);
boxes.addMarker(box);
map.addLayer(boxes);
}
map.addLayer(mapnik);
map.setCenter(bounds.getCenterLonLat(), 15);
}
Drawing the marker and the box on the Map works, but there is an issue with positioning oft the mapcenter, the marker and the box, I guess the OpenLayers.Bounds-Object seems not to work like expected.
Can anyone help, to fix this?
sincerly S. Röher
I solved it.
openstreetRectangle : function(param) {
var map, bounds, coords, defaults;
var mapnik = new OpenLayers.Layer.OSM();
defaults = {
n : 50.930985,
s : 50.9301,
w : 11.58725,
e : 11.58825
};
coords = $.extend(defaults, param);
bounds = new OpenLayers.Bounds();
bounds.extend(new OpenLayers.LonLat(coords.w, coords.s));
bounds.extend(new OpenLayers.LonLat(coords.e, coords.n));
bounds.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
map = new OpenLayers.Map("map");
if ((coords.s == coords.n) && (coords.w == coords.e)) {
var marker = new OpenLayers.Layer.Markers("marker");
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
marker.addMarker(new OpenLayers.Marker(bounds.getCenterLonLat(), icon));
map.addLayer(marker);
// Note that if you pass an icon into the Marker constructor, it will
// take that icon and use it. This means that you should not share icons
// between markers -- you use them once, but you should clone() for any
// additional markers using that same icon.
} else {
var boxes = new OpenLayers.Layer.Boxes("Boxes");
var box = new OpenLayers.Marker.Box(bounds, "#008DCF", 4);
boxes.addMarker(box);
map.addLayer(boxes);
}
map.addLayer(mapnik);
map.zoomToExtent(bounds);
}