Created
June 1, 2020 19:52
-
-
Save ThomasG77/822b9ac2cd180793021c7113ca8d533d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Popup</title> | |
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> | |
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script> | |
<style> | |
.map { | |
width: 100%; | |
height:400px; | |
} | |
.ol-popup { | |
position: absolute; | |
background-color: white; | |
box-shadow: 0 1px 4px rgba(0,0,0,0.2); | |
padding: 15px; | |
border-radius: 10px; | |
border: 1px solid #cccccc; | |
bottom: 12px; | |
left: -50px; | |
min-width: 280px; | |
} | |
.ol-popup:after, .ol-popup:before { | |
top: 100%; | |
border: solid transparent; | |
content: " "; | |
height: 0; | |
width: 0; | |
position: absolute; | |
pointer-events: none; | |
} | |
.ol-popup:after { | |
border-top-color: white; | |
border-width: 10px; | |
left: 48px; | |
margin-left: -10px; | |
} | |
.ol-popup:before { | |
border-top-color: #cccccc; | |
border-width: 11px; | |
left: 48px; | |
margin-left: -11px; | |
} | |
.ol-popup-closer { | |
text-decoration: none; | |
position: absolute; | |
top: 2px; | |
right: 8px; | |
} | |
.ol-popup-closer:after { | |
content: "✖"; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map" class="map"></div> | |
<div id="popup" class="ol-popup"> | |
<a href="#" id="popup-closer" class="ol-popup-closer"></a> | |
<div id="popup-content"></div> | |
</div> | |
<script src="main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'ol/ol.css'; | |
import Map from 'ol/Map'; | |
import Overlay from 'ol/Overlay'; | |
import TileLayer from 'ol/layer/Tile'; | |
import View from 'ol/View'; | |
import OSM from 'ol/source/OSM'; | |
import {toLonLat} from 'ol/proj'; | |
import {toStringHDMS} from 'ol/coordinate'; | |
/** | |
* Elements that make up the popup. | |
*/ | |
var container = document.getElementById('popup'); | |
var content = document.getElementById('popup-content'); | |
var closer = document.getElementById('popup-closer'); | |
/** | |
* Create an overlay to anchor the popup to the map. | |
*/ | |
var overlay = new Overlay({ | |
element: container, | |
autoPan: true, | |
autoPanAnimation: { | |
duration: 250, | |
}, | |
}); | |
/** | |
* Add a click handler to hide the popup. | |
* @return {boolean} Don't follow the href. | |
*/ | |
closer.onclick = function () { | |
overlay.setPosition(undefined); | |
closer.blur(); | |
return false; | |
}; | |
var key = 'Get your own API key at https://www.maptiler.com/cloud/'; | |
var attributions = | |
'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'; | |
/** | |
* Create the map. | |
*/ | |
var map = new Map({ | |
layers: [ | |
new TileLayer({ | |
source: new OSM() | |
}) ], | |
overlays: [overlay], | |
target: 'map', | |
view: new View({ | |
center: [0, 0], | |
zoom: 2, | |
}), | |
}); | |
/** | |
* Add a click handler to the map to render the popup. | |
*/ | |
map.on('singleclick', function (evt) { | |
var coordinate = evt.coordinate; | |
var hdms = toStringHDMS(toLonLat(coordinate)); | |
content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>'; | |
overlay.setPosition(coordinate); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "popup", | |
"dependencies": { | |
"ol": "6.3.1" | |
}, | |
"devDependencies": { | |
"parcel": "1.11.0" | |
}, | |
"scripts": { | |
"start": "parcel index.html", | |
"build": "parcel build --experimental-scope-hoisting --public-url . index.html" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"template": "parcel"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment