Moin axelr,
Ach, dadurch keine Verknüpfung, sondern nur eine Reaktion.
Der Code sieht dann so aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Christian Thal">
<meta name="keywords" lang="de" content="Schienenpost, Post, Schiene, Startseite">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="Startseite.css">
<title>Schienenpost - Die Startseite</title>
<link rel="stylesheet" href="http://www.schienenpost.de/v4.6.3/css/ol.css" type="text/css">
<script src="http://www.schienenpost.de/v4.6.3/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Schienenpost - Startseite</h1>
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="Login.html">Login</a></li>
<li><a href="FAQ.html">FAQ</a></li>
<li><a href="Kontaktseite.html">Kontakt</a></li>
<li><a href="Update.html">Update</a></li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
</nav>
<div id="map" class="map"><div id="popup"></div></div>
<script>
var logoElement = document.createElement('a');
logoElement.href = 'http://www.schienenpost.de/';
logoElement.target = '_blank';
var logoImage = document.createElement('img');
logoImage.src = 'http://www.schienenpost.de/schienenpost.png';
logoElement.appendChild(logoImage);
var scaleLineControl = new ol.control.ScaleLine();
var iconFeature = new ol.Feature({
//geometry: new ol.geom.Point([0, 0]),
geometry: new ol.geom.Point(ol.proj.transform([10.627, 53.620], "EPSG:4326", "EPSG:3857")),
name: 'Bahnhof',
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'http://www.schienenpost.de/marker/marker.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -50]
});
var map = new ol.Map({
controls: ol.control.defaults()
.extend([
new ol.control.OverviewMap(),
new ol.control.FullScreen(),
scaleLineControl
]),
//target 'map',
target: document.getElementById('map'),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'Marker',
//type: 'data',
style: function(feature) {return feature.get('style');},
source: new ol.source.Vector({
//features: iconFeatures, //array mit mehreren Elementen
features: [iconFeature], //einzelnes Element
})
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([10.627, 53.620]),
zoom: 8
}),
logo: logoElement
});
map.addOverlay(popup);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('name')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
map.on('pointermove', function(e) {
if (e.dragging) {
$(element).popover('destroy');
return;
}
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
Die Karte ist sichtbar (das Komma habe ich total übersehen), nun komme ich zu einer anderen Frage, ein Punkt (Marker) ist nicht so hilfreich, ich hatte mit dem einfachsten Versuch der Doppelung getestet, ob ein zweiter Marker neben dem ersten Marker einfach angezeigt werden kann, dies war der Versuch:
var iconFeature = new ol.Feature({
//geometry: new ol.geom.Point([0, 0]),
geometry: new ol.geom.Point(ol.proj.transform([10.627, 53.620], "EPSG:4326", "EPSG:3857")),
geometry: new ol.geom.Point(ol.proj.transform([12.627, 53.620], "EPSG:4326", "EPSG:3857")),
name: 'Bahnhof',
});
Das klappte nicht, da der Punkt wohl als ein Punkt gelesen wird und nicht zwei Punkte.
Hier wäre es besser, wenn die Geodaten in eine seperate Datei auch ausgelagert werden können (mit Beschreibungen).
Kann auch ein Line-String zwischen den Punkten hinzugefügt werden?
Gruß
Thal