OpenLayers - jak ukázat popup informační okno po kliknutí na marker? – JavaScript, AJAX, jQuery – Fórum

OpenLayers - jak ukázat popup informační okno po kliknutí na marker?

Duch

8. 4. 2020 #1

Ahoj. Mám zde kód se dvěma marker ikonami, Chtěl bych aby se mi po kliknutí na nějaký marker ukázalo "popup" okno s informacemi jako třeba zde. Ze stránky jsem vzal část kódu, který jsem myslel že dělá zobrazení popup a dal ho do svého kódu. Tento kód zde uvádím. Popup se mi ale nezobrazuje. Zkoušel jsem i toto (popup.html a popup.js). Jenže když zpustím čistě tento kód, zobrazí pouze mapu ale ne již žádný marker nebo popup po kliknutí. Takže bych byl rád, když byste mi pomohli v mém kódu přepsat popup funkci. Díky

index.html

<!DOCTYPE html>
<html>
<head>
 <title>Working with Openlayers</title>
 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
 <!-- Openlayers CSS file--> 

 <style type="text/css">
  #map{
   width:80%;
   height:600px;
   margin: 10px;
  }

 </style>
 <!--Basic styling for map div, 
 if height is not defined the div will show up with 0 px height  --></head>
<body>

 <center>   
 <div id="map">
  <div id="popup"></div>
 </div>
 </center>
 <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
 <!-- Openlayesr JS fIle -->
 <script type="text/javascript" src="map_index.js" type="text/javascript"></script>
 <!-- Our map file -->

 </body>
</html>

index.js (Zatím nefunguje popup okno)

*Pokud byste věděli, jak mi s tou funkcí pomoct, odstraňte tu stávající funkci a vepište místo ní váš kód.

var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  target: 'map',
  layers: [ baseMapLayer],
  view: new ol.View({
      center: ol.proj.fromLonLat([-74.0061,40.712]), 
          zoom: 12 //Initial Zoom Level
        })
});

var marker = new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([-74.006,40.7127])
     ),  // Cordinates of New York's City Hall
});

var marker2 = new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([40.7127, -74.006])
     ),  // Cordinates of New York's City Hall
});

marker.setStyle(new ol.style.Style({
  image: new ol.style.Icon( ({
    color: '#ffcd46',
    crossOrigin: 'anonymous',
    src: 'dot.png'
  }))
}));

marker2.setStyle(new ol.style.Style({
  image: new ol.style.Icon( ({
    color: '#cdff46',
    crossOrigin: 'anonymous',
    src: 'dot.png'
  }))
}));

//funkce pro zobrazení popup okna odsud
      map.on('singleclick', function(evt) {
        var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
          return 'Hello world';

        })

          container.style.display="block";
          var coordinate = evt.coordinate;
          content.innerHTML = "Hello";
          overlay.setPosition(coordinate);


      });
      map.on('pointermove', function(evt) {
        map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
      });
//posud



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

var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
});  
map.addLayer(markerVectorLayer);

Nahlásit jako SPAM