Merge pull request #281 from dhmit/update-attributions

Add more attributions - Adds Stamen link to maps - Adds French department and Stamen attribution to the About page - Footer no longer blocks attributions on small pages
dhmit · Jun 27, 2024 · cb77add · cb77add
2 parents 9736535 + ed69f6c
commit cb77add
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 8 deletions.
diff --git a/backend/app/translation_db.py b/backend/app/translation_db.py
@@ -30,6 +30,7 @@ def translate_tag(tag, default=None):
         "photosAvailable": _("Photos available"),
         "mapSquare": _("Map Square"),
         "photos": _("photos"),
+        "stamenAttrib": _("Map tiles by Stamen Design, under CC BY 4.0. Data by OpenStreetMap, under ODbL."),
         "objectTags": {
             "person": _("person"),
             "bicycle": _("bicycle"),
@@ -147,7 +148,8 @@ def translate_tag(tag, default=None):
         "context2": _(" The project This was Paris in 1970 provides tools to explore the rich archive: a <link1>map</link1> to see the photos square by square; an <link2>object detector</link2> to search for photos of many objects from people to cats, cars to strollers; a similar photo viewer to identify photos by composition rather than subject; and <link3>articles</link3> providing context and analysis."),
         "teamHeader": _("The Team"),
         "team1": _("This is Paris in 1970 was created in MIT’s Digital Humanities Lab as a collaboration between DH Fellow <link1>Prof. Catherine Clark</link1>, <link2>four dozen undergraduate research associates</link2>, and <link3>the instructional staff</link3> of the DH Lab. Justice Vidal built out the first version of the site, and Nina Li spearheaded the design work."),
-        "team2": _("The <link1>Bibliothèque historique de la Ville de Paris</link1> holds the contest photographs. Its photo department made this project possible."),
+        "team2": _("The <link1>Bibliothèque historique de la Ville de Paris</link1> holds the contest photographs. Its photo department and funding from MIT's <link2>French</link2> Initiatives Endowment Fund made this project possible."),
+        "stamenAttrib": _("Map tiles by <stamenLink>Stamen Design</stamenLink>, under <ccLink>CC BY 4.0</ccLink>. Data by <osmLink>OpenStreetMap</osmLink>, under <odblLink>ODbL</odblLink>."),
     },
     "Explore": {
         "rangeError": _('Desired page out of range'),

diff --git a/frontend/components/ParisMap.js b/frontend/components/ParisMap.js
@@ -1,5 +1,4 @@
 import React from "react";
-
 import * as PropTypes from "prop-types";
 import {
     MapContainer,
@@ -18,7 +17,7 @@ export const MAPSQUARE_HEIGHT = 0.0022358;
 export const DEFAULT_MAP_CENTER_LAT = 48.858859;
 export const DEFAULT_MAP_CENTER_LNG = 2.3470599;
 
-export class ParisMap extends React.Component {
+class ParisMap extends React.Component {
     constructor(props) {
         super(props);
 
@@ -53,6 +52,13 @@ export class ParisMap extends React.Component {
         this.setState({visibleLayers: newVisibleLayers});
     }
 
+    getTranslation(translationKey) {
+        if (!this.props.t) {
+            return translationKey;
+        }
+        return this.props.t(translationKey);
+    }
+
     render() {
         // Sorts the map squares by number of photos (ascending order)
         return (
@@ -97,6 +103,15 @@ export class ParisMap extends React.Component {
                             : <></>;
                     })}
                 </MapContainer>
+                <div className="stamen-attrib">
+                    <a
+                        href="https://maps.stamen.com/#toner/"
+                        data-toggle="tooltip"
+                        title={this.getTranslation("global.stamenAttrib")}
+                    >
+                        Stamen Maps
+                    </a>
+                </div>
             </div>
         );
     }
@@ -111,7 +126,8 @@ ParisMap.propTypes = {
     layers: PropTypes.object,
     singleLayer: PropTypes.bool,
     layerSelectVisible: PropTypes.bool,
-    visibleLayers: PropTypes.array
+    visibleLayers: PropTypes.array,
+    t: PropTypes.func
 };
 
 export default ParisMap;
diff --git a/frontend/pages/About.jsx b/frontend/pages/About.jsx
@@ -279,7 +279,17 @@ class BaseAbout extends React.Component {
                         <p><Trans
                             i18nKey='About.team2'
                             components={{
-                                link1: <Embed href="https://www.paris.fr/lieux/bibliotheque-historique-de-la-ville-de-paris-bhvp-16" title="Library link"/>
+                                link1: <Embed href="https://www.paris.fr/lieux/bibliotheque-historique-de-la-ville-de-paris-bhvp-16" title="Library link"/>,
+                                link2: <Embed href="https://www.mitfrench.com/" title="MIT French"/>
+                            }}
+                        /></p>
+                        <p><Trans
+                            i18nKey='About.stamenAttrib'
+                            components={{
+                                stamenLink: <Embed href="https://stamen.com/" title="Library link"/>,
+                                ccLink: <Embed href="https://creativecommons.org/licenses/by/4.0/" title="MIT French"/>,
+                                osmLink: <Embed href="https://www.openstreetmap.org" title="Open Street Map"/>,
+                                odblLink: <Embed href="https://www.openstreetmap.org/copyright" title="ODbL"/>
                             }}
                         /></p>
                     </Row>

diff --git a/frontend/pages/MapPageView.js b/frontend/pages/MapPageView.js
@@ -249,6 +249,7 @@ class BaseMapPage extends MapSquareViewer {
                                 visibleLayers={Object.keys(mapLayers)}
                                 layerSelectVisible={true}
                                 scrollWheelZoom={isLgViewportUp}
+                                t={this.props.t}
                             />
                         </Col>
                         <Col md={12} lg={5} className="m-0 p-0 min-vh-100">

diff --git a/frontend/pages/PhotoView.js b/frontend/pages/PhotoView.js
@@ -118,7 +118,7 @@ class BasePhotoView extends PhotoViewer {
 
     render() {
         if (this.state.loading) {
-            return (<LoadingPage/>);
+            return <LoadingPage/>;
         }
         if (!this.state.photoData) {
             return (<h1><Trans
@@ -312,6 +312,7 @@ class BasePhotoView extends PhotoViewer {
                         lat={squareCoords.lat - MAPSQUARE_HEIGHT / 2}
                         lng={squareCoords.lng - MAPSQUARE_WIDTH / 2}
                         zoom={15}
+                        t={this.props.t}
                         layers={{
                             mapSquare: <Rectangle
                                 className="current-map-square"

diff --git a/frontend/pages/PhotographerView.js b/frontend/pages/PhotographerView.js
@@ -103,6 +103,7 @@ class BasePhotographerView extends PhotoViewer {
                         lat={squareCoords.lat - MAPSQUARE_HEIGHT / 2}
                         lng={squareCoords.lng - MAPSQUARE_WIDTH / 2}
                         zoom={17}
+                        t={this.props.t}
                         layers={{
                             "Map Square": <Rectangle
                                 className="current-map-square"

diff --git a/frontend/pages/TagView.js b/frontend/pages/TagView.js
@@ -175,6 +175,7 @@ class BaseTagView extends Mix([PhotoViewer, MapSquareViewer]) {
                         layers={mapLayers}
                         visibleLayers={Object.keys(mapLayers)} 
                         layerSelectVisible={true}
+                        t={this.props.t}
                     />
                 </div>
             </div>

diff --git a/frontend/scss/about.scss b/frontend/scss/about.scss
@@ -1,5 +1,6 @@
 #aboutPage {
     margin-top: 1rem;
+    margin-bottom: 80px;
 
     p {
         background-color: white;

diff --git a/frontend/scss/clusterView.scss b/frontend/scss/clusterView.scss
@@ -9,8 +9,6 @@
     justify-content: space-between;
 }
 
-$footer-height: 150px;
-
 .cluster-page {
     padding: $header-height 25px $footer-height;
 }

diff --git a/frontend/scss/parisMap.scss b/frontend/scss/parisMap.scss
@@ -1 +1,17 @@
+.stamen-attrib {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.60);
+    z-index: 999;
+    padding: 0.6em;
+    left: 0em;
+    top: 0em;
+    color: $color-white;
+    text-align: left;
+    line-height: 0px;
+    font-size: 12px;
+    font-family: $font-family-sans-serif;
 
+    a {
+        color: white;
+    }
+}
diff --git a/frontend/scss/styles.scss b/frontend/scss/styles.scss
@@ -40,6 +40,7 @@ $primary-red: #FF6C6C;
 @import "./search";
 @import "./tags";
 @import "./titleDecorator";
+@import "./parisMap.scss";
 
 // NOTE(ryaan):
 // This is for stuff that I haven't figured out where it belongs