Openlayer V4.5.0: Marker hinzufügen

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

Farbe und Linienstärke z.B. durch style im layer:


      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'
          })]
        }),
        style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 2})}),
      });

Das Popup-Fenster öffnet irgendwo, da keine gültigen Koordinaten vorliegen. Mit den Zeilen
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
wird im Falle der Linie eine Liste von Koordinatenpaaren ausgegen. Man muß sich entscheiden, wo das Popup-Fenster aufmachen soll. Man kann den Schwerpunkt der Linien berechnen, dann öffnet das Popup möglicherweise immer noch außerhalb der sichtbaren Karte. Anfangs- oder Endpunkt haben das gleiche Problem. Einfliegen des Fensters sieht zwar schick aus bevormundet aber den Nutzer, da sein gerade betrachtetes Bild verschwindet. Ich nutze lieber den Clickpunkt bei Linien oder Flächen.


          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;
          }

Das nächste Problem, welches du erkennen wirst: Clickt man auf die Linie und dann auf den Marker, steht der falsche Text im Popup, clickt man zwischenduch ins Niemandsland, ist die Welt in Ordnung.
Bei diesem Problem kann ich dir nicht helfen, ich nutze kein jquery.

Ich beobachte diesen Thread schon ein paar Tage und muß jetzt doch mal die Kontextfrage stellen: Gibt es einen besonderen Grund daß Du dich so mit OpenLayers abmühst anstatt einfach Leaflet zu verwenden?

bye, Nop

Moin,

An axelr:
Ich habe es jetzt mal versucht, Karte wird nicht 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.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([9.855, 53.315], "EPSG:4326", "EPSG:3857")),
        name: 'Bahnhof',
      });

      var coordinates = {[[9.855, 53.315], [9.856, 53.315], [9.869, 53.284], [9.798, 53.110]];
      features: 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;
          } 
      
      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'
          })]
      }),
      style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 2})}),
      });
      
      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>

So wird die Karte auch nicht 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.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([9.855, 53.315], "EPSG:4326", "EPSG:3857")),
        name: 'Bahnhof',
      });

      var coordinates = [[9.855, 53.315], [9.856, 53.315], [9.869, 53.284], [9.798, 53.110]];
      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;
          } 
      
      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'
          })]
      }),
      style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 2})}),
      });
      
      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>

Tja, irgendwo scheint ein Fehler zu liegen, aber wo?

Zu Nop: Openlayer kann wohl etwas mehr als Leaflet.
Klar Leaflet ist leichtgewichtig, der Aufbau ist sehr einfach gehalten, so daß wohl ,Anfänger" wohl auch keine Probleme haben.
Mir sind auch Schnittstellen wichtig (lieber eine mehr als zu wenig).
Und ich möchte es verstehen, dafür ist OpenLayers die beste Wahl, zumindest versuche ich es.

Gruß

Thal

PS: Vielleicht sind andere auch auf der Suche nach einem Marker in einer Karte, weiter oben (Beitrag 16) kann man den fertigen Code raus kopieren und ein paar Bestandteile hinzufügen (links) und fertig, der Beitrag ist nicht nur für mich eine Hilfe.

Der zweite code-Schnipsel aus #21 gehört in die Funktion map.on(‘click’…

Tja, irgendwie wird die Karte nicht 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.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([9.855, 53.315], "EPSG:4326", "EPSG:3857")),
        name: 'Bahnhof',
      });

      var coordinates = [[9.855, 53.315], [9.856, 53.315], [9.869, 53.284], [9.798, 53.110]]; 

      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'
          })]
      }),
      style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
      });
      
      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 coordinates = feature.getGeometry().getCoordinates();

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

        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>

Ich habe auch so umgestellt gehabt, Resultat ist das gleiche, keine Karte:

<!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([9.855, 53.315], "EPSG:4326", "EPSG:3857")),
        name: 'Bahnhof',
      });

      var coordinates = [[9.855, 53.315], [9.856, 53.315], [9.869, 53.284], [9.798, 53.110]]; 

      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'
          })]
      }),
      style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
      });
      
      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 coordinates = feature.getGeometry().getCoordinates();

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

        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>

Bislang ohne Erfolg.

Gruß

Thal

Der zweite code-Schnipsel aus #21 gehört in die Funktion map.on(‘click’…
Du hast ihn hinter die Funktion geschrieben.

Die Funktion map.on(‘click’…); sollte so aussehen:


      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('show');
        } else {
          $(element).popover('destroy');
        }
      });

und Kopierfehler beseitigen:
Zeile 67 raus (var coordinates = feature.getGeometry().getCoordinates():wink:

Vielleicht solltes du dir selbst ein Weihnachtsgeschenk machen, in dem du das Einrücken deines Codes überarbeitest.

Moin,

der Weihnachtsstreß (in Form auch von Geschenken…) hat mir doch etwas die Zeit geraubt, aber nun wünsche ich erstmal:

Frohe Weihnachten!

Nun gut, kommen wir nun also zum Code zurück.
Die Zeile 67 gelöscht und map.on hinzugefügt sowie Überarbeitung des ,Einrückens".
Sowie von Openlayer v4.6.3 auf v4.6.4 geupdatet.
Karte wird mit dem Marker und der Linie angezeigt.

Nun 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.4/css/ol.css" type="text/css">
<script src="http://www.schienenpost.de/v4.6.4/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([9.855, 53.315], "EPSG:4326", "EPSG:3857")),
         name: 'Bahnhof',
      });

      var coordinates = [[9.855, 53.315], [9.856, 53.315], [9.869, 53.284], [9.798, 53.110]]; 

      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'
        })]
        }),
         style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
      });
      
      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();
         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('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>

Dabei fallen mir jetzt mehr fragen ein:
Ein zweiter Marker wäre hilfreich (am anderen Ende), sähe auch besser aus.
Die kleinen ,Pop-up-Fensterchen" sind wohl nicht auf Mitte getrimmt der Linie wie kann man dort den Fehler beseitigen
(Auf der Linie öffnet sich das Fenster, aber es sieht etwas seitlich verrutscht aus)?
Kann das Fensterchen vom Marker mit dem Fensterchen der Linie komplett verknüpft werden
(sodaß nur noch ein Fensterchen angezeigt wird, anstatt zwei)?
Wie können die Geocoordinaten am besten ausgelagert werden mit der Beschreibung im ,Fensterchen" in eine seperate Datei?

Und zum Schluss:
Gibt es hilfreiche Tipps zum Einrücken und worauf ich achten sollte, oder kommt es am Ende auf den jeweiligen Betrachter an, wie schön er dieses findet
(das es hilfreich ist, zumindest wo das Ende und der Anfang ist, ist schon gut)?

So und jetzt noch zum Schluß:

Gruß

Thal

Ich fang mal hinten an. Für das Einrücken wird es wohl irgendwelche Werkzeuge geben, ich nutze einen normalen Editor und Rücke von Hand ein. Ein Editor, der schließende Klammer zu öffnender Klammer anzeigt ist sinnvoll.

Geokoordinaten auslagern geht als .gpx .kml .scv .txt .geojson , was am besten ist hängt von Datenmenge und Gestaltungsanforderungen ab. Ich habe mit gpx angefangen, um Daten vom Garmin oder Datenlogger sichtbar machen zu können. Bei den meist mitgelieferten Editoren zu gpx werden allerdings nach Änderungen viel zu große Dateien erzeugt.
In deinem Fall würde ich bezüglich Linien .geojson für die Zukunft ins Auge fassen. Farbe, Breite, Name, Title, Description können direkt im Datensatz angegeben werden.
Bezüglich Punkten teste ich derzeit selbst andere Wege. Bisher war .scv das angesagte Format, scheint aber aus der Mode zu kommen, bei .geojosm kocht jeder sein eigenes Süppchen bei den Styles.
Bleib zunaechst mal bei der direkten Angabe im Programmcode.

Zwei Fensterchen gleichzeitig sehe ich nicht, du meinst wahrscheinlich das unter #21 am Ende erwähnte Problem. Im Popup wird der falsche Text dargestellt.
Ich habe dazu etwas rumprobiert. Zwischen jquery, bootstrap und deinem Programmcode gibt es irgendein Timing-Problem
– der Eine ist noch nicht fertig, während der Andere den nächsten Schritt ausführt –
Man kann solche Probleme durch Rückmeldungen lösen oder das Problem vemeiden.
Ich würde das Problem umschiffen, indem der Text direkt an den richtigen Speicherplatz geschrieben wird:
statt
‘content’: feature.get(‘name’)
setze hinter der schließenden Klammer
$(element).popover().data(‘bs.popover’).options.content = feature.get(‘name’);
Damit können auch alle destroy-Anweisungen zu hide-Anweisungen reduziert werden.
Die Funktion map.on(‘click’…); sieht dann so aus:


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

Zum zweiten Marker später.

Du verwendest eine Nadel und ordnest das Popup-Fensterchen mit Abstand über dem Sollpunkt (unterer Punkt der Nadel) an
offset: [0, -50]
Ich bevorzuge die Anordnung unter der Nadel, da dann die Spitze der Nadel und der Hinweispfeil auf den gleichen Punkt verweisen können, ohne sich gegenseitig zu verdecken. Muster:
http://www.roeltgen.com/vergleichspunkte/bilder4ol.html

Letzter Punkt openlayers muss nicht dauernd geupdatet werden. Dein Programmcode läuft unter Version 3.19.1 genauso gut wie unter der aktuellen Version 4.6.4

Frohes Fest