Originální import z https://gitlab.com/mcepl/kostely

1 files changed, 160 insertions, 0 deletions

diff --git a/kostely.js b/kostely.js
new file mode 100644
index 0000000..49ceadf
--- /dev/null
+++ b/kostely.js
@@ -0,0 +1,160 @@
+var vectorLayer = new ol.layer.Vector({
+    title: "Románské kostely",
+    projection: "EPSG:3857",
+    source: new ol.source.Vector({
+        format: new ol.format.GeoJSON()
+    }),
+    style: function(feat, res) {
+        var icon = feat.get('icon');
+        var img_src = "img/Ol_icon_red.png";
+        if (icon == 'rotunda') {
+            img_src = "img/Ol_icon_blue.png";
+        }
+        else if (icon == 'question') {
+            img_src = "img/Ol_question_green.png";
+        }
+        // FIXME je offset k něčemu dobrý?
+        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();
+
+ol.control.WMSLegend = function(opt_options) {
+    var options = opt_options || {};
+    this.options = options;
+    this.div = document.createElement('div');
+    var legendP = document.createElement('p');
+    legendP.innerHTML = 'Legend:';
+    this.div.className = this.options.class + ' ol-unselectable';
+    this.div.appendChild(legendP);
+    ol.control.Control.call(this, {
+        element: this.div
+    });
+};
+ol.inherits(ol.control.WMSLegend, ol.control.Control);
+
+ol.control.WMSLegend.prototype.drawLegendItem = function(layer) {
+    if (layer.get('showLegend') === true) {
+        try {
+            var url = layer.getSource().getUrls()[0];
+        }
+        catch(err) {
+            var url = layer.getSource().getUrl();
+        }
+        var legendImg = document.createElement('img');
+        legendImg.src = url + '&version=' + this.options.wmsVersion + '&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=' + layer.getSource().getParams().layers + '&format=' + this.options.format;
+        this.div.appendChild(legendImg);
+    }
+}
+
+ol.control.WMSLegend.prototype.setMap = function(map){
+    ol.control.Control.prototype.setMap.call(this, map);
+    this.options.wmsVersion = this.options.wmsVersion || '1.3.0';
+    this.options.format = this.options.format || 'image/png';
+    var layers = map.getLayers().getArray();
+    for (var i=0; i<layers.length; i++) {
+        if (layers[i] instanceof ol.layer.Group) {
+            var layersFromGroup = layers[i].getLayers().getArray();
+            for (var j=0;j<layersFromGroup.length;j++) {
+                this.drawLegendItem(layersFromGroup[j]);
+            }
+        } else {
+            this.drawLegendItem(layers[i]);
+        }
+    }
+};
+
+map.controls =  ol.control.defaults({ attribution: false });
+map.controls.extend([
+  new ol.control.Attribution({
+    collapsible: true
+  }),
+  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');
+}
+});