NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
David
Člen
Avatar
David:9.4.2020 10:48

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, ten zbytek jsem vzal odsud. Tento kód zde uvádím. Popup okno se mi ale nezobrazuje. Zkoušel jsem i toto (popup.html, popup.js a popup.css). Jenže když zpustím čistě tento kód, bez toho aniž bych tam něco přepisoval, 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 tu popup funkci, pokud by to někdo z vás uměl. Díky

index.html(zde jsem jen změnil mapu na verzi 6 z původní verze 4)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenLayers - Popup</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css"> //add v6
    <link rel="stylesheet" href="../src/ol-popup.css" />
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div id="map"></div>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js" type="text/javascript"></script> //add v6
    <script src="../dist/ol-popup.js"></script>
    <script src="popup.js"></script>
  </body>
</html>

index.js

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

var marker = new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([-74.006,40.7127])
     ),
});

var marker2 = new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([55.751244, 37.618423])
     ),
});

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 je 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);
 
Odpovědět
9.4.2020 10:48
Avatar
Døminik
Člen
Avatar
Døminik:10.4.2020 8:11

Myslím že tam nemáš nikde definováno overlay

 
Nahoru Odpovědět
10.4.2020 8:11
Avatar
David
Člen
Avatar
David:10.4.2020 14:30

Máš pravdu, pracuje se tam s funkcemi a já to potřebuji to potřebuji začlenit do svého příkladu, proto jsem zkusil jiný příklad
Ten jsem jako vždy nejprv otestoval sámo sobě, tak jak jsem ho našel. Ale zde se mi po kliknutí žádné okno neotevře...

popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenLayers - Popup</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
    <link rel="stylesheet" href="../src/ol-popup.css" />
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div id="map"></div>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js" type="text/javascript"></script>
    <script src="../dist/ol-popup.js"></script>
    <script src="popup.js"></script>
  </body>
</html>

*
popup.js*

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

var popup = new Popup();
map.addOverlay(popup);

map.on('singleclick', function(evt) {
    var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
    popup.show(evt.coordinate, '<div><h2>Coordinates</h2><p>' + prettyCoord + '</p></div>');
});

popup.css

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: small;
}

#map {
  width: 100%;
  height: 100%;
}
 
Nahoru Odpovědět
10.4.2020 14:30
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.