Upgrade Mapbox GL JS, update the map style

package.json

@@ -44,7 +44,7 @@
     "hamburgers": "^1.1.3",
     "jwt-decode": "^2.2.0",
     "lodash.clonedeep": "^4.5.0",
-    "mapbox-gl": "^0.47.0",
+    "mapbox-gl": "^0.54.1",
     "ng-inline-svg": "^8.2.1",
     "ng-lazyload-image": "^5.1.2",
     "ngx-cookie-service": "^2.1.0",
@@ -63,7 +63,7 @@
     "@types/jasmine": "^2.8.12",
     "@types/jasminewd2": "^2.0.6",
     "@types/jwt-decode": "^2.2.1",
-    "@types/mapbox-gl": "^0.47.0",
+    "@types/mapbox-gl": "^0.54.1",
     "@types/node": "^6.14.2",
     "codelyzer": "^4.5.0",
     "jasmine-core": "~2.8.0",
@@ -86,4 +86,4 @@
     "typescript": "3.2.4",
     "webpack-bundle-analyzer": "^3.1.0"
   }
-}
\ No newline at end of file
+}

src/app/map/components/map.component.ts

@@ -109,12 +109,18 @@ export class MapComponent implements OnInit, OnDestroy {
 
     if (this.metadata) {
 
+      // Get the bounding box
+      const bounds = new mapboxgl.LngLatBounds(
+        [this.metadata.max_east, this.metadata.max_south, this.metadata.max_west, this.metadata.max_north],
+      );
+
       // Set the basic and default options
       const options = {
         container: 'map',
-        center: [4.85, 45.75],
+        center: [4.85, 45.75] as mapboxgl.LngLatLike,
         zoom: 12,
         maxZoom: 21,
+        bounds,
       };
 
       // Check if in the url we have map options

src/app/map/components/minimap-control.ts

@@ -26,7 +26,7 @@ export class Minimap {
     width: '300px',
     height: '170px',
     style: '',
-    center: [0, 0],
+    center: [0, 0] as mapboxgl.LngLatLike,
     zoom: 6,
     bounds: 'parent',
     classes: '',

src/app/map/services/map.service.ts

@@ -78,6 +78,7 @@ export class MapService {
 
     // Subscribe to the error observable and send a notification
     this._errorSubscription = errorObservable.subscribe((v) => {
+      console.log(v);
       this._notificationService.notify(
         new Notification({
           message: notificationMessages.geosource.mapError,
@@ -554,7 +555,7 @@ export class MapService {
               const orderedProperties = this._datasetDetailService.dataset.fields.list;
               featureCollection.features.forEach((feature) => {
                 const newDataPropertiesOrder = {};
-                orderedProperties.forEach((field) => { 
+                orderedProperties.forEach((field) => {
                   newDataPropertiesOrder[field] = feature.properties[field] ? feature.properties[field] : '';
                 });
                 feature.properties = newDataPropertiesOrder;

src/app/user/components/auth/login/login.component.html

@@ -75,7 +75,7 @@
                 <input class="is-checkradio is-small" id="exampleCheckbox" type="checkbox" name="exampleCheckbox"
                   [value] = "showPassword" 
                   (change)="showPassword = !showPassword">
-                <label for="exampleCheckbox">Afficher le mot de passe</label>
+                <label i18n="@@login.showPassword" for="exampleCheckbox">Display password</label>
               </p>
             </div>
             <div *ngIf="fieldIsInvalid('password')" class="form-incorrect-field-message">

src/app/user/components/auth/sign-up/sign-up.component.html

@@ -123,6 +123,15 @@
           <div class="field">
             <label class="label" for="password"><span i18n="@@signup.password">Password </span><span
                 class="required-field">*</span></label>
+            <div class="password-rule">
+              <span class="not-bold" i18n="@@signup.password.rule.intro">Your password must contain at least</span>: 
+              <span i18n="@@signup.password.rule.length">{{ passwordMinLength }} characters</span>
+              ,  <span i18n="@@signup.password.rule.special">one special character</span>, 
+              <span i18n="@@signup.password.rule.uppercase">one uppercased character</span>, 
+              <span i18n="@@signup.password.rule.lowercase">one lowercased character</span> 
+              <span class="not-bold" i18n="@@signup.password.rule.and"> and </span> 
+              <span i18n="@@signup.password.rule.number">one number</span>.
+            </div>
             <p class="control has-icons-right">
               <input id="password" class="input" type="password" formControlName="password"
                 [ngClass]="{'has-error': fieldIsInvalid('password'), 'is-valid': fieldIsValid('password')}">

src/app/user/components/auth/sign-up/sign-up.component.scss

@@ -27,7 +27,8 @@ h1 {
   top: unset;
 }
 
-.acceptMessagesInfo, .consent-text {
+.acceptMessagesInfo,
+.consent-text {
   font-size: $size-8;
   padding-left: 1.75rem;
 }
@@ -35,4 +36,13 @@ h1 {
 .consent-text {
   margin-bottom: 0.75rem;
   padding-left: 1.75rem;
-}
\ No newline at end of file
+}
+
+.password-rule {
+  font-size: 0.875rem;
+  font-style: italic;
+  margin-bottom: 0.5rem;
+  span:not(.not-bold) {
+    font-weight: 600;
+  }
+}

src/assets/mapbox-gl-styles/vector.json

@@ -20,13 +20,13 @@
       "attribution": "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
     }
   },
+  "sprite": "https://minio.alpha.grandlyon.com/mapbox-assets/mapbox-sprite",
   "glyphs": "https://openmaptiles.geo.data.gouv.fr/fonts/{fontstack}/{range}.pbf",
-  "layers": [
-    {
+  "layers": [{
       "id": "background",
       "type": "background",
       "paint": {
-        "background-color": "rgba(237, 238, 234, 1)"
+        "background-color": "#f1f3f8"
       }
     },
     {
@@ -55,44 +55,48 @@
         "fill-opacity": 0.7
       }
     },
-    {
-      "id": "landcover_grass",
+        {
+      "id": "landcover",
       "type": "fill",
       "source": "openmaptiles",
       "source-layer": "landcover",
       "filter": [
-        "==",
-        "class",
-        "grass"
+        "match",
+        ["get", "class"],
+        ["farmland", "wood", "grass"],
+        true,
+        false
       ],
       "paint": {
-        "fill-color": "rgba(203, 224, 181, 1)",
-        "fill-opacity": 1
+        "fill-color": "#C8E8B6"
       }
     },
     {
-      "id": "park",
+      "id": "landcover_grass",
       "type": "fill",
       "source": "openmaptiles",
-      "source-layer": "park",
+      "minzoom": 11,
+      "source-layer": "landcover",
+      "filter": [
+        "==",
+        "class",
+        "grass"
+      ],
       "paint": {
-        "fill-color": "rgba(192, 216, 151, 0.53)",
-        "fill-opacity": 1
+        "fill-pattern": "grass"
       }
     },
     {
       "id": "landcover_wood",
       "type": "fill",
+      "minzoom": 11,
       "source": "openmaptiles",
       "source-layer": "landcover",
-      "filter": [
-        "==",
-        "class",
-        "wood"
+      "filter": ["match", ["get", "class"],
+        ["wood"], true, false
       ],
       "paint": {
-        "fill-color": "rgba(203, 224, 181, 1)",
-        "fill-opacity": 1
+        "fill-pattern": "wood"
       }
     },
     {
@@ -106,7 +110,10 @@
         "Polygon"
       ],
       "paint": {
-        "fill-color": "rgba(195, 212, 230, 1)"
+        "fill-color": "#accce9",
+        "fill-outline-color": "hsla(209, 58%, 79%, 0.7)",
+        "fill-pattern": "water",
+        "fill-opacity": 1
       }
     },
     {
@@ -178,20 +185,42 @@
       }
     },
     {
+
       "id": "landuse",
       "type": "fill",
       "source": "openmaptiles",
       "source-layer": "landuse",
+      "minzoom": 5,
       "filter": [
-        "==",
-        "class",
-        "agriculture"
+        "match",
+        ["get", "class"],
+        ["airport", "hospital", "school"],
+        true,
+        false
       ],
-      "layout": {
-        "visibility": "visible"
-      },
+      "layout": {},
       "paint": {
-        "fill-color": "#eae0d0"
+        "fill-color": [
+          "match",
+          ["get", "class"],
+          ["airport"],
+          "#e0e4f0",
+          ["hospital"],
+          "#e0e4f0",
+          ["school"],
+          "#e0e4f0",
+          "hsla(0, 0%, 0%, 0)"
+        ],
+        "fill-opacity": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          5,
+          0,
+          6,
+          1
+        ],
+        "fill-outline-color": "hsl(0, 0%, 100%)"
       }
     },
     {
@@ -381,23 +410,25 @@
       "type": "fill",
       "source": "openmaptiles",
       "source-layer": "building",
+      "minzoom": 15,
+      "filter": [
+        "all",
+        ["!=", ["get", "type"], "building:part"],
+        ["==", ["get", "underground"], "false"]
+      ],
+      "layout": {},
       "paint": {
-        "fill-color": "rgba(234, 234, 229, 1)",
-        "fill-outline-color": "rgba(214, 214, 214, 1)",
-        "fill-opacity": {
-          "base": 1,
-          "stops": [
-            [
-              13,
-              0
-            ],
-            [
-              15,
-              1
-            ]
-          ]
-        },
-        "fill-antialias": true
+        "fill-color": "#e0e4f0",
+        "fill-opacity": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          13.5,
+          0,
+          14,
+          1
+        ],
+        "fill-outline-color": "#f1f3f8"
       }
     },
     {

src/i18n/messages.en.xlf

@@ -725,6 +725,10 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
         <source>Password is required.</source>
         <target>Password is required.</target>
       </trans-unit>
+      <trans-unit id="login.showPassword" datatype="html">
+        <source>Display password</source>
+        <target>Display password</target>
+      </trans-unit>
       <trans-unit id="login.signInBtn" datatype="html">
         <source>Sign In</source>
         <target>Sign In</target>
@@ -892,6 +896,34 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
         <source>Your password must not contain obvious words.</source>
         <target>Your password must not contain obvious words.</target>
       </trans-unit>
+      <trans-unit id="signup.password.rule.intro" datatype="html">
+        <source>Your password must contain at least</source>
+        <target>Your password must contain at least</target>
+      </trans-unit>
+       <trans-unit id="signup.password.rule.and" datatype="html">
+        <source> and </source>
+        <target> and </target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.length" datatype="html">
+        <source><x id="INTERPOLATION"/> characters</source>
+        <target><x id="INTERPOLATION"/> characters</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.special" datatype="html">
+        <source>one special character</source>
+        <target>one special character</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.uppercase" datatype="html">
+        <source>one uppercased character</source>
+        <target>one uppercased character</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.lowercase" datatype="html">
+        <source>one lowercased character</source>
+        <target>one lowercased character</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.number" datatype="html">
+        <source>one number</source>
+        <target>one number</target>
+      </trans-unit>
       <trans-unit id="signup.passwordConfirmation" datatype="html">
         <source>Password confirmation</source>
         <target>Password confirmation</target>

src/i18n/messages.fr.xlf

@@ -734,6 +734,10 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
         <source>Password is required.</source>
         <target>Veuillez renseigner votre mot de passe.</target>
       </trans-unit>
+      <trans-unit id="login.showPassword" datatype="html">
+        <source>Display password</source>
+        <target>Afficher le mot de passe</target>
+      </trans-unit>
       <trans-unit id="login.signInBtn" datatype="html">
         <source>Sign In</source>
         <target>Connexion</target>
@@ -901,6 +905,34 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
         <source>Your password must not contain obvious words.</source>
         <target>Votre mot de passe ne doit pas contenir de mots évidents.</target>
       </trans-unit>
+      <trans-unit id="signup.password.rule.intro" datatype="html">
+        <source>Your password must contain at least</source>
+        <target>Votre mot de passe doit contenir au minimum</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.and" datatype="html">
+        <source> and </source>
+        <target> et </target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.length" datatype="html">
+        <source><x id="INTERPOLATION"/> characters</source>
+        <target><x id="INTERPOLATION"/> caractères</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.special" datatype="html">
+        <source>one special character</source>
+        <target>un caractère spécial</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.uppercase" datatype="html">
+        <source>one uppercased character</source>
+        <target>un caractère en majuscule</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.lowercase" datatype="html">
+        <source>one lowercased character</source>
+        <target>un caractère en minuscule</target>
+      </trans-unit>
+      <trans-unit id="signup.password.rule.number" datatype="html">
+        <source>one number</source>
+        <target>un chiffre</target>
+      </trans-unit>
       <trans-unit id="signup.passwordConfirmation" datatype="html">
         <source>Password confirmation</source>
         <target>Confirmer le mot de passe</target>