You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.1 KiB
HTML
84 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Asynchronous Loading</title>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
|
<meta charset="utf-8">
|
|
|
|
<link type="text/css" rel="stylesheet" href="../build/map.css" media="all"/>
|
|
<script type="text/javascript" src="../build/map.js"></script>
|
|
|
|
<style>
|
|
html, body, #map-canvas {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
<script>
|
|
window.addEventListener('message', function (e) {
|
|
try {
|
|
switch (e.data.action) {
|
|
case 'update':
|
|
var center = ol.proj.fromLonLat([e.data.lon, e.data.lat]);
|
|
|
|
mapView.setCenter(center);
|
|
iconGeometry.setCoordinates(center);
|
|
break;
|
|
|
|
}
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="map-canvas"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var mapView = new ol.View({
|
|
center: ol.proj.fromLonLat([0, 0]),
|
|
zoom: 15
|
|
});
|
|
|
|
var mapHandler = new ol.Map({
|
|
target: 'map-canvas',
|
|
layers: [
|
|
new ol.layer.Tile({
|
|
source: new ol.source.OSM()
|
|
})
|
|
],
|
|
view: mapView
|
|
});
|
|
|
|
var iconStyle = new ol.style.Style({
|
|
image: new ol.style.Icon(({
|
|
anchor: [0.5, 1],
|
|
opacity: 1,
|
|
scale: 0.5,
|
|
src: '../images/icons/cf_icon_position.png'
|
|
}))
|
|
});
|
|
|
|
var currentPositionLayer;
|
|
var iconGeometry = new ol.geom.Point(ol.proj.fromLonLat([0, 0]));
|
|
var iconFeature = new ol.Feature({
|
|
geometry: iconGeometry
|
|
});
|
|
|
|
iconFeature.setStyle(iconStyle);
|
|
|
|
var vectorSource = new ol.source.Vector({
|
|
features: [iconFeature]
|
|
});
|
|
currentPositionLayer = new ol.layer.Vector({
|
|
source: vectorSource
|
|
});
|
|
|
|
mapHandler.addLayer(currentPositionLayer);
|
|
|
|
</script>
|
|
|
|
</body> |