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
|
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Románské kostely v Česku</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol-debug.js"></script>
<script src="https://rawgit.com/tmcw/csv2geojson/gh-pages/csv2geojson.js"></script>
</head>
<body>
<div id="mapdiv"></div>
<script>
var vectorLayer = new ol.layer.Vector({
title: "Románské kostely",
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";
}
var offset = feat.get('iconOffset');
return [new ol.style.Style({
image: new ol.style.Icon({
src: img_src
}),
text: new ol.style.Text({
text: feat.get('title')
})
})];
}
});
var map = new ol.Map({
target: "mapdiv",
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 {
console.log('Got httpRequest response!');
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()
]);
</script>
</body></html>
|
