[guadec-web: 7/10] moved to a better async management

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

commit 34be52f04242896d0df9e2d81c7b840386583886
Author: Jorge Sanz <xurxosanz gmail com>
Date:   Wed Jun 27 10:21:57 2018 +0200

    moved to a better async management

 content/pages/map.md            |  47 +++++++--
 src/js/guadec_map/guadec-map.js | 207 ++++++++++++++++++++--------------------
 2 files changed, 141 insertions(+), 113 deletions(-)
---
diff --git a/content/pages/map.md b/content/pages/map.md
index 23fb8d5..c2d404a 100644
--- a/content/pages/map.md
+++ b/content/pages/map.md
@@ -5,6 +5,7 @@ Date: 20180615
 <link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' />
 <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
 <script src="https://tyrasd.github.io/osmtogeojson/osmtogeojson.js";></script>
+<script src='/theme/js/guadec-map/guadec-map.js'></script>
 
 <style>
     #map {
@@ -126,15 +127,43 @@ Date: 20180615
         ]
     };
 
-    /* Import the module and initialize the map with the passed options */
-    import { GuadecMap } from '/theme/js/guadec-map/guadec-map.js';
-    var guadec_map = new GuadecMap(options);
-    var map = guadec_map.init_map();
+    (async function() {
+
+        var guadec_map = new GuadecMap(options);
+        var map = null;
+
+        // Promise to load the map
+        async function get_map(){
+            return new Promise((resolve,reject)=>{
+                map = guadec_map.init_map();
+                map.on('load',function(){
+                    resolve();
+                })
+            });
+        }
+
+        // Promise to load the data from OSM
+        async function get_data(){
+            var osm_data = await guadec_map.fetch_data();
+            return new Promise((resolve,reject)=>{
+                var geojson_data = guadec_map.process_osm_data(osm_data);
+                guadec_map.set_geojson_data(geojson_data);
+                resolve();
+            });
+        }
+
+        // When map and OSM data is retrieved, we can load POIS and Routes
+        Promise.all([
+            get_map(),
+            get_data()
+        ]).then(function(){
+            // Load the POIS
+            guadec_map.load_pois();
+            // Load the Routes
+            guadec_map.load_routes();
+        })
+
+    })();
 
-    /*Once map is loaded, get data from OSM to add as a new layer */
-    map.on('load', function() {
-        guadec_map.load_pois();
-        //guadec_map.load_routes();
-    });
 
 </script>
\ No newline at end of file
diff --git a/src/js/guadec_map/guadec-map.js b/src/js/guadec_map/guadec-map.js
index ecc9111..f444e45 100644
--- a/src/js/guadec_map/guadec-map.js
+++ b/src/js/guadec_map/guadec-map.js
@@ -94,9 +94,9 @@ class GuadecMap {
 
     /* transforms OSM data into geojson and adds that as
         points and labels to the map */
-    static load_osm_data(context,data){
+    process_osm_data(data){
         console.log('loading data...');
-        var  
+        var context = this,
             // Convert to GeoJSON
             geojson_data = osmtogeojson(data),
             // Filter ways
@@ -129,6 +129,10 @@ class GuadecMap {
         };           
     }
 
+    set_geojson_data(data){
+        this.geojson_data = data;
+    }
+
     init_map(){
         /*
             TODO move this to a class instantiation so we can put the options on a constructor and then have 
methods to render the pois and the routes
@@ -224,114 +228,109 @@ class GuadecMap {
         return map;
     }
 
-    load_pois(){
+    fetch_data(){
         var context = this;
         console.log('fetching osm data...')
-        fetch(this.overpass_url,{
+        return fetch(this.overpass_url,{
             method: "POST",
-            body:  this.get_osm_query(this.options)})
-            .then(response => response.text())
-            .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
-            .then(function(data){
-                // Get the geojson to work
-                var options = context.options;
-                var map = context.map;
-
-                context.geojson_data = GuadecMap.load_osm_data(context,data);
-                console.log(context.geojson_data);
-
-                /* Icon layer */
-                map.addLayer({
-                    'id': 'guadec_icon',
-                    'type': 'symbol',
-                    'source': {
-                        'type': 'geojson',
-                        'data': context.geojson_data
-                    },
-                    'layout': {
-                        "symbol-placement": "point",
-                        "text-field": '{name}' ,
-                        "icon-image": [
-                            "case",
-                            ["has", 'icon'], ["get", "icon"],
-                            options.icon,
-                        ],
-                        "text-font": ["Open Sans Regular"],
-                        "icon-allow-overlap": true,
-                        "text-offset": [.3,.3],
-                        "text-anchor": "top-left",
-                        "text-max-width": 5,
-                        "text-justify": "left",
-                        "text-allow-overlap": false,
-                        "text-optional": true,
-                        "icon-size": {
-                            "stops": [
-                                [0, 0.3],
-                                [12, 0.6],
-                                [14, 1],
-                                [18, 1.5],
-                            ]
-                        },
-                        "text-size": {
-                            "stops": [
-                                [0, 0],
-                                [9,0],
-                                [12, 15],
-                                [16, 20]
-                            ]
-                        }
-                    },
-                    'paint': {
-                        "text-color": options.main_color,
-                        "icon-opacity": 1,
-                        "text-opacity": {
-                            "stops": [
-                                [0, 0],
-                                [9,0],
-                                [12, 1]
-                            ]
-                        },
-                        "text-halo-color": "white",
-                        "text-halo-width": 1.5,
-                        "text-halo-blur": 1
-                    }
-                },'place_hamlet');
-
-
-
-                /* Filter control */
-                document
-                .getElementById('filter-input')
-                .addEventListener('keyup', function(e) {
-                    function normalize(string) {
-                        return string.trim().toLowerCase();
-                    };
-
-                    // Get the value of the input
-                    var value = normalize(e.target.value);
-                    
-                    if (value == ""){
-                        // If it's empty remove the filter
-                        map.setFilter('guadec_icon', null);
-
-                    } else {
-                        // Filter the geojson features and get their ids
-                        var ids = context.geojson_data.features
-                            .filter( x =>  normalize( x['properties']['name']).match(new RegExp(value,"g")) 
!= null)
-                            .map(x => x['properties']['id'])
-
-                        // Set the filter of the layer to match those ids
-                        map.setFilter('guadec_icon', ['match', ['get', 'id'], ids, true, false]);
-                    }
-                });
-            })
-            .catch(error => console.log("Error:", error));
+            body:  this.get_osm_query(this.options)
+        })
+        .then(response => response.text())
+        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
+    }
+
+    load_pois(){
+        var geojson_data = this.geojson_data;
+        var options = this.options;
+        var map = this.map;
+        /* Icon layer */
+        map.addLayer({
+            'id': 'guadec_icon',
+            'type': 'symbol',
+            'source': {
+                'type': 'geojson',
+                'data': geojson_data
+            },
+            'layout': {
+                "symbol-placement": "point",
+                "text-field": '{name}' ,
+                "icon-image": [
+                    "case",
+                    ["has", 'icon'], ["get", "icon"],
+                    options.icon,
+                ],
+                "text-font": ["Open Sans Regular"],
+                "icon-allow-overlap": true,
+                "text-offset": [.3,.3],
+                "text-anchor": "top-left",
+                "text-max-width": 5,
+                "text-justify": "left",
+                "text-allow-overlap": false,
+                "text-optional": true,
+                "icon-size": {
+                    "stops": [
+                        [0, 0.3],
+                        [12, 0.6],
+                        [14, 1],
+                        [18, 1.5],
+                    ]
+                },
+                "text-size": {
+                    "stops": [
+                        [0, 0],
+                        [9,0],
+                        [12, 15],
+                        [16, 20]
+                    ]
+                }
+            },
+            'paint': {
+                "text-color": options.main_color,
+                "icon-opacity": 1,
+                "text-opacity": {
+                    "stops": [
+                        [0, 0],
+                        [9,0],
+                        [12, 1]
+                    ]
+                },
+                "text-halo-color": "white",
+                "text-halo-width": 1.5,
+                "text-halo-blur": 1
+            }
+        },'place_hamlet');
+
+
+
+        /* Filter control */
+        document
+        .getElementById('filter-input')
+        .addEventListener('keyup', function(e) {
+            function normalize(string) {
+                return string.trim().toLowerCase();
+            };
+
+            // Get the value of the input
+            var value = normalize(e.target.value);
+            
+            if (value == ""){
+                // If it's empty remove the filter
+                map.setFilter('guadec_icon', null);
+
+            } else {
+                // Filter the geojson features and get their ids
+                var ids = geojson_data.features
+                    .filter( x =>  normalize( x['properties']['name']).match(new RegExp(value,"g")) != null)
+                    .map(x => x['properties']['id'])
+
+                // Set the filter of the layer to match those ids
+                map.setFilter('guadec_icon', ['match', ['get', 'id'], ids, true, false]);
+            }
+        });
     }
 
     load_routes(){
         throw "not implemented"
     }
 
-}
-
-export { GuadecMap };
\ No newline at end of file
+}
\ No newline at end of file