Moin,
also Pop-up-Fensterchen hatte ich mal ausprobiert, aber gefiel mir nicht so
(‘placement’: ‘button’, statt ‘placement’: ‘top’).
Strecke (von Zeile 41 - 47) gemacht, Karte wurde angezeigt.
Zeile 53 geändert, Karte wurde angezeigt.
Zeile 66 raus, Karte wurde angezeigt.
Die Zeile 101 aktivieren, Karte nicht getestet
Die Zeile 102 deaktivieren, Karte nicht getestet.
Zeilenverschub vor die Zeile 39, Karte wird nicht angezeigt.
Was bewirkt eigentlich wenn man:
i = 0;
stattdessen:
i = coordinates.length - 0;
oder ist beides richtig?
Irgendwo liegt ein Fehler vor, der Code:
<!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.4/css/ol.css" type="text/css">
<script src="http://www.schienenpost.de/v4.6.4/build/ol.js"></script>
<script src="http://www.schienenpost.de/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="http://www.schienenpost.de/bootstrap.min.css">
<script src="http://www.schienenpost.de/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 iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 1.0],
src: 'http://www.schienenpost.de/marker/marker.png'
}))
});
var scaleLineControl = new ol.control.ScaleLine();
var i,iconFeature,iconFeatures=[],coordinates,nameLine;
coordinates = [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]];
nameLine = "Suerhop nach Schneverdingen";
i = coordinates.length - 0;
iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
name: 'Start '+nameLine,
});
iconFeature.setStyle(iconStyle);
iconFeatures.push(iconFeature);
i = coordinates.length - 1;
iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
name: 'End '+nameLine,
});
iconFeature.setStyle(iconStyle);
iconFeatures.push(iconFeature);
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coordinates).transform("EPSG:4326", "EPSG:3857"),
name: 'nameLine'
})]
}),
style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
});
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, -0]
});
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',
source: new ol.source.Vector({
(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.addLayer(layerLines);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
var clickpoint = map.getCoordinateFromPixel(evt.pixel);
if (!isNaN(coordinates[0])) { // Punkt
popup.setPosition(coordinates);
} else if (!isNaN(coordinates[0][0])) { // Linie
popup.setPosition(clickpoint);
} else { // kein brauchbares feature
$(element).popover('destroy');
return;
}
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('name')
});
$(element).popover().data('bs.popover').options.content = feature.get('name');
$(element).popover('show');
} else {
$(element).popover('hide');
}
});
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>
Gruß
Thal