Skip to content

Instantly share code, notes, and snippets.

@ruempel

ruempel/openlayers-photon.html

Created May 28, 2019 13:41
Show Gist options
  • Save ruempel/5b0850b8abde4353da9f9b04fc8c200f to your computer and use it in GitHub Desktop.
Save ruempel/5b0850b8abde4353da9f9b04fc8c200f to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers with Open Street Map and Photon Geocoding API Search
Raw
openlayers-photon.html
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers with OSM and Photon Search</title>
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css"/>
<script src="https://openlayers.org/en/latest/build/ol.js"></script>
<link rel="stylesheet" href="https://viglino.github.io/ol-ext/dist/ol-ext.css"/>
<script src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script>
<style>
.ol-search ul {
color: #333;
font-size: 0.85em;
max-width: 21em;
}
.ol-search ul i {
display: block;
color: #333;
font-size: 0.85em;
}
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// https://viglino.github.io/ol-ext/examples/search/map.control.searchphoton.html
// https://photon.komoot.de
let map = new ol.Map({
target: 'map',
view: new ol.View
({
zoom: 8,
center: ol.proj.transform([13.725, 51.035], "EPSG:4326", "EPSG:3857")
}),
layers: [new ol.layer.Tile({source: new ol.source.OSM()})]
});
let searchControl = new ol.control.SearchPhoton({
lang: "en",
position: true
});
map.addControl(searchControl);
searchControl.on("select", entry => {
map.getView().animate({
center: entry.coordinate,
zoom: Math.max(map.getView().getZoom(), 15)
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment