Hallo Leute,
ich bin ganz neu hier. Ich stehe vor der Aufgabe eine OSM auf einer Webseite einzupflegen. Auf der Karte sollen über verschiedene Layer verschiedene Marker gesetzt werden (z.B. im Layer Service Standorte: 7 Marker, Layer Beratungsbüros: 12 Markern etc.) sodass man die Möglichkeit hat die Layer ein bzw. auszublenden. Zusätzlich sollen die Marker die Popupfunktion haben.
Soweit so gut. Ich habe mich also etwas umgeschaut und verschiedenste Arten von OSM Umsetzungen gefunden. Nun stehe ich aber vor dem Problem, dass ich es nicht schaffe mehrere Marker in einem Layer einzubinden und gleichzeitig die Popup funktion habe und weiß einfach nicht wo ich jemanden finde, der mir weiterhelfen kann.
Bin ich hier an der richtigen Adresse?
Ich bin echt am verzweifeln
Ich hoffe ihr könnt mir sagen warum man die function addMarker() nur einen Marker setzt!
vielen Dank schonmal !
Falls ihr Fragen zum Code habt, schießt los
Ich lasse einfach mal mein Code hier…
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de-de">
<head>
<title>Map | Testanwendung</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<meta name="author" content="Thomas Heiles" />
<link rel="stylesheet" type="text/css" href="map.css"></link>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_map.css"></link>
<![endif]-->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="tom.js"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var layer_mapnik;
var layer_tah;
//var layer_markers;
function drawmap() {
// Popup und Popuptext mit evtl. Grafik
var popuptext_haupt="<font color=\"black\"><b>Firma<br>Kirchhofstr. 3<br> 25524 Irgendwo</b><p><img src=\"bild.jpg\" width=\"210\" height=\"113\"></p><a href='www.link.de'>www.link.net</a></font>";
var popuptext_borgentreich="<font color=\"black\"><b>CONZEDRUCK GmbH<br>Neutorstr. 3<br> 34434 Borgentreich</b><p><img src=\"bild.jpg\" width=\"210\" height=\"113\"></p><a href='http://www.conzedruck.de'>www.conzedruck.de</a></font>";
OpenLayers.Lang.setCode('de');
// Position und Zoomstufe der Karte
var lon = 9.485322;
var lat = 53.958883;
var zoom = 8;
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [
new OpenLayers.Control.Navigation(),
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");
map.addLayer(layer_mapnik);
var layerMarkers = new OpenLayers.Layer.Markers("Standorte");
map.addLayer(layerMarkers);
var layerParks = new OpenLayers.Layer.Markers("Windparks");
map.addLayer(layerParks);
jumpTo(lon, lat, zoom);
var size = new OpenLayers.Size(21, 25);
var sizeHaupt= new OpenLayers.Size(26, 42);
var sizeWind= new OpenLayers.Size(73, 64);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
var iconHaupt = new OpenLayers.Icon('thron.png',sizeHaupt,offset);
var iconWind = new OpenLayers.Icon('wind-orange.png',sizeWind,offset);
//------- Position des Markers .... Marker wird über Funktion 'addMarker()' in tom.js gesetzt....
addMarker(layerMarkers, 9.484227, 53.959731, popuptext_haupt, iconWind);
addMarker(layerMarkers, 9.238515, 51.570028, popuptext_borgentreich, iconHaupt);
// ----- Andere Möglichkeit Marker einzubinden, allerdings dann ohne Popup-Fenster ---------
/*
//Standorte
var lonLatHaupt = new OpenLayers.LonLat(9.485322, 53.958883).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
layerMarkers.addMarker(new OpenLayers.Marker(lonLatHaupt,iconHaupt));
var lonLat2 = new OpenLayers.LonLat(9.238515, 51.570028).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
layerMarkers.addMarker(new OpenLayers.Marker(lonLat2, icon.clone()));
//Windparks
var lonLatWind1 = new OpenLayers.LonLat(11.244249, 51.913991).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
layerParks.addMarker(new OpenLayers.Marker(lonLatWind1, iconWind));
*/
}
//]]>
</script>
</head>
<body onload="drawmap();">
<div id="header">
<div id="content">Karte (Testversion)</div>
<div id="osm">? <a href="http://www.openstreetmap.org">OpenStreetMap</a>
und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
</div>
</div>
<div id="map">
</div>
</body>
</html>
JS Code:
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, icon)
{
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(300, 180) } );
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = "hidden";
var marker = new OpenLayers.Marker(ll, icon);
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));
map.addPopup(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;
}
}