[guadec-web: 6/9] added interactivity

[Ismael Olea <olea src gnome org>]

commit af021cab81ef85cb588da4b6244910bcfa9b1605
Author: Jorge Sanz <xurxosanz gmail com>
Date:   Mon Jun 18 10:09:16 2018 +0200

    added interactivity

 .gitignore                   |   1 +
 content/pages/test-map-v2.md | 100 +++++++++++++++++++++++++++----------------
 2 files changed, 64 insertions(+), 37 deletions(-)
---
diff --git a/.gitignore b/.gitignore
index 96ff7ea..bd71832 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@
 /__pycache__/
 package-lock.json
 *~
+.vscode/settings.json
diff --git a/content/pages/test-map-v2.md b/content/pages/test-map-v2.md
index 4404de4..5e5baf0 100644
--- a/content/pages/test-map-v2.md
+++ b/content/pages/test-map-v2.md
@@ -42,6 +42,10 @@ Date: 20180615
         box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
         border-radius: 3px;
     }
+    .mapboxgl-popup-anchor-top .mapboxgl-popup-content{
+        background-color: #B4C6DD;
+        padding: 5px;
+    }
 </style>
 
 <div id="map">
@@ -264,7 +268,7 @@ Date: 20180615
                         "text-halo-width": 1.5,
                         "text-halo-blur": 1
                     }
-                });
+                },'place_hamlet');
             }); 
         };
 </script>
@@ -301,47 +305,69 @@ Date: 20180615
     /* Navigation control */
     map.addControl(new mapboxgl.NavigationControl());
 
-    /* Popup interactivity */
-    map.on('click', function(e) {
-        var features = map.queryRenderedFeatures(e.point, {
+    /* Popup up singleton */
+    var tooltip = new mapboxgl.Popup({   
+        closeButton: false,
+        closeOnClick: true,
+        anchor: "top" 
+        });
+    
+    // helper to render the properties
+    var get_properties_list = function(properties){
+        return popup_properties.filter(function(key){
+                return (Object.keys(properties).findIndex(x => x == key) > -1)
+            })
+            .map(function(key){
+                if (key == 'website'){
+                    return `<li><a href="${properties[key]}">${key}</a></li>`
+                } else if (key == 'wikidata'){
+                    return `<li><a href="https://www.wikidata.org/wiki/${properties[key]}";>${key}</a></li>`
+                } else if (key == 'wikipedia'){
+                    return `<li><a href="https://en.wikipedia.org/wiki/${properties[key]}";>${key}</a></li>`
+                } else {
+                    return `<li><strong>${key}</strong>: ${properties[key]}</li>`
+                }
+            }).join('')
+    };
+
+    var interactivity_handler = function(location,is_tooltip){
+        var features = map.queryRenderedFeatures(location.point, {
             layers: ['guadec_icon']
         });
+        tooltip.remove();
 
-        if (!features.length) {
-            return;
+        if (features != ''){
+            popup = null;
+            var feature = features[0];
+
+            if (is_tooltip){
+                tooltip.setHTML(`<span>${feature.properties.name}</span>`)
+                        .setLngLat(location.lngLat) 
+                        .addTo(map);
+            } else {
+                popup = new mapboxgl.Popup({anchor:'bottom'})
+                        .setHTML(`
+                            <h3>${feature.properties.name}</h3>
+                            <ul>
+                            ${get_properties_list(feature.properties)}
+                            </ul>
+                            <p class="osm-source"><a 
href="https://www.openstreetmap.org/${feature.properties.type}/${feature.properties.id}";>Source</a></p>
+                            `
+                        )
+                        .setLngLat(location.lngLat) 
+                        .addTo(map);
+            }                
         }
+    }
 
-        var // get the closest feature
-            feature = features[0],
-            // helper to render the properties
-            get_properties_list = function(properties){
-                return popup_properties.filter(function(key){
-                        return (Object.keys(properties).findIndex(x => x == key) > -1)
-                    })
-                    .map(function(key){
-                        if (key == 'website'){
-                            return `<li><a href="${properties[key]}">${key}</a></li>`
-                        } else if (key == 'wikidata'){
-                            return `<li><a 
href="https://www.wikidata.org/wiki/${properties[key]}";>${key}</a></li>`
-                        } else if (key == 'wikipedia'){
-                            return `<li><a 
href="https://en.wikipedia.org/wiki/${properties[key]}";>${key}</a></li>`
-                        } else {
-                            return `<li><strong>${key}</strong>: ${properties[key]}</li>`
-                        }
-                    }).join('')
-            };
-            // generate a new popup
-            popup = new mapboxgl.Popup({ offset: [0, -15] })
-                .setHTML(`
-                    <h3>${feature.properties.name}</h3>
-                    <ul>
-                    ${get_properties_list(feature.properties)}
-                    </ul>
-                    <p class="osm-source"><a 
href="https://www.openstreetmap.org/${feature.properties.type}/${feature.properties.id}";>Source</a></p>
-                    `
-                )
-                .setLngLat(feature.geometry.coordinates)
-                .addTo(map);
+    /* Popup interactivity */
+    map.on('click',function(location){
+        interactivity_handler(location,false);
+    });
+
+    /* Popup interactivity */
+    map.on('mousemove',function(location){
+        interactivity_handler(location,true);
     });
 
     /* Filter control */