[guadec-web: 1/6] improved the way the sprite is managed to avoid using a local style json

[Oliver Gutiérrez <ogutierrez src gnome org>]

commit c3db2b88aaeb9503445256f03bf750dd6b052921
Author: Jorge Sanz <xurxosanz gmail com>
Date:   Sun Jul 1 20:09:45 2018 +0200

    improved the way the sprite is managed to avoid using a local style json

 content/pages/map.md                    |   35 +-
 src/js/guadec_map/guadec-map-style.json | 5893 -------------------------------
 src/js/guadec_map/guadec-map.js         |  310 +-
 3 files changed, 185 insertions(+), 6053 deletions(-)
---
diff --git a/content/pages/map.md b/content/pages/map.md
index 7d79c6c..db617ca 100644
--- a/content/pages/map.md
+++ b/content/pages/map.md
@@ -122,7 +122,7 @@ Date: 20180615
         OpenMapTiles https://openmaptiles.github.io/positron-gl-style/style-cdn.json
         CARTO https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json
         */
-        basemap_style : '/theme/js/guadec-map/guadec-map-style.json',
+        basemap_style : 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
         /* initial center and zoom level, you can use bboxfinder.com to find proper values */
         center : [-2.421,36.823],
         zoom   : 12,
@@ -139,26 +139,35 @@ Date: 20180615
             'adr:street', 'picture',
             'website','wikidata','wikipedia'
         ],
-        mapbox_token :  
'pk.eyJ1IjoieHVyeG9zYW56IiwiYSI6ImNqaXk4NW40MTA3NWUzcG5vMjlobWk2dGIifQ.iI-Ns8Qh5uEg9dDwZnnecw'
+        mapbox_token :  
'pk.eyJ1IjoieHVyeG9zYW56IiwiYSI6ImNqaXk4NW40MTA3NWUzcG5vMjlobWk2dGIifQ.iI-Ns8Qh5uEg9dDwZnnecw',
+        tweak_style : function(style,options){
+            style['name'] = 'guadec_voyager';
+            style['id'] = 'guadec_voyager';
+            style['layers'] = style.layers.filter( l => l.id != 'place_suburbs' && l.id != 'building-top');
+            var guadec_light_color =  tinycolor(options.main_color).lighten(35).toHexString();
+
+            var building_layer = style.layers.filter(l => l.id == 'building');
+            if ( building_layer.length ==1 ){
+                building_layer[0].paint['fill-color'] = guadec_light_color;
+            }
+
+            return style
+        },
+        /* You need to update this setting to DEV to allow working locally */
+        environment : 'DEV'
     };
 
-    var guadec_light_color = tinycolor(options.main_color).lighten(35).toHexString();
     var guadec_map = new GuadecMap(options);
     var map = null;
 
     // Promise to load the map
     var get_map = new Promise((resolve,reject)=>{
-
         // Get the map
-        map = guadec_map.init_map();
-
-        // Do some style tweaks and then return it
-        map.on('load',function(){
-            map.removeLayer('place_suburbs')
-                .removeLayer('building-top')
-                .setPaintProperty('building','fill-color',guadec_light_color);            
-
-            resolve();
+        guadec_map.init_map().then(map => {
+            // Do some style tweaks and then return it
+            map.on('load',function(){
+                resolve();
+            });
         });
     });
 
diff --git a/src/js/guadec_map/guadec-map.js b/src/js/guadec_map/guadec-map.js
index 418f83c..a6d2e1a 100644
--- a/src/js/guadec_map/guadec-map.js
+++ b/src/js/guadec_map/guadec-map.js
@@ -140,164 +140,180 @@ class GuadecMap {
     init_map(){
         var context = this;
         var options = context.options;
-        var map = new mapboxgl.Map({
-            container: 'map',
-            style: options.basemap_style,
-            center: options.center,
-            zoom: options.zoom,
-            attributionControl: true,
-            hash: true
-        });
-        
-        /* Navigation control */
-        map.addControl(new mapboxgl.NavigationControl());
-        
-        /* Popup up singleton */
-        var tooltip = new mapboxgl.Popup({   
-            closeButton: false,
-            closeOnClick: true,
-            anchor: "top",
-            offset: [0, 8]
-        });
-        
-        // helper to render the properties
-        var get_properties_list = function(properties){
-            return options.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 if (key == 'picture') {
-                    return `<li><a href="${properties[key]}">Picture</a></li>`
+        var env = options.environment;
+
+        return new Promise(function(resolve,reject){
+            fetch(options.basemap_style)
+            .then(response => response.json())
+            .then(style =>{
+                if (env == 'DEV'){
+                    console.log('Using localhost sprite');
+                    style['sprite'] = 'http://localhost:8000/theme/js/guadec-map/sprite';
                 } else {
-                    return `<li><strong>${key}</strong>: ${properties[key]}</li>`
+                    console.log('Using guadecwebsite sprite');
+                    style['sprite'] = 'https://2018.guadec.org/theme/js/guadec-map/sprite';
                 }
-            }).join('')
-        };
 
-        var interactivity_handler = function(location,is_tooltip){
-            if (! map.getLayer('guadec_icon') || ! map.getLayer('guadec_routes')) return;
-            
-            var features_icons = map.queryRenderedFeatures(location.point, { layers: ['guadec_icon'] });
-            var features_routes = map.queryRenderedFeatures(location.point, { layers: ['guadec_routes'] });
-            
-            // remove previous interactivity elements
-            tooltip.remove();
-            if (typeof map.getLayer('selected_route') !== "undefined" ){
-                map.removeLayer('selected_route')
-                map.removeSource('selected_route');   
-            }
-            
-            if (features_icons != ''){
-                var feature = features_icons[0];
-                var popup = null;
-                var popup_content = null;
-
-                if (is_tooltip){
-                    popup = tooltip;
-
-                    if (feature.properties.cluster){
-                        popup_content = `<span>${feature.properties.point_count} points</span>`;
-                    } else {
-                        popup_content = `<span>${feature.properties.name}</span>`;
-                    }
-                } else {
-                    popup = new mapboxgl.Popup({
-                        anchor:'bottom',
-                        closeOnClick: true,
-                        className:'guadec-popup'
+                var map = new mapboxgl.Map({
+                    container: 'map',
+                    style: options.tweak_style(style, options),
+                    center: options.center,
+                    zoom: options.zoom,
+                    attributionControl: true,
+                    hash: true
+                });
+                
+                /* Navigation control */
+                map.addControl(new mapboxgl.NavigationControl());
+                
+                /* Popup up singleton */
+                var tooltip = new mapboxgl.Popup({   
+                    closeButton: false,
+                    closeOnClick: true,
+                    anchor: "top",
+                    offset: [0, 8]
+                });
+                
+                // helper to render the properties
+                var get_properties_list = function(properties){
+                    return options.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 if (key == 'picture') {
+                            return `<li><a href="${properties[key]}">Picture</a></li>`
+                        } else {
+                            return `<li><strong>${key}</strong>: ${properties[key]}</li>`
+                        }
+                    }).join('')
+                };
+        
+                var interactivity_handler = function(location,is_tooltip){
+                    if (! map.getLayer('guadec_icon') || ! map.getLayer('guadec_routes')) return;
                     
-                    if (feature.properties.cluster){
-                        popup_content = `<h3>${feature.properties.point_count} points</h3>`;
-                    } else {
-                        popup_content = `
-                        <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>
-                        `;
+                    var features_icons = map.queryRenderedFeatures(location.point, { layers: ['guadec_icon'] 
});
+                    var features_routes = map.queryRenderedFeatures(location.point, { layers: 
['guadec_routes'] });
+                    
+                    // remove previous interactivity elements
+                    tooltip.remove();
+                    if (typeof map.getLayer('selected_route') !== "undefined" ){
+                        map.removeLayer('selected_route')
+                        map.removeSource('selected_route');   
                     }
-
                     
+                    if (features_icons != ''){
+                        var feature = features_icons[0];
+                        var popup = null;
+                        var popup_content = null;
+        
+                        if (is_tooltip){
+                            popup = tooltip;
+        
+                            if (feature.properties.cluster){
+                                popup_content = `<span>${feature.properties.point_count} points</span>`;
+                            } else {
+                                popup_content = `<span>${feature.properties.name}</span>`;
+                            }
+                        } else {
+                            popup = new mapboxgl.Popup({
+                                anchor:'bottom',
+                                closeOnClick: true,
+                                className:'guadec-popup'
+                            })
+                            
+                            if (feature.properties.cluster){
+                                popup_content = `<h3>${feature.properties.point_count} points</h3>`;
+                            } else {
+                                popup_content = `
+                                <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>
+                                `;
+                            }
+        
+                            
+                        }
+                        
+                        popup.setHTML(popup_content)
+                        .setLngLat(location.lngLat) 
+                            .addTo(map);
+                            
+                        } else if ( features_routes != '') {
+                            var feature = features_routes[0];
+                            var highlight_color = tinycolor(options.main_color).lighten(20);
+                            
+                            // Render the feature
+                            map.addSource('selected_route', {
+                            "type":"geojson",
+                            "data": feature.toJSON()
+                        });
+                        map.addLayer({
+                            "id": "selected_route",
+                            "type": "line",
+                            "source": "selected_route",
+                            "layout": {
+                                "line-join": "round",
+                                "line-cap": "round"
+                            },
+                            "paint": {
+                                "line-color": highlight_color.toHexString(),
+                                "line-width": 8
+                            }
+                        },'guadec_routes');
+        
+                        // Render the interactivity
+                        
+                        var popup = null;
+                        var popup_content = null;
+                        
+                        if (is_tooltip){
+                            popup = tooltip;
+                            popup_content = `<span>${feature.properties.name}</span>`;
+                        } else {
+                            popup = new mapboxgl.Popup({
+                                anchor:'bottom',
+                                closeOnClick: true,
+                                className:'guadec-popup'
+                            });
+                            popup_content = `
+                                <h3>${feature.properties.name}</h3> 
+                                <p>${feature.properties.description}</p>`;
+                        }
+        
+                        popup.setHTML(popup_content)
+                            .setLngLat(location.lngLat) 
+                            .addTo(map);
+                    }
                 }
-                
-                popup.setHTML(popup_content)
-                .setLngLat(location.lngLat) 
-                    .addTo(map);
-                    
-                } else if ( features_routes != '') {
-                    var feature = features_routes[0];
-                    var highlight_color = tinycolor(options.main_color).lighten(20);
-                    
-                    // Render the feature
-                    map.addSource('selected_route', {
-                    "type":"geojson",
-                    "data": feature.toJSON()
+        
+                /* Popup interactivity */
+                map.on('click',function(location){
+                    interactivity_handler(location,false);
                 });
-                map.addLayer({
-                    "id": "selected_route",
-                    "type": "line",
-                    "source": "selected_route",
-                    "layout": {
-                        "line-join": "round",
-                        "line-cap": "round"
-                    },
-                    "paint": {
-                        "line-color": highlight_color.toHexString(),
-                        "line-width": 8
-                    }
-                },'guadec_routes');
-
-                // Render the interactivity
                 
-                var popup = null;
-                var popup_content = null;
                 
-                if (is_tooltip){
-                    popup = tooltip;
-                    popup_content = `<span>${feature.properties.name}</span>`;
-                } else {
-                    popup = new mapboxgl.Popup({
-                        anchor:'bottom',
-                        closeOnClick: true,
-                        className:'guadec-popup'
-                    });
-                    popup_content = `
-                        <h3>${feature.properties.name}</h3> 
-                        <p>${feature.properties.description}</p>`;
-                }
-
-                popup.setHTML(popup_content)
-                    .setLngLat(location.lngLat) 
-                    .addTo(map);
-            }
-        }
-
-        /* Popup interactivity */
-        map.on('click',function(location){
-            interactivity_handler(location,false);
-        });
-        
-        
-        /* Popup interactivity */
-        map.on('mousemove',function(location){
-            interactivity_handler(location,true);
-        });
-        
-        this.map = map;
-        return map;
+                /* Popup interactivity */
+                map.on('mousemove',function(location){
+                    interactivity_handler(location,true);
+                });
+                
+                context.map = map;
+                resolve(map);
+            }).catch(error => reject(error));
+        })        
     }
     
     /* Get data from OSM and return a promise when is parsed */