diff options
| author | Matěj Cepl <mcepl@cepl.eu> | 2015-07-23 19:03:36 +0200 |
|---|---|---|
| committer | Matěj Cepl <mcepl@cepl.eu> | 2015-07-23 19:03:36 +0200 |
| commit | 584ccea1ae76902c53005a2cc6692dba9eceace0 (patch) | |
| tree | 207e4155d15c50186067a03ecbc20fdbd58351e1 /index.html | |
| download | kostely-584ccea1ae76902c53005a2cc6692dba9eceace0.tar.gz | |
Semi-working version
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..dda9373 --- /dev/null +++ b/index.html @@ -0,0 +1,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> |