Add self-hosted Streets layout

Caddyfile

@@ -18,5 +18,5 @@ log stdout
 errors stdout
 
 
-header / Content-Security-Policy "default-src 'self' ; media-src https://storage.theel0ja.info; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www1.theel0ja.info https://www0.theel0ja.info https://cdnjs.cloudflare.com https://cdn.theel0ja.info; style-src 'self' data: 'unsafe-inline' https://cdnjs.cloudflare.com https://getbootstrap.com https://cdn.theel0ja.info; img-src 'self' data: https://www0.theel0ja.info blob: https://cdn.rawgit.com; font-src data: ; connect-src https://sentry.io https://*.tiles.mapbox.com https://api.mapbox.com; child-src data: blob:; report-uri https://sentry.io/api/942255/csp-report/?sentry_key=87c404ea730a4a0cb596ca0caec20bbb;"
+# header / Content-Security-Policy "default-src 'self' ; media-src https://storage.theel0ja.info; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www1.theel0ja.info https://www0.theel0ja.info https://cdnjs.cloudflare.com https://cdn.theel0ja.info; style-src 'self' data: 'unsafe-inline' https://cdnjs.cloudflare.com https://getbootstrap.com https://cdn.theel0ja.info; img-src 'self' data: https://www0.theel0ja.info blob: https://cdn.rawgit.com; font-src data: ; connect-src https://sentry.io https://*.tiles.mapbox.com https://api.mapbox.com; child-src data: blob:; report-uri https://sentry.io/api/942255/csp-report/?sentry_key=87c404ea730a4a0cb596ca0caec20bbb;"
 header / X-Frame-Options "DENY"

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build: .
     #image: abiosoft/caddy:php
     ports:
-      - 172.19.5.1:30005:2015
+      - 30005:2015
     volumes:
       - ./Caddyfile:/etc/Caddyfile
       - ./src:/app/src

src/assets/js/templates/index.js

@@ -19,16 +19,32 @@ var inputs = layerList.getElementsByTagName('input');
 
 function switchLayer(layer) {
   var layerId = layer.target.id;
-  map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9');
+
+  if(layerId == "streets-alt") {
+    map.setStyle("https://tiles-conf.osm.theel0ja.info/config.php?tilejson=https://storage1.theel0ja.info/mapserver/planet.json&style=osm-bright");
+  } else {
+    map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9');
+  }
+
 
   if(layerId == "satellite-streets") {
-      // Remove active from Streets
+      // Remove active from Streets & Streets-Alt
       $( "#menu #streets-btn" ).removeClass("active");
+      $( "#menu #streets-alt-btn" ).removeClass("active");
+
       $( "#menu #satellite-streets-btn" ).addClass("active");
   } else if(layerId == "streets") {
-      // Remove active class from Satellite Streets
+      // Remove active class from Satellite Streets & Streets-Alt
       $( "#menu #satellite-streets-btn" ).removeClass("active");
+      $( "#menu #streets-alt-btn" ).removeClass("active");
+
       $( "#menu #streets-btn" ).addClass("active");
+  } else if(layerId == "streets-alt") {
+    // Remove active class from Satellite Streets & Streets
+    $( "#menu #streets-btn" ).removeClass("active");
+    $( "#menu #satellite-streets-btn" ).removeClass("active");
+
+    $( "#menu #streets-alt-btn" ).addClass("active");
   } else {
       throw "Error: Unknown layer";
   }

src/templates/index.html.twig

@@ -27,6 +27,8 @@
                     <input id="streets" type="radio" name="rtoggle" checked=""> Streets
                 </label><label class="btn btn-primary" id="satellite-streets-btn"><!-- TODO: Try to set them to different lines -->
                     <input id='satellite-streets' type='radio' name='rtoggle'> Satellite
+                </label><label class="btn btn-primary" id="streets-alt-btn"><!-- TODO: Try to set them to different lines -->
+                    <input id='streets-alt' type='radio' name='rtoggle'> Streets (2)
                 </label>
             </div>
         </div>