[guadec-web: 2/9] a small improvement to avoid double call to osm overpass api

[Ismael Olea <olea src gnome org>]

commit 2d191ae80199780f4515bdbca21978c67fcdce0e
Author: Jorge Sanz <xurxosanz gmail com>
Date:   Fri Jun 15 20:31:15 2018 +0200

    a small improvement to avoid double call to osm overpass api

 content/pages/test-map-v2.md | 117 ++++++++++++++++---------------------------
 1 file changed, 44 insertions(+), 73 deletions(-)
---
diff --git a/content/pages/test-map-v2.md b/content/pages/test-map-v2.md
index 077d2bd..57a0480 100644
--- a/content/pages/test-map-v2.md
+++ b/content/pages/test-map-v2.md
@@ -56,18 +56,6 @@ Date: 20180615
                        zoom: zoom,
                        attributionControl: true
                }),
-               label_layout = {
-                       "text-font": ["Open Sans Regular"],
-                       "text-field": "{name}",
-                       "symbol-placement": "point",
-                       "text-size": 20,
-                       "text-offset": [.25,.25],
-                       "text-anchor": "top-left",
-                       "text-allow-overlap": false
-               },
-               label_paint =  {
-                       "text-color": main_color
-               },
                /* from https://www.npmjs.com/package/geojson-polygon-center */
                polygon_center = function (polygon) {
                        var minx = miny = 1000
@@ -100,20 +88,37 @@ Date: 20180615
                        })
                        return geojson
                },
-               /* transforms OSM ways into geojson and adds that as
+               /* transforms OSM data into geojson and adds that as
                points and labels to the map */
-               load_ways = function(data){
-                       // Convert all data to points
-                       polys_geojson = osmtogeojson(data);
-                       points = polys_geojson.features.map(function(poly){
+               load_osm_data = function(data){
+                       // Convert to GeoJSON
+                       var geojson_data = osmtogeojson(data);
+
+                       // Filter ways
+                       var polys_geojson = geojson_data.features.filter(function(feature){
+                               return feature.properties.type == "way"
+                       });
+                       // Filter points
+                       var points_geojson = geojson_data.features.filter(function(feature){
+                               return feature.properties.type == "node"
+                       });
+
+                       // Generate centroids for points
+                       var polys_geojson_points = polys_geojson.map(function(poly){
                                copy = JSON.parse(JSON.stringify(poly));
                                copy['geometry'] = polygon_center(copy.geometry.coordinates);
                                return copy
                        });
-                       points_geojson_props = tags_to_props({
+
+                       // Get all properties out
+                       var points_geojson_props = tags_to_props({
                                'type': 'FeatureCollection',
-                               'features': points
+                               'features': points_geojson.concat(polys_geojson_points)
                        });
+
+                       console.log(points_geojson_props);
+
+                       // Add a new layers with the points
                        map.addLayer({
                                'id': 'guadec_ways',
                                'type': 'circle',
@@ -139,76 +144,42 @@ Date: 20180615
                                        'type': 'geojson',
                                        'data': points_geojson_props
                                },
-                               'layout': label_layout,
-                               'paint': label_paint
-                       });
-               },
-               /* transforms OSM nodes into geojson and adds that as
-               points and labels to the map */
-               load_pois = function(data){
-                       points_geojson = osmtogeojson(data);
-                       points_geojson_props = tags_to_props(points_geojson); 
-                       map.addLayer({
-                               'id': 'guadec_pois',
-                               'type': 'circle',
-                               'source': {
-                                       'type': 'geojson',
-                                       'data': points_geojson_props
+                               'layout': {
+                                       "text-font": ["Open Sans Regular"],
+                                       "text-field": "{name}",
+                                       "symbol-placement": "point",
+                                       "text-size": 20,
+                                       "text-offset": [.25,.25],
+                                       "text-anchor": "top-left",
+                                       "text-allow-overlap": false
                                },
-                               'layout': {},
                                'paint': {
-                                       'circle-radius': {
-                                               'base': 3,
-                                               'stops': [[12, 5], [22, 180]]
-                                       },
-                                       'circle-color': main_color
+                                       "text-color": main_color,
+                                       "text-halo-color": "white",
+                                       "text-halo-width": 1,
+                                       "text-halo-blur": 1
                                }
                        });
-                       map.addLayer({
-                               'id': 'guadec_poi_labels',
-                               'type': 'symbol',
-                               "minzoom": 12,
-                               'source': {
-                                       'type': 'geojson',
-                                       'data': points_geojson_props
-                               },
-                               'layout': label_layout,
-                               'paint': label_paint
-                       });
                };
 
-
+       /* SCRIPT */
        map.on('load', function() {
                /*Once map is loaded, get data from OSM to add as a new layer */
                // Render ways
-               console.log('fetching osm ways...')
+               console.log('fetching osm data...')
                fetch(overpass_url,{
                        method: "POST",
                        body:  `[out:xml][timeout:300];
-                                       (way(id:${osm_ways.join(',')});)->.a;
+                                       (
+                                               way(id:${osm_ways.join(',')});
+                                               node(id:${osm_nodes.join(',')});
+                                       )->.a;
                                        (.a; .a >;);out qt;`})
                        .then(response => response.text())
                        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
                        .then(function(data){
-                               console.log('loading ways...')
-                               load_ways(data);
-                               console.log('fetching osm nodes...')
-                                       fetch(overpass_url,{
-                                               method: "POST",
-                                               body:  `[out:xml]
-                                                               [timeout:300];
-                                                               (
-                                                               node(id:${osm_nodes.join(',')});
-                                                               )->.a;
-                                                               (.a; .a >;);
-                                                               out qt;`})
-                                               .then(response => response.text())
-                                               .then(str => (new window.DOMParser()).parseFromString(str, 
"text/xml"))
-                                               .then(function(data){
-                                                       console.log('loading nodes...')
-                                                       load_pois(data);
-                                               })
-                                               .catch(error => console.log("Error:", error));
+                               console.log('loading data...')
+                               load_osm_data(data);
                        })
                        .catch(error => console.log("Error:", error));
        });