Add mapillary button in the attribution

UI/BigComponents/Attribution.ts

@@ -7,7 +7,6 @@ import UserDetails from "../../Logic/Osm/OsmConnection";
 import Constants from "../../Models/Constants";
 import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
 import Loc from "../../Models/Loc";
-import LeafletMap from "../../Models/LeafletMap";
 import * as L from "leaflet"
 
 /**
@@ -35,7 +34,7 @@ export default class Attribution extends UIElement {
     }
 
     InnerRender(): string {
-        const location : Loc = this._location?.data;
+        const location: Loc = this._location?.data;
         const userDetails = this._userDetails?.data;
 
         const mapComplete = new Link(`Mapcomplete ${Constants.vNumber}`, 'https://github.com/pietervdvn/MapComplete', true);
@@ -45,15 +44,22 @@ export default class Attribution extends UIElement {
         const osmChaLink = `https://osmcha.org/?filters=%7B%22comment%22%3A%5B%7B%22label%22%3A%22%23${layoutId}%22%2C%22value%22%3A%22%23${layoutId}%22%7D%5D%2C%22date__gte%22%3A%5B%7B%22label%22%3A%222020-07-05%22%2C%22value%22%3A%222020-07-05%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22MapComplete%22%2C%22value%22%3A%22MapComplete%22%7D%5D%7D`
         const stats = new Link(Svg.statistics_img, osmChaLink, true)
         let editHere: (UIElement | string) = "";
+        let mapillary: UIElement = undefined;
         if (location !== undefined) {
             const idLink = `https://www.openstreetmap.org/edit?editor=id#map=${location.zoom}/${location.lat}/${location.lon}`
             editHere = new Link(Svg.pencil_img, idLink, true);
+
+            const mapillaryLink: string = `https://www.mapillary.com/app/?focus=map&lat=${location.lat}&lng=${location.lon}&z=${Math.max(location.zoom - 1, 1)}`;
+            mapillary = new Link(Svg.mapillary_black_img, mapillaryLink, true);
+
         }
+
+
         let editWithJosm: (UIElement | string) = ""
         if (location !== undefined &&
             this._leafletMap?.data !== undefined &&
-            userDetails.csCount >=  Constants.userJourney.tagsVisibleAndWikiLinked) {
+            userDetails.csCount >= Constants.userJourney.tagsVisibleAndWikiLinked) {
-            const bounds : any= this._leafletMap.data.getBounds();
+            const bounds: any = this._leafletMap.data.getBounds();
             const top = bounds.getNorth();
             const bottom = bounds.getSouth();
             const right = bounds.getEast();
@@ -62,7 +68,7 @@ export default class Attribution extends UIElement {
             const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`
             editWithJosm = new Link(Svg.josm_logo_img, josmLink, true);
         }
-        return new Combine([mapComplete, reportBug, stats, editHere, editWithJosm]).Render();
+        return new Combine([mapComplete, reportBug, stats, editHere, editWithJosm, mapillary]).Render();
     }
 
 

assets/svg/mapillary_black.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   fill="none"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="mapillary_black.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1039"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="7.375"
+     inkscape:cx="16"
+     inkscape:cy="16"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     fill="#fff"
+     fill-rule="evenodd"
+     d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16zm-24.44-.974c-.371-.201-.303-.725.166-.859.398-.113 3.627-1.196 4.605-1.524a.59.59 0 00.373-.369l1.57-4.603c.146-.43.678-.432.894-.015.024.046.325.593.731 1.331v.001c.896 1.629 2.302 4.185 2.372 4.34a.473.473 0 01-.194.617c-.133.083-.314.19-.469.28l-.269.16c-.237.148-.464.045-.573-.183-.065-.137-.39-.719-.713-1.299-.217-.389-.433-.776-.57-1.027-.17-.313-.682-.433-.854.072l-.566 1.66a.613.613 0 01-.376.373l-1.703.564c-.336.111-.5.626-.046.843.038.018.383.202.798.423h.001c.631.337 1.425.76 1.552.82.21.1.328.39.204.595-.168.28-.384.635-.462.75a.48.48 0 01-.626.149c-.223-.119-5.711-3.027-5.844-3.099zm7.378 3.9c.288.147 7.276 3.844 7.496 3.963.441.238.907-.222.668-.652-.041-.073-.507-.929-1.107-2.034l-.002-.004c-1.166-2.144-2.84-5.224-2.925-5.365-.128-.214-.442-.322-.678-.178-.232.14-.498.298-.648.374-.3.153-.338.383-.203.639.297.562 1.232 2.267 1.34 2.446.223.374-.276.801-.615.615-.054-.03-.408-.217-.834-.442-.697-.368-1.587-.839-1.684-.896-.157-.09-.435-.09-.626.218-.138.224-.308.502-.386.642-.155.274-.084.527.204.674z"
+     clip-rule="evenodd"
+     style="transition:all 0.20000000000000001s ease 0s;fill:#000000;fill-opacity:1"
+     id="path2" />
+</svg>