- Amend walk start location using map pin

- First leaflet commit which includes ngx-leaflet dependency
- New functionality allows start point to be edited by dragging pin on map
- Lat/Long, grid reference, postcode and location updated and saved on walk
- Walk Edit Maps view can be toggled between Pin Location View and Google Maps
- Walk View can be toggled between Pin Location View and Google Maps
- Walk start/end location now standardised to fall in line with Ramblers data structure
- Data migration performed automatically on detection of walks that are in the old format
- trigger workflow for pre-main branch
- Includes workaround for markdown not rendering on some components - documented in jfcere/ngx-markdown#555

.github/workflows/build-push-and-deploy-ngx-ramblers-docker-image.yml

@@ -2,7 +2,7 @@ name: Deploy and Build Docker Image and Deploy to Fly.io
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "pre-main" ]
   pull_request:
     branches: [ "main" ]
 

Dockerfile

@@ -25,7 +25,7 @@ COPY projects/ngx-ramblers /usr/src/app/projects/ngx-ramblers
 RUN npm install
 
 # Build the Angular application using the locally installed Angular CLI
-RUN npx ng build --project ngx-ramblers --build-optimizer --progress --configuration production
+RUN npx ng build --project ngx-ramblers --progress --configuration production
 
 # Copy the server application code to the working directory
 WORKDIR /usr/src/app/server

angular.json

@@ -21,7 +21,12 @@
           "builder": "@angular-devkit/build-angular:application",
           "options": {
             "allowedCommonJsDependencies": [
-              "lodash"
+              "@yaireo/tagify",
+              "html2canvas",
+              "leaflet",
+              "lodash",
+              "moment-timezone",
+              "mongoose"
             ],
             "outputPath": {
               "base": "dist/ngx-ramblers"
@@ -38,10 +43,21 @@
                 "input": "projects/ngx-ramblers/src/app/assets",
                 "glob": "**/**/*.*",
                 "output": "/assets"
+              },
+              {
+                "glob": "*.png",
+                "input": "node_modules/leaflet/dist/images",
+                "output": "/media/assets/images"
+              },
+              {
+                "glob": "*.png",
+                "input": "node_modules/leaflet/dist/images",
+                "output": "/assets/images"
               }
             ],
             "styles": [
-              "projects/ngx-ramblers/src/app/assets/styles/styles.sass"
+              "projects/ngx-ramblers/src/app/assets/styles/styles.sass",
+              "node_modules/leaflet/dist/leaflet.css"
             ],
             "scripts": [
               "./node_modules/jquery/dist/jquery.slim.min.js",
@@ -56,12 +72,12 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "6mb"
+                  "maximumError": "8mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kb",
-                  "maximumError": "6mb"
+                  "maximumError": "8mb"
                 }
               ],
               "fileReplacements": [

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "analyze": "webpack-bundle-analyzer dist/ngx-ramblers/stats-es2015.json",
     "build:stats": "ng build --project ngx-ramblers --configuration production --statsJson=true",
-    "build": "ng build --project ngx-ramblers --build-optimizer --progress --configuration production",
+    "build": "ng build --project ngx-ramblers --progress --configuration production",
     "clean": "rm -rf node_modules && rm -rf server/node_modules",
     "reinstall": "npm run clean && npm install && npm run postbuild",
     "e2e": "ng e2e",
@@ -31,6 +31,7 @@
     "@angular/platform-browser": "18.2.12",
     "@angular/platform-browser-dynamic": "18.2.12",
     "@angular/router": "18.2.12",
+    "@asymmetrik/ngx-leaflet": "18.0.1",
     "@fortawesome/angular-fontawesome": "0.10.2",
     "@fortawesome/fontawesome-free": "6.1.1",
     "@fortawesome/fontawesome-svg-core": "6.1.0",
@@ -48,6 +49,7 @@
     "js-yaml": "3.13.1",
     "json2csv": "4.5.4",
     "jsonc-parser": "3.3.1",
+    "leaflet": "1.9.4",
     "lodash-es": "4.17.21",
     "marked": "12.0.0",
     "matchdep": "2.0.0",
@@ -81,10 +83,12 @@
     "@angular/language-service": "18.2.12",
     "@types/jasmine": "5.1.1",
     "@types/jasminewd2": "2.0.12",
+    "@types/leaflet": "1.9.14",
     "@types/lodash-es": "4.17.3",
     "@types/marked": "4.3.2",
     "@types/ws": "8.5.4",
     "codelyzer": "6.0.1",
+    "file-loader": "6.2.0",
     "jasmine-core": "3.5.0",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "6.3.2",

projects/ngx-ramblers/src/app/assets/styles/legacy.sass

@@ -103,7 +103,7 @@ audio[controls], canvas, video
   border-radius: 10px
   margin: 0px 20px 3px 0px
   width: 100%
-  height: 300px
+  height: 400px
 
 .map-thumbnail-image
   border-radius: 10px