Implement hover to show names.

diff --git a/wrmap.js b/wrmap.js
index 72ec724806d5e16e1b296976fc1535e7a0e064c0..67292d6a8799c0f1df09480561080d51f938faea 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -87,10 +87,19 @@ 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({
@@ -98,10 +107,24 @@ function init_wrmap(i, jq_map) {
                                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',
@@ -125,6 +148,13 @@ function init_wrmap(i, jq_map) {
                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);
+       };
+
+
+       /*
        var layer_path = new OpenLayers.Layer.Vector("Path", {
                styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
                                strokeColor: '${getStrokeColor}',
@@ -317,6 +347,15 @@ function init_wrmap(i, jq_map) {
        });
 
 
+       var select_hover = new ol.interaction.Select({
+               condition: ol.events.condition.pointerMove,
+               style: style_function_selected,
+       });
+       map.addInteraction(select_hover);
+       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