Add .css for popups.

[philipp/winterrodeln/mediawiki_extensions/wrmap.git] / wrmap.js

diff --git a/wrmap.js b/wrmap.js
index ec39a99aa52babbad00b4fe49322a91557c5d918..8b7607b943123c0b98518a889fa846938ca27550 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -15,11 +15,11 @@ OpenLayers.Popup.WrInfo = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
 
 
 function init_wrmap(i, jq_map) {
-       /*
        // define constants
-       var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat
-       var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
+       var EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
+       var EPSG3857 = ol.proj.get("EPSG:3857"); // google
 
+       /*
        // tool functions
        function createElement(tagName, attributes) {
                var element = $(document.createElement(tagName));
@@ -48,7 +48,7 @@ function init_wrmap(i, jq_map) {
        jq_map.empty(); // once parsed, remove geojson string from the map element.
        var json_js = JSON.parse(json_string);
        var format_geojson = new ol.format.GeoJSON();
-       var features_all = format_geojson.readFeatures(json_js, {dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'});
+       var features_all = format_geojson.readFeatures(json_js, {dataProjection: EPSG4326, featureProjection: EPSG3857});
 
        // extract, tranform and split features to layers
        /*
@@ -87,10 +87,81 @@ function init_wrmap(i, jq_map) {
        // // Alternative: Dummy base layer
        // var layer_map = new OpenLayers.Layer.Vector("Base Layer", {
        //     isBaseLayer: true});
+       */
+
 
-       
        // path layer
        // ----------
+
+       function get_feature_title(feature) {
+               var title = feature.get('type');
+               title = title.charAt(0).toUpperCase() + title.slice(1); // first letter uppercase
+               if (feature.get('name')) title += ': ' + feature.get('name');
+               return title;
+       }
+
+       function style_point_function(feature, resolution) {
+               var src = img_path + '/marker_p_' + feature.get('type') + '.png';
+               return new ol.style.Style({
+                       image: new ol.style.Icon({
+                               src: src,
+                               imgSize: [20, 34],
+                               anchor: [0.5, 1.0]
+                       }),
+               });
+       }
+
+       function style_point_function_selected(feature, resolution) {
+               var style = style_point_function(feature, resolution);
+               style.setText(new ol.style.Text({
+                       text: get_feature_title(feature),
+                       font: 'icon',
+                       offsetY: 14,
+                       stroke: new ol.style.Stroke({
+                               color: '#ddd',
+                               width: 2,
+                       }),
+               }));
+               return style;
+       }
+
+       function style_path_function(feature, resolution) {
+               var line_color = {
+                       'rodelbahn': '#014e9a',
+                       'gehweg': '#e98401',
+                       'alternative': '#7f7fff',
+                       'lift': '#000000',
+                       'anfahrt': '#e1e100'
+               };
+               var color = feature.get('strokeColor') || line_color[feature.get('type')] || '#e7525b';
+               var width = (feature.get('type') in ['lift', 'anfahrt']) ? 3 : 6;
+               return new ol.style.Style({
+                       stroke: new ol.style.Stroke({
+                               color: color,
+                               width: width
+                       })
+               });
+       }
+
+       function style_function(feature, resolution) {
+               if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function(feature, resolution);
+               return style_path_function(feature, resolution);
+       };
+
+       function style_function_selected(feature, resolution) {
+               if (feature.getGeometry() instanceof ol.geom.Point) return style_point_function_selected(feature, resolution);
+               return style_path_function(feature, resolution);
+       };
+
+       // popup overlay
+       // -------------
+       var popup_container = document.getElementById('popup');
+       var popup_content = document.getElementById('popup-content');
+       var popup_closer = document.getElementById('popup-closer');
+       var popup_overlay = new ol.Overlay({element: popup_container, autoPan: true, autoPanAnimation: {duration: 250}});
+       popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
+
+       /*
        var layer_path = new OpenLayers.Layer.Vector("Path", {
                styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
                                strokeColor: '${getStrokeColor}',
@@ -261,8 +332,8 @@ function init_wrmap(i, jq_map) {
 
        var layer_sledrun_source = new ol.source.Vector({features: features_all});
        var layer_sledrun = new ol.layer.Vector({
-               source: layer_sledrun_source
-               // style: styleFunction
+               source: layer_sledrun_source,
+               style: style_function
        });
 
        var map = new ol.Map({
@@ -271,13 +342,32 @@ function init_wrmap(i, jq_map) {
                        layer_map,
                        layer_sledrun
                ],
+               overlays: [popup_overlay],
                view: new ol.View({
                        center: ol.proj.fromLonLat([lon, lat]),
                        zoom: zoom
+               }),
+               controls: ol.control.defaults({
+                       attributionOptions: {
+                               collapsible: false
+                       }
                })
        });
 
 
+       var select_hover = new ol.interaction.Select({
+               condition: ol.events.condition.pointerMove,
+               style: style_function_selected,
+       });
+       map.addInteraction(select_hover);
+       map.on('singleclick', function(event) {
+               popup_content.innerHTML = '<p>You clicked</p>';
+               popup_overlay.setPosition(event.coordinate);
+       });
+       select_hover.on('select', function(event) {
+               console.log(event);
+       });
+
        /*
        // add features
        // if this would be done before the layer is added to the map, the features are not added