[OSM-dev] Layer-markers, maxExtent
Thomas Wiedemann
thomas.wiedemann at mecomo.com
Tue Feb 2 08:43:24 GMT 2010
Hi,
just 2 questions:
1) How can I add markers to the map? I tried to do it like the "start-position"-marker but it doesn´t work. Can anyone please give an example?
2) I think the map which will be loaded is bigger than it should be. What can I do to make the performance better? (loading for example)
I´m very thankful for help!
Mit freundlichen Grüßen
Best regards
Thomas Wiedemann
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="de-de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta content="text/javascript" http-equiv="content-script-type" />
<meta id="MapAll" />
<title>Map</title>
<style type="text/css">
html, body {
width: 240px;
height: 268px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#map {
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 268px;
margin: 0px;
padding: 0px;
}
</style>
<!--[if lte IE 6]>
<link href="../theme/default/ie6-style.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script charset="UTF-8" src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script charset="UTF-8" src="http://openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
<script type="text/javascript">
var lat = 48.28112416;
var lon = 11.56468331;
var zoom = 15;
var layer_mapnik = null;
var layer_tah = null;
var layer_markers = null;
var map = null;
function drawmap()
{
OpenLayers.Lang.setCode("de");
map = new OpenLayers.Map("map", {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.PanZoomBar()],
maxExtent:
new OpenLayers.Bounds(-20037508.34,-20037508.34,
20037508.34, 20037508.34),
numZoomLevels: 18,
maxResolution: 156543,
units: "meters"
});
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayInLayerSwitcher: false });
map.addLayers([layer_mapnik, layer_markers]);
// Position des Markers
jumpTo(lon, lat, zoom);
addMarker(layer_markers, lon, lat);
addMark
}
function jumpTo(lon, lat, zoom) {
var x = Lon2Merc(lon);
var y = Lat2Merc(lat);
map.setCenter(new OpenLayers.LonLat(x, y), zoom);
return false;
}
function Lon2Merc(lon) {
return 20037508.34 * lon / 180;
}
function Lat2Merc(lat) {
var PI = 3.14159265358979323846;
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
return 20037508.34 * lat / 180;
}
function addMarker(layer, lon, lat, popupContentHTML) {
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
var feature = new OpenLayers.Feature(layer, ll);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(30, 18) } );
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = "hidden";
var marker = new OpenLayers.Marker(ll);
marker.feature = feature;
var markerClick = function(evt) {
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
OpenLayers.Event.stop(evt);
}
marker.events.register("mousedown", feature, markerClick);
layer.addMarker(marker);
map.addPopup(feature.createPopup(feature.closeBox));
}
function getCycleTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit)
{
return null;
}
else
{
x = ((x % limit) + limit) % limit;
return this.url + z + "/" + x + "/" + y + "." + this.type;
}
}
</script>
</head>
<body onload="drawmap();">
<div id="map">
</div>
</body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/dev/attachments/20100202/4754a75c/attachment.html>
More information about the dev
mailing list