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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
var vectorLayer = new ol.layer.Vector({
title: "Románské kostely",
projection: "EPSG:3857",
source: new ol.source.Vector({
format: new ol.format.GeoJSON()
}),
// I am not sure about the meaning of icons. I think,
// blue is rotunda and red other church
style: function(feat, res) {
var icon = feat.get('icon');
var img_src = "Ol_icon_red.png";
if (icon == 'rotunda') {
img_src = "Ol_icon_blue.png";
}
else if (icon == 'question') {
img_src = "Ol_question_green.png";
}
var offset = feat.get('iconOffset');
return [new ol.style.Style({
image: new ol.style.Icon({
src: img_src
}),
text: new ol.style.Text({
font: 'bolder 10px serif',
text: feat.get('title'),
offsetY: 12,
textBaseLine: "bottom"
})
})];
}
});
var map = new ol.Map({
target: "map",
projection: "EPSG:3857",
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
layers: [
new ol.layer.Tile({
title: "OSM Map",
source: new ol.source.OSM()
}),
// to be filled in later
vectorLayer
],
view: new ol.View({
//Village Čihošť is the geographical center of Czechia
center: ol.proj.fromLonLat([15.338611, 49.743889]),
zoom: 8
})
});
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function(data) {
if (httpRequest.readyState != 4 || httpRequest.status != 200) {
return;
}
else {
csv2geojson.csv2geojson(httpRequest.responseText, {
latfield: 'lat',
lonfield: 'lon',
delimiter: '\t'
},
function(err, data) {
var geoJsonFormat = new ol.format.GeoJSON();
var features = geoJsonFormat.readFeatures(
data, {
featureProjection: 'EPSG:3857'
}
);
var layerSource = vectorLayer.getSource();
layerSource.addFeatures(features);
});
}};
httpRequest.open('GET', 'kostely.tsv');
httpRequest.send();
map.controls = ol.control.defaults({ attribution: false });
map.controls.extend([
new ol.control.Attribution({
collapsible: true
})
]);
map.controls.extend([
new ol.control.MousePosition()
]);
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -10]
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('description')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
|
