diff --git a/UI/BigComponents/Attribution.ts b/UI/BigComponents/Attribution.ts index dac7a0e..630ee57 100644 --- a/UI/BigComponents/Attribution.ts +++ b/UI/BigComponents/Attribution.ts @@ -7,14 +7,13 @@ 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" /** * The bottom right attribution panel in the leaflet map */ export default class Attribution extends UIElement { - + private readonly _location: UIEventSource; private readonly _layoutToUse: UIEventSource; private readonly _userDetails: UIEventSource; @@ -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) { - const bounds : any= this._leafletMap.data.getBounds(); + userDetails.csCount >= Constants.userJourney.tagsVisibleAndWikiLinked) { + 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(); } diff --git a/assets/svg/mapillary_black.svg b/assets/svg/mapillary_black.svg new file mode 100644 index 0000000..063a42f --- /dev/null +++ b/assets/svg/mapillary_black.svg @@ -0,0 +1,58 @@ + + + + + + image/svg+xml + + + + + + + +