I've created a map with different Layers from OpenLayers, Openstreetmap and BingMaps.
Now I want to add a custom panel to the map. I was able to create a panel (dropdown menu), but I'm not able to put it onto the map. I've found several solutions to this online, however none of them worked so far.
For example: http://vasir.net/blog/openlayers/openlayers-tutorial-part-3-controls/ or http://jsfiddle.net/4zNH6/. Thank you for all the help. Here is the code from my main.js:
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {fromLonLat, toLonLat} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {circular} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';
// define the map
const map = new Map({
target: 'map',
view: new View({
center: fromLonLat([16.37, 48.2]),
zoom: 13
})
});
sync(map);
//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
source: searchResultSource
});
searchResultLayer.setStyle(new Style({
image: new Circle({
fill: new Fill({
color: 'rgba(0, 128, 0, 1)'
}),
stroke: new Stroke({
color: '#000000',
width: 1.25
}),
radius: 15
})
}));
var element = document.getElementById('search');
element.addEventListener('keydown', listenerFunction);
function listenerFunction(event) {
console.log(event);
console.log(event.keyCode);
if (event.keyCode === 13) {
const xhr = new XMLHttpRequest;
xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
xhr.onload = function() {
const json = JSON.parse(xhr.responseText);
const geoJsonReader = new GeoJSON({
featureProjection: 'EPSG:3857'
});
searchResultSource.clear();
const features = geoJsonReader.readFeatures(json);
console.log(features);
searchResultSource.addFeatures(features);
if (!searchResultSource.isEmpty()) {
map.getView().fit(searchResultSource.getExtent(), {
maxZoom: 18,
duration: 500
});
}
};
xhr.send();
}
}
//OpenStreetMap
const OSMbaseLayer = new TileLayer({
type: 'base',
source: new OSM()
});
// Statellit
const satellitLayer = new TileLayer({
source: new XYZ ({
attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
attributionsCollapsible: false,
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
maxZoom: 30
})
});
//shape
const parkLayer = new VectorLayer({
source: new Vector({
url: 'data/park1.geojson',
format: new GeoJSON()
})
});
parkLayer.setStyle(new Style({
fill: new Fill({
color: 'green'
}),
stroke: new Stroke({
color: 'green',
width: 1.25
}),
}));
// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);
map.addLayer(parkLayer);
const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click', function(event) {
//contr.style.color = 'ffffff';
//Andere Layer entfernen
map.removeLayer(satellitLayer);
map.removeLayer(searchResultLayer);
//OSM Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);
});
// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click', function(event) {
//Andere Layer entfernen
map.removeLayer(OSMbaseLayer);
map.removeLayer(searchResultLayer);
//Satelliten Layer hinzufügen
map.addLayer(satellitLayer);
map.addLayer(searchResultLayer);
});
//GPS Location
const GPSsource = new Vector();
const GPSlayer = new VectorLayer({
source: GPSsource
});
map.addLayer(GPSlayer);
navigator.geolocation.watchPosition(function(pos) {
const coords = [pos.coords.longitude, pos.coords.latitude];
const accuracy = circular(coords, pos.coords.accuracy);
GPSsource.clear(true);
GPSsource.addFeatures([
new Feature(accuracy.transform('EPSG:4326', map.getView().getProjection())),
new Feature(new Point(fromLonLat(coords)))
]);
}, function(error) {
alert(`ERROR: ${error.message}`);
}, {
enableHighAccuracy: true
});
const locate = document.createElement('div');
locate.className = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button title="Locate me">◎</button>';
locate.addEventListener('click', function() {
if (!GPSsource.isEmpty()) {
map.getView().fit(GPSsource.getExtent(), {
maxZoom: 18,
duration: 500
});
}
});
map.addControl(new Control({
element: locate
}));
Here is the code from the index.html:
<!DOCTYPE html>
<html>
<head>
<link href="../stylesheet.css" rel="stylesheet">
<title>Feedback</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>OpenLayers</title>
<style>
html, body, .fullscreen {
width: 100%;
height: 100%;
margin: 0;
}
.arrow_box {
position: relative;
background: #000;
border: 1px solid #003c88;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(0, 60, 136, 0);
border-top-color: #003c88;
border-width: 11px;
margin-left: -11px;
}
.arrow_box {
border-radius: 5px;
padding: 10px;
opacity: 0.8;
background-color: black;
color: white;
}
#popup-content {
max-height: 200px;
overflow: scroll;
}
#popup-content th {
text-align: left;
width: 125px;
}
.locate {
top: 90px;
left: 8px;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="title">
<h1>Karte</h1>
</div>
<ul id="homebar">
<li>
<a href="../home/start_content_grp.htm"> Home </a>
</li>
<li>
<a href="../projekt/projekt.htm"> Projekt </a>
</li>
<li>
<a href="../team/team.htm"> Team </a>
</li>
<li>
<a href="map.htm"> Karte </a>
</li>
<li>
<a href="../uebungsbeispiele/beispiele.htm"> Übungsbeispiele </a>
</li>
<li>
<a href="../kontaktformular/formular.htm"> Kontaktformular </a>
</li>
<li>
<a href="../impressum/impressum.htm"> Impressum </a>
</li>
<li>
<a href="../intranet/start_content_grp_intranet.htm"> Intranet </a>
</li>
</ul>
<input type="text" id="search" placeholder="Adresssuche..."></input>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<div style="margin:20px; margin-top:5px;" class="codebox">
<dt style="height:25px; text-align: left;">
<input type="button" value="Layeroptionen" style="width:100px; font-size:12px; margin:5px; padding:5px;" onclick="var spoiler = $(this).parents('.codebox').find('.content').toggle('slow');
if ( this.value == 'Layeroptionen' ) { this.value = 'Layeroptionen'; } else { this.value = 'Layeroptionen'; };
return false;"></dt>
<dd><div class="content" name="spoiler" style="display: none;">
<div id="control">
<label class="radio">
<br><input class="rb" id="OSMbase" type="radio" name="foobar" checked>
Base-Layer OSM
</label><br>
<label class="radio">
<input class="rb" id="satellit" type="radio" name="foobar">
Sattelite
</label>
</div>
</div></dd></div>
<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map" class="fullscreen">
<select id="combo">
<option value="baselayer-osm">Base-Layer OSM</option>
<option value="sattelite">Sattelite</option>
</select>
</div>
<!-- <div class="arrow_box" id="popup-container">
<div id="popup-content"></div> -->
</div>
</body>
</html>
