-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathopenlayer.html
86 lines (82 loc) · 2.56 KB
/
openlayer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<div id="overlay" style="background-color: white; border-radius: 10px; border: 1px solid black; padding: 5px 10px;">
<script type="text/javascript">
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([-9.567156,30.412447]),
zoom: 7 //Initial Zoom Level
})
});
//Adding a marker on the map
var marker = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([-9.567156,30.412447])
), // Cordinates
});
var marker2 = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([-9.482459,30.379512])
), // Cordinates
});
marker.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossorigin:"anonymous",
src:'marker.png'
}))
}));
marker2.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossorigin:"anonymous",
src:'marker.png'
}))
}));
var vectorSource = new ol.source.Vector({
features: [marker,marker2]
});
var markerVectorLayer = new ol.layer.Vector({
source: vectorSource,
});
var overlay = new ol.Overlay({
element: document.getElementById('overlay'),
positioning: 'bottom-center'
});
map.addLayer(markerVectorLayer);
// register an event handler for the click event
map.on('click', function(event) {
// extract the spatial coordinate of the click event in map projection units
var coord = event.coordinate;
// transform it to decimal degrees
var degrees = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
// format a human readable version
var hdms = ol.coordinate.toStringHDMS(degrees);
// update the overlay element's content
var element = overlay.getElement();
element.innerHTML = hdms;
// position the element (using the coordinate in the map's projection)
overlay.setPosition(coord);
// and add it to the map
map.addOverlay(overlay);
});
</script>
</body>
</html>