diff options
| -rw-r--r-- | index.html | 118 | ||||
| -rw-r--r-- | kostely.js | 81 |
2 files changed, 106 insertions, 93 deletions
@@ -1,94 +1,26 @@ +<!DOCTYPE html> <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> +<head> + <meta 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" + type="text/javascript"> + </script> + <script src="https://rawgit.com/tmcw/csv2geojson/gh-pages/csv2geojson.js" + type="text/javascript"> + </script> +</head> +<body> + <div id="map"> + <div id="popup" class="ol-popup"> + <a href="#" id="popup-closer" class="ol-popup-closer" name="popup-closer"></a> + <div id="popup-content"></div> + </div> + </div> + <script src="kostely.js" type="text/javascript"> + </script> +</body> +</html> diff --git a/kostely.js b/kostely.js new file mode 100644 index 0000000..0a87da9 --- /dev/null +++ b/kostely.js @@ -0,0 +1,81 @@ +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: "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 { + 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() +]); |