belgiumuwh iframe map first try (#95)

For #93 add an iframe map. So far in the same style as the hockey tourist map.
TomGoBravo · Sep 20, 2023 · f0f13eb · f0f13eb
1 parent aebfc27
commit f0f13eb
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 0 deletions.
diff --git a/tourist/render_factory.py b/tourist/render_factory.py
@@ -3,11 +3,15 @@
 import enum
 import io
 import itertools
+import logging
 from collections import defaultdict
 from typing import List, Mapping
 from typing import Type
 from typing import Union
 
+from more_itertools import one
+from shapely.geometry import mapping as shapely_mapping
+
 from sqlalchemy.util import IdentitySet
 
 import attrs
@@ -26,6 +30,7 @@ class RenderName(enum.Enum):
     PLACE_NAMES_WORLD = "/place_names_world"
     CSV_ALL = "/csv"
     POOLS_GEOJSON = "/pools.geojson"
+    BE_GEOJSON = "/be.geojson"
     PROBLEMS = "/problems_list"
 
 
@@ -191,6 +196,26 @@ def _build_geojson_feature_collection(all_places, all_pools):
     return geojson_feature_collection
 
 
+def _build_be_geojson_feature_collection(be_place: tstore.Place):
+    """Returns a GeoJSON FeatureCollection especially for belgiumuwh.be"""
+    geojson_features = []
+    for town in be_place.child_places:
+        polygon = to_shape(town.region)
+        clubs = list(town.child_clubs)
+        if len(clubs) == 1:
+            club = one(clubs)
+            geojson_features.append({
+                'type': 'Feature',
+                'properties': {'title': club.name},
+                'geometry': shapely_mapping(polygon.centroid),
+            })
+        else:
+            # TODO(TomGoBravo): Log this to something like sentry so it isn't buried in a log file.
+            logging.warning(f"Town {town.name} does not have one club")
+    geojson_feature_collection = geojson.FeatureCollection(geojson_features)
+    return geojson_feature_collection
+
+
 @attrs.frozen(order=True)
 class StatusDateClub:
     status_date: datetime.date = attrs.field(order=True)
@@ -263,6 +288,12 @@ def get_all(cls):
     yield tstore.RenderCache(name=RenderName.POOLS_GEOJSON.value,
                              value_str=geojson.dumps(geojson_feature_collection))
 
+    be_place = tstore.Place.query.filter_by(short_name='be').first()
+    be_geojson_feature_collection = _build_be_geojson_feature_collection(be_place)
+
+    yield tstore.RenderCache(name=RenderName.BE_GEOJSON.value,
+                             value_str=geojson.dumps(be_geojson_feature_collection))
+
     si = io.StringIO()
     cw = csv.DictWriter(si, extrasaction='ignore',
                         fieldnames=['type', 'id', 'short_name', 'name', 'parent_short_name',

diff --git a/tourist/routes.py b/tourist/routes.py
@@ -36,6 +36,11 @@ def home_view_func():
     return render_template("home.html", world=render_world, mapbox_access_token=mapbox_access_token())
 
 
+@tourist_bp.route("/place_map_iframe_be.html")
+def place_map_be():
+    return render_template("place_map_iframe_be.html", mapbox_access_token=mapbox_access_token())
+
+
 @tourist_bp.route("/place/<string:short_name>")
 def place_short_name(short_name):
     if short_name == 'world':
@@ -50,6 +55,11 @@ def data_all_geojson():
     return render_factory.get_string(render_factory.RenderName.POOLS_GEOJSON)
 
 
+@tourist_bp.route("/data/place/be.geojson")
+def data_be_geojson():
+    return render_factory.get_string(render_factory.RenderName.BE_GEOJSON)
+
+
 @tourist_bp.route("/csv")
 def csv_dump():
     csv_str = render_factory.get_string(render_factory.RenderName.CSV_ALL)

diff --git a/tourist/templates/place_map_iframe_be.html b/tourist/templates/place_map_iframe_be.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Clubs in Belgium - Infogram</title>
+<script src='//api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
+<link href='//api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
+<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
+<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
+</head>
+<body>
+
+<div id='map' style="height: 800px; width: 100%" ></div>
+
+
+<script>
+mapboxgl.accessToken = '{{ mapbox_access_token }}';
+
+
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/light-v9',
+});
+
+map.on('load', function() {
+  var sw = new mapboxgl.LngLat(2.8, 49.3846);
+  var ne = new mapboxgl.LngLat(6.1, 51.6242);
+  var bounds = new mapboxgl.LngLatBounds(sw, ne);
+  var camera = map.cameraForBounds(bounds);
+  map.jumpTo(camera);
+
+  map.loadImage('/static/crosssticks60.png', function(error, image) {
+    if (error) throw error;
+    map.addImage('crosssticks', image);
+    map.addLayer({
+      'id': 'placegeojson',
+      'source': {
+        'type': 'geojson',
+        'data': '/tourist/data/place/be.geojson',
+      },
+      'type': 'symbol',
+      'layout': {
+        'icon-image': 'crosssticks',
+        'icon-padding': 0,
+        'icon-size': 0.5,
+        'icon-allow-overlap':true,
+        'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+        'text-field': '{title}',
+        'text-optional': false,
+        'text-allow-overlap': true,
+        'text-offset': [0, 0.6],
+        'text-anchor': 'top'
+      }
+    });
+  });
+});
+</script>
+
+</body>