Openlayer V4.5.0: Marker hinzufügen

Moin,

ich habe durch die große Suchmaschine leider nix passendes gefunden, darum frage ich einmal hier:

Gibt es gute nachvollziehbare Beispiele wie Marker eingebunden werden?
Wie verknüpft man den Marker mit einem Pop-up-Fenster?
Die Geokoordinaten und Beschreibungen im Pop-up möglichst in eine seperate Datei ausgelagert.
Gibt es hierzu sehr gute Beispiele?
Oder hat jemand schon seine ersten Erfahrungen gesammelt?

Der Code der Startseite ohne Marker:

<!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.5.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.jsfeatures=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://www.schienenpost.de/v4.5.0/build/ol.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 = 'https://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 map = new ol.Map({
        controls: ol.control.defaults()
        .extend([
          new ol.control.OverviewMap(),
          new ol.control.FullScreen(),
          scaleLineControl
        ]),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [1100000, 7000000],
          zoom: 7
        }),
       logo: logoElement
      });
    </script>
</body>
</html>

Für die Marker, werde ich noch ein Ordner hochladen (dann liegen diese marker.png unter /marker/marker.png)

Gruß

Thal

Hallo,
Eine Seite, die sich mit Openlayer V4 und OSM beschäftigt:

http://www.roeltgen.com/osm/

Eventuell findest du da etwas…

Grüße von Lutz

Moin,
irgendwie steckt momentan der Wurm drin,
ich habe einmal jetzt ein Beispiel genommen:

ohne marker wird die Karte normal angezeigt:

<!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.5.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.jsfeatures=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://www.schienenpost.de/v4.6.3/build/ol.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 = 'https://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 map = new ol.Map({
        controls: ol.control.defaults()
        .extend([
          new ol.control.OverviewMap(),
          new ol.control.FullScreen(),
          scaleLineControl
        ]),
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([10.627, 53.620]),
          zoom: 8
        }),
       logo: logoElement
      });
    </script>
</body>
</html>

Aber danach habe ich mich einmal versucht, von dem Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Symbolizer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.3/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/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>
    <style>
      #map {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"><div id="popup"></div></div>
    <script>
      var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([0, 0]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });

      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://openlayers.org/en/v4.6.3/examples/data/icon.png'
        }))
      });

      iconFeature.setStyle(iconStyle);

      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      var rasterLayer = new ol.layer.Tile({
        source: new ol.source.TileJSON({
          url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
          crossOrigin: ''
        })
      });

      var map = new ol.Map({
        layers: [rasterLayer, vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [0, 0],
          zoom: 3
        })
      });

      var element = document.getElementById('popup');

      var popup = new ol.Overlay({
        element: element,
        positioning: 'bottom-center',
        stopEvent: false,
        offset: [0, -50]
      });
      map.addOverlay(popup);

      // display popup on click
      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');
        }
      });

      // change mouse cursor when over marker
      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>

Es natürlich in einer Test-Index-Datei ein zu bauen und mal schauen, natürlich habe ich jetzt schon ein wenig mehr herum gespielt, irgendwie ist dort ein Fehler oder mehrere drin, sonst wird es ja angezeigt.

<!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.5.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.jsfeatures=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://www.schienenpost.de/v4.6.3/build/ol.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 = 'https://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]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });
      
      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://www.schienenpost.de/marker/marker.png'
        }))
      });

      iconFeature.setStyle(iconStyle);

      var element = document.getElementById('popup');

      var popup = new ol.Overlay({
        element: element,
        positioning: 'bottom-center',
        stopEvent: false,
        offset: [0, -50]
      });

      map.addOverlay(popup);

      var map = new ol.Map({
        controls: ol.control.defaults()
        .extend([
          new ol.control.OverviewMap(),
          new ol.control.FullScreen(),
          scaleLineControl
        ]),

        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' : '';
      });

        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([10.627, 53.620]),
          zoom: 8
        }),
       logo: logoElement
      });
    </script>
</body>
</html>

Na ja wo liegt jetzt im Moment der Fehler (oder mehrere) ?

Gruß

Thal

Moin,

beim Vergelich fiel mir ein, das ich die obigen Links noch nicht eingearbeitet hatte und kleinere fehlende Bestandteile vergessen hatte, jetzt sieht der Code so aus, aber es funktioniert immer noch nicht:

<!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="https://cdn.polyfill.io/v2/polyfill.min.jsfeatures=requestAnimationFrame,Element.prototype.classList,URL"></script>
<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 = 'https://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]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });
      
      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://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]
      });

      map.addOverlay(popup);

      var map = new ol.Map({
        controls: ol.control.defaults()
        .extend([
          new ol.control.OverviewMap(),
          new ol.control.FullScreen(),
          scaleLineControl
        ]),

        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' : '';
      });

        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([10.627, 53.620]),
          zoom: 8
        }),
       logo: logoElement
      });
    </script>
</body>
</html>

Gruß

Thal

Es liegen mehrere Fehler vor.

  1. Nimm zunächst mal die Zeile mit polyfill raus (zunächst zur Reduzierung der Fehlermeldungen)
  2. Der Zuweisung var map= muß erst abgeschlossen werden, bevor map.on genutzt werden kann.
    var map = new ol.Map({controls:…,layers:…,target…,view:…,logo:…});
    map.addOverlay(popup);
    map.on(…);
    map.on(…);
    Ab hier sollte die Karte wieder zu sehen sein.
  3. Mit der Zeile map.getTarget().style.cursor = hit ? ‘pointer’ : ‘’; stimmt irgendwas nicht, habe ich noch nicht gefunden.
    Bring erst mal diese drei Punkte in Ordnung, dann kommen wir zum Marker.
    Gruß, Axel

zu 3.: Der Fehler ist weiter oben bei var map=…
statt
target: ‘map’,
setze
target: document.getElementById(‘map’),

Moin,

also als erstes nehme ich Polyfill aus der Source-quelle raus:

<!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 = 'https://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]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });
      
      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://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]
      });

      map.addOverlay(popup);

      var map = new ol.Map({
        controls: ol.control.defaults()
        .extend([
          new ol.control.OverviewMap(),
          new ol.control.FullScreen(),
          scaleLineControl
        ]),

        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' : '';
      });

        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([10.627, 53.620]),
          zoom: 8
        }),
       logo: logoElement
      });
    </script>
</body>
</html>

Danach werde ich Schritt 2 machen.

Moin,

beim Schritt 2, habe ich dich so verstanden, das ,map on" am Ende stehen muß und map.addOverlay(popup) davor, also so:

<!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 = 'https://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]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });
      
      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://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',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        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>

Bloß hier wird die Karte dann nicht angezeigt.
Oder habe ich dich falsch verstanden?

Gruß

Thal

Die Zeile vor target mit Komma statt Semikolon abschließen.
Zeile target (zu3.) ändern.

Ich mach schon mal weiter.
4. Der Marker ist vorbereitet, aber nicht in die Karte eingesetzt.
Abschnitt layers bis target erweitern


        //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
            })
          }),
        ],

  1. An zwei Stellen Zugriff auf deine Seiten http: statt https:
    Dann ist dein Marker am Äquator.

  2. Die Koordinaten sollten erst mal in den angezeigten Kartenausschnitt geholt werden und die Koordinaten müssen umgerechnet werden auf Mercator-Darstellung.
    Zeile geometry: ändern in

        //geometry: new ol.geom.Point([0, 0]),
        geometry: new ol.geom.Point(ol.proj.transform([10.627, 53.620], "EPSG:4326", "EPSG:3857")),

Moin,

also ich versuche es mal:

Punkt 2 und 3 habe ich jetzt komplett bewerkstelligt (noch ohne Punkt 4 - 6):

<!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 = 'https://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]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });
      
      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://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
        ]),

        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],

        target: document.getElementById('map'),

        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>

Zu Punkt 4 - 5:

Also danach sieht es 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]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });
      
      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>

Da wird die Karte nicht mehr angezeigt (bis Punkt 3, vorher wurde diese angezeigt).

Moin,

also den Punkt 6 habe ich auch befolgt, Karte wird nicht angezeigt, der Code sieht 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: 'Null Island',
        population: 4000,
        rainfall: 500
      });
      
      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>

Eine andere Frage tauchte bei mir auf:
Es gibt eine zwingende Reihenfolge beim laden, der Daten, bzw. Ablauf des Aufbaus der Karte?

Gruß

Thal

In Zeile 92 fehlt das Komma als Abschluss.

Wenn man den Marker sehen will, sollte man ihn nach der Karte laden. (Reihenfolge von hinten nach vorne)

Gar nicht. Das Popup ist eine Reaktion auf den Click in die Karte. Erkannt wird beim Click das Symbol der Kartendarstellung. Das Symbol gehört zu einem Point. Die Eigenschaften des Point kann man im Popup-Fenster anzeigen.

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

Zwei oder mehr Punkte werden in einer Liste von features geladen
var iconFeatures = [];
var iconFeature = new ol.Feature({geometry: new ol.geom.Point(…),…});
iconFeatures.push(iconFeature);
iconFeature = new ol.Feature({geometry: new ol.geom.Point(…),…});
iconFeatures.push(iconFeature);

Eine Linie wird entsprechend aufgebaut als
iconFeature = new ol.Feature({geometry: new ol.geom.LineString(…),…});

Dein Marker wandert je nach Zoomstufe. Er wäre ortsfest, wenn du anchor=[0.5,1.0] ohne anchorXUnits und ohne anchorYUnits verwendest.

Was willst du denn überhaupt darstellen ? Je nach Größe wäre ein json,kml oder gpx - Datensatz besser geeignet.

Moin,

anchor habe ich geändert, und anchorXUnits sowie anchorYUnits gelöscht.

Ich habe ein Beispiel eines Strings gefunden und versuchsweise mal eingebaut, wird der String nicht vorher definiert wie er aus zu sehen hat?
Zumindest wird die Karte mit dem einen Marker danach angezeigt.

Der Code sieht jetzt folgendermassen 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 coordinates = (ol.proj.transform([[10.627, 53.620], [12.627, 55.620]], "EPSG:4326", "EPSG:3857")); 

      var layerLines = new ol.layer.Vector({
      source: new ol.source.Vector({
          features: [new ol.Feature({
              geometry: new ol.geom.LineString(coordinates),
              name: 'Strecke'
          })]
      }),
      });
      
      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'
        }))
      });

      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.addLayer(layerLines);
      
        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>

Der spätere Datensatz soll später mittels einer Datenbank auch bearbeitet werden können, eher wohl json?

Gruß

Thal

Die Zeilen 102 und 103 entfernen, type: und style: sind bei dir nicht notwendig.

Zur Linie
Eine Koordinaten-Liste kann nicht mit ol.proj.transform umgerechnet werden,
ol.proj.transform() ist nur für einzelne Koordinaten gedacht.
Man kann die Umrechnung in einer Schlaufe durchführen oder besser wie folgt das LineString-Objekt nutzen:

In Zeile 48 nur die Koordinaten angeben
var coordinates = [[10.627, 53.620],[12.627, 55.620]];
und 5 Zeilen dahinter die Umrechnung durchführen
geometry: new ol.geom.LineString(coordinates).transform(“EPSG:4326”, “EPSG:3857”),

Moin,

Die Zeilen 102, 103 habe ich entfernt, Zeile 48 geändert und 53 auch.
Zeile 48 habe ich noch eine Koordinate hinzugefügt, also geht es bei dem Line, das dieser auch mehrere Koordinaten aufweisen kann.
Jetzt sieht der Code folgendermassen 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 coordinates = [[10.627, 53.620], [9.567, 52.341], [11.627, 54.620]]; 

      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: 'Strecke'
          })]
      }),
      });
      
      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'
        }))
      });

      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',
        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.addLayer(layerLines);
      
        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 Farbe ist blau, der Linie und das Fenster öffnet sich links unten.
Kann man das Fensterchen verknüpfen mit der Linie?
Farbauswahl und Stärke der Linie wären auch noch interessant.

Gruß

Thal