[guadec-web: 1/9] first version of the map

[Ismael Olea <olea src gnome org>]

commit 36a04261b2c58632a70fc8630be09bd88f8b82f8
Author: Jorge Sanz <xurxosanz gmail com>
Date:   Fri Jun 15 19:29:39 2018 +0200

    first version of the map

 content/pages/test-map-v2.md | 217 +++++++++++++++++++++++++++++++++++++++++++
 content/pages/test-mapo.md   | 215 ------------------------------------------
 2 files changed, 217 insertions(+), 215 deletions(-)
---
diff --git a/content/pages/test-map-v2.md b/content/pages/test-map-v2.md
new file mode 100644
index 0000000..077d2bd
--- /dev/null
+++ b/content/pages/test-map-v2.md
@@ -0,0 +1,217 @@
+Title: Test map v2
+Date: 20180615
+
+## OSM Map with MapboxGL
+
+<div id="map" style="width: 100%; height: 600px;"></div>
+
+<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>
+       #map {
+               margin: 0;
+               height: 100vh;
+               width: 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.421,36.823],
+               zoom   = 12,
+               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';  
+</script>
+
+<script>
+       /* 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>
\ No newline at end of file