TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
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);
