Implemented 'Combined' embed mode

app.py

@@ -37,6 +37,8 @@ def map_embed(mode):
     agency = db.session.query(Agency).filter(Agency.tag==agency_tag).one()
     if not mode or mode == "m":
         return render_template('map.html', agency=agency, config=app.config, embed=True)
+    elif mode == "c":
+        return render_template('combined.html', agency=agency, config=app.config, embed=True)
     elif mode == "p":
         return render_template('predictions.html', agency=agency, config=app.config, embed=True)
 

static/css/combined.css

+body {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+.combined:not(:first-child) {
+    border-left: 2px solid #ccc;
+}
+.combined.map,
+.combined.predictions {
+    margin: 0;
+    overflow: hidden;
+}
+.combined.map {
+    flex-basis: 20em;
+    flex-grow: 4;
+    flex-shrink: 1;
+}
+.combined.predictions {
+    flex-basis: 15em;
+    flex-shrink: 1;
+    flex-grow: 1;
+}

static/js/embed.js

@@ -71,7 +71,7 @@ BusMap.Embed = function(opts) {
         $("#embed-mode").on('change', function() {
             embedVars['mode'] = $(this).val();
             updateEmbedUrl();
-            if ($(this).val() == "m") {
+            if ($(this).val() == "m" || $(this).val() == "c") {
                 $("label[for=embed-popup]").show();
             } else {
                 $("label[for=embed-popup]").hide();

templates/combined.html

+{% extends "base.html" %}
+{% block title -%}
+        {% if agency.short_title %}{{ agency.short_title -}}
+        {% elif agency.title %}{{ agency.title }}{% endif %} Bus Map
+{%- endblock %}
+{% block head %}
+    {{ super() }}
+    <link href="bower/leaflet/dist/leaflet.css" rel="stylesheet"/>
+    <link href="bower/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet"/>
+    <link href="bower/Leaflet.label/dist/leaflet.label.css" rel="stylesheet"/>
+    <link href="static/css/map.css" rel="stylesheet" />
+    <link href="static/css/predictions.css" rel="stylesheet" />
+    <link href="static/css/combined.css" rel="stylesheet" />
+{% endblock %}
+{% block body %}
+    <div class="combined map" id="c-map">
+    </div>
+    <div class="combined predictions" id="c-predictions">
+    </div>
+    <script src="bower/leaflet/dist/leaflet.js"></script>
+    <script src="bower/Leaflet.label/dist/leaflet.label.js"></script>
+    <script src="bower/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
+    <script src="bower/leaflet-marker-rotate/leaflet.marker.rotate.js"></script>
+    <script src="bower/jquery/dist/jquery.min.js"></script>
+    <script src="static/js/map.js"></script>
+    <script src="static/js/predictions.js"></script>
+    <script>
+        var map = BusMap.Map({
+            {% if embed %}embed: true,{% endif %}
+            agency: {{ agency.tag|tojson|safe }},
+            mapElement: $("#c-map").get(0),
+            tileUrl: '{{ config['MAP_TILE_URL']|safe }}',
+            tileOptions: {
+                subdomains: {{ config['MAP_TILE_SUBDOMAINS']|tojson|safe }},
+                tileset: '{{ config['MAP_TILESET']|safe }}',
+                errorTileUrl: '{{ config['MAP_ERROR_TILE_URL']|safe }}',
+            },
+            bounds: [
+                [{{ (agency.lat_min - config['MAP_LAT_PADDING'])|round(5) }},
+                    {{ (agency.lon_min - config['MAP_LON_PADDING'])|round(5) }}],
+                [{{ (agency.lat_max + config['MAP_LAT_PADDING'])|round(5) }},
+                    {{ (agency.lon_max + config['MAP_LON_PADDING'])|round(5) }}]
+            ],
+            refresh: {
+                routes: 60,
+                vehicles: 5,
+            },
+            hashUpdate: false,
+            predictions: false,
+        });
+        var predictions = BusMap.Predictions({
+            agency: {{ agency.tag|tojson|safe }},
+            predictionsElement: $("#c-predictions").get(0),
+            refresh: {
+                routes: 60,
+                predictions: 10,
+            },
+            hashListen: false,
+        });
+    </script>
+{% endblock %}