[guadec-web] trying the new map system

[Ismael Olea <olea src gnome org>]

commit 85480cb6b8fc48e246aeb460bdc9ba73de46f6bf
Author: Ismael Olea <ismael olea org>
Date:   Thu Jun 14 13:16:46 2018 +0200

    trying the new map system

 content/pages/test-mapo.md | 215 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 215 insertions(+)
---
diff --git a/content/pages/test-mapo.md b/content/pages/test-mapo.md
new file mode 100644
index 0000000..6dfc64b
--- /dev/null
+++ b/content/pages/test-mapo.md
@@ -0,0 +1,215 @@
+Title: Test mapo
+Date: 20180219
+
+
+
+    <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>
+    <style>
+        html, body, #map {
+            margin: 0;
+            height: 100%;
+        }
+    </style>
+
+
+<script>
+    /* parameters */   
+    var 
+        /* positron is a light basemap style using OpenMapTiles vector tiles */
+        /* other styles 
+        OpenMapTiles https://openmaptiles.github.io/positron-gl-style/style-cdn.json
+        CARTO https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json
+        */
+        basemap_style = 'https://openmaptiles.github.io/positron-gl-style/style-cdn.json',
+        /* initial center and zoom level, you can use bboxfinder.com to find proper values */
+        center = [-2.46,36.83],
+        zoom   = 13,
+        osm_ways = [
+            27152910, // almeria railway
+            29220363, // almeria university
+            435775764, // Civitas
+            37923960, // airport
+            36406179, // UAL parking
+        ],
+        osm_nodes = [
+            4414057566, // la mala
+            4433529185 // hortensia
+            // bus stops:
+            2870058034, // 292
+            974730957, // 144
+        ],
+        main_color = '#4a86cf';
+    /* parameters */
+  
+  
+    /* Script */
+    var 
+        overpass_url = 'http://overpass-api.de/api/interpreter'
+        map = new mapboxgl.Map({
+            container: 'map', 
+            style: basemap_style,
+            center: center,
+            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
+            ,   maxx = maxy = -1000
+            polygon = polygon[0]
+            for (var i = 0; i < polygon.length; i++) {
+                var point = polygon[i]
+                var x = point[0]
+                var y = point[1]
+
+                if (x < minx) minx = x
+                else if (x > maxx) maxx = x
+                if (y < miny) miny = y
+                else if (y > maxy) maxy = y
+            }
+
+            return {
+                type: 'Point',
+                coordinates: [
+                minx + ((maxx - minx) / 2),
+                miny + ((maxy - miny) / 2)
+                ]
+            }
+        },
+        /* moves tags up to the main properties function */
+        tags_to_props = function(geojson){
+            geojson.features.forEach(function(feature){
+                tags = feature['properties']['tags'];
+                Object.assign(feature['properties'], tags);
+            })
+            return geojson
+        },
+        /* transforms OSM ways 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){
+                copy = JSON.parse(JSON.stringify(poly));
+                copy['geometry'] = polygon_center(copy.geometry.coordinates);
+                return copy
+            });
+            points_geojson_props = tags_to_props({
+                'type': 'FeatureCollection',
+                'features': points
+            });
+            map.addLayer({
+                'id': 'guadec_ways',
+                'type': 'circle',
+                'source': {
+                    'type': 'geojson',
+                    'data': points_geojson_props
+                },
+                'layout': {
+                },
+                'paint': {
+                    'circle-radius': {
+                        'base': 3,
+                        'stops': [[12, 5], [22, 180]]
+                    },
+                    'circle-color': main_color
+                }
+            });
+            map.addLayer({
+                'id': 'guadec_ways_labels',
+                'type': 'symbol',
+                "minzoom": 12,
+                'source': {
+                    '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': {},
+                'paint': {
+                    'circle-radius': {
+                        'base': 3,
+                        'stops': [[12, 5], [22, 180]]
+                    },
+                    'circle-color': main_color
+                }
+            });
+            map.addLayer({
+                'id': 'guadec_poi_labels',
+                'type': 'symbol',
+                "minzoom": 12,
+                'source': {
+                    'type': 'geojson',
+                    'data': points_geojson_props
+                },
+                'layout': label_layout,
+                'paint': label_paint
+            });
+        };
+
+
+    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...')
+        fetch(overpass_url,{
+            method: "POST",
+            body:  `[out:xml][timeout:300];
+                    (way(id:${osm_ways.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));
+            })
+            .catch(error => console.log("Error:", error));
+    });
+    // Agrega controles de navegación (zoom, rotación) al mapa:
+    map.addControl(new mapboxgl.NavigationControl());
+</script>