Merge pull request #4499 from openstreetmap/openstreetcam

OpenStreetCam Support!

css/60_photos.css

@@ -0,0 +1,199 @@
+/* photo viewer div */
+#photoviewer {
+    position: absolute;
+    bottom: 30px;
+    width: 330px;
+    height: 250px;
+    padding: 5px;
+    background-color: #fff;
+}
+
+#photoviewer button.thumb-hide {
+    border-radius: 0;
+    padding: 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 500;
+}
+
+.photo-wrapper,
+.photo-wrapper img {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.viewfield-group {
+    pointer-events: visible;
+    cursor: pointer;
+}
+
+.viewfield-group * {
+    stroke-width: 1;
+    stroke: #444;
+    z-index: 50;
+}
+
+.viewfield-group.selected * {
+    stroke-width: 2;
+    stroke: #222;
+    fill: #ff5800 !important;
+    z-index: 60;
+}
+
+.viewfield-group:hover * {
+    stroke-width: 1;
+    stroke: #333;
+    fill: #ff9900 !important;
+    z-index: 70;
+}
+
+.viewfield-group:hover path.viewfield,
+.viewfield-group.selected path.viewfield,
+.viewfield-group path.viewfield {
+    stroke-width: 0;
+    fill-opacity: 0.6;
+}
+
+.sequence {
+    stroke-width: 2;
+    fill: none;
+}
+
+
+/* Mapillary Image Layer */
+.layer-mapillary-images {
+    pointer-events: none;
+}
+
+.layer-mapillary-images .viewfield-group * {
+    fill: #55ff22;
+}
+
+.layer-mapillary-images .sequence {
+    stroke: #55ff22;
+}
+
+
+/* Mapillary Sign Layer */
+.layer-mapillary-signs {
+    pointer-events: none;
+}
+
+.layer-mapillary-signs .icon-sign .icon-sign-body {
+    min-width: 20px;
+    height: 24px;
+    width: 24px;
+    outline: 2px solid transparent;
+    pointer-events: visible;
+    cursor: pointer; /* Opera */
+    cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
+    z-index: 70;
+    overflow: visible;
+}
+
+.layer-mapillary-signs .icon-sign:hover .icon-sign-body {
+    outline: 2px solid rgba(255,198,0,0.8);
+    z-index: 80;
+}
+
+.layer-mapillary-signs .icon-sign.selected .icon-sign-body {
+    outline: 2px solid rgba(255,0,0,0.8);
+    z-index: 80;
+}
+
+
+/* OpenStreetCam Image Layer */
+.layer-openstreetcam-images {
+    pointer-events: none;
+}
+
+.layer-openstreetcam-images .viewfield-group * {
+    fill: #77ddff;
+}
+
+.layer-openstreetcam-images .sequence {
+    stroke: #77ddff;
+}
+
+
+/* Mapillary viewer */
+#mly .domRenderer .TagSymbol {
+    font-size: 10px;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding: 0 4px;
+    border-radius: 4px;
+    top: -25px;
+}
+
+#mly .domRenderer .Attribution {
+    width: 100%;
+    font-size: 10px;
+    text-align: right;
+}
+
+
+/* OpenStreetCam viewer */
+.osc-wrapper {
+    position: relative;
+    background-color: #000;
+    background-image: url(img/loader-black.gif);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.osc-wrapper .osc-attribution {
+    width: 100%;
+    font-size: 10px;
+    text-align: right;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 4px 2px;
+    z-index: 10;
+}
+
+.osc-attribution a,
+.osc-attribution a:visited,
+.osc-attribution span {
+    padding: 4px 2px;
+    color: #fff;
+}
+.osc-attribution a:active,
+.osc-attribution a:hover {
+    color: #77ddff;
+}
+
+.osc-controls-wrap {
+    text-align: center;
+    position: absolute;
+    top: 10px;
+    width: 100%;
+    z-index: 10;
+}
+
+.osc-controls {
+    display: inline-block;
+    z-index: 10;
+}
+
+.osc-controls button {
+    height: 18px;
+    width: 18px;
+    background: rgba(0,0,0,0.65);
+    color: #eee;
+    border-radius: 0;
+}
+.osc-controls button:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+.osc-controls button:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+.osc-controls button:hover,
+.osc-controls button:active,
+.osc-controls button:focus {
+    background: rgba(0,0,0,0.85);
+    color: #fff;
+}

data/core.yaml

@@ -546,6 +546,11 @@ en:
     title: "Traffic Sign Overlay (Mapillary)"
   mapillary:
     view_on_mapillary: "View this image on Mapillary"
+  openstreetcam_images:
+    tooltip: "Street-level photos from OpenStreetCam"
+    title: "Photo Overlay (OpenStreetCam)"
+  openstreetcam:
+    view_on_openstreetcam: "View this image on OpenStreetCam"
   help:
     title: "Help"
     key: H

dist/locales/en.json

@@ -670,6 +670,13 @@
         "mapillary": {
             "view_on_mapillary": "View this image on Mapillary"
         },
+        "openstreetcam_images": {
+            "tooltip": "Street-level photos from OpenStreetCam",
+            "title": "Photo Overlay (OpenStreetCam)"
+        },
+        "openstreetcam": {
+            "view_on_openstreetcam": "View this image on OpenStreetCam"
+        },
         "help": {
             "title": "Help",
             "key": "H",

modules/renderer/background.js

@@ -104,6 +104,11 @@ export function rendererBackground(context) {
             imageryUsed.push('Mapillary Signs');
         }
 
+        var openstreetcam_images = context.layers().layer('openstreetcam-images');
+        if (openstreetcam_images && openstreetcam_images.enabled()) {
+            imageryUsed.push('OpenStreetCam Images');
+        }
+
         context.history().imageryUsed(imageryUsed);
     };
 

modules/services/index.js

@@ -1,13 +1,15 @@
 import serviceMapillary from './mapillary';
 import serviceNominatim from './nominatim';
+import serviceOpenstreetcam from './openstreetcam';
 import serviceOsm from './osm';
 import serviceTaginfo from './taginfo';
 import serviceWikidata from './wikidata';
 import serviceWikipedia from './wikipedia';
 
 export var services = {
-    mapillary: serviceMapillary,
     geocoder: serviceNominatim,
+    mapillary: serviceMapillary,
+    openstreetcam: serviceOpenstreetcam,
     osm: serviceOsm,
     taginfo: serviceTaginfo,
     wikidata: serviceWikidata,
@@ -17,6 +19,7 @@ export var services = {
 export {
     serviceMapillary,
     serviceNominatim,
+    serviceOpenstreetcam,
     serviceOsm,
     serviceTaginfo,
     serviceWikidata,