Places: Add raster planet and hillshading tiles to Default map #4959

Signed-off-by: Michael Mayer <michael@photoprism.app>

.gitignore

@@ -27,6 +27,8 @@ venv
 .tmp
 .nv
 .eslintcache
+/pro
+/plus
 /tmp/
 /test/
 *-lock.json
@@ -49,10 +51,9 @@ frontend/coverage/
 /assets/nasnet
 /assets/nsfw
 /assets/static/build/
+/assets/static/maps/
 /assets/*net
 /assets/vision
-/pro
-/plus
 
 # Files created automatically by editors and/or operating systems:
 .DS_Store

frontend/src/component/map.vue

@@ -12,11 +12,19 @@ export default {
   props: {
     lat: {
       type: Number,
-      required: true,
+      default: 0.0,
     },
     lng: {
       type: Number,
-      required: true,
+      default: 0.0,
+    },
+    zoom: {
+      type: Number,
+      default: 9,
+    },
+    style: {
+      type: String,
+      default: "embedded",
     },
   },
   data() {
@@ -26,12 +34,13 @@ export default {
       position: [0.0, 0.0],
       options: {
         container: null,
-        // To test new styles, put the style file in /assets/static/geo
-        // and include it from there e.g. "/static/geo/embedded.json".
         // Styles can be edited/created with https://maplibre.org/maputnik/.
-        style: "https://cdn.photoprism.app/maps/embedded.json",
+        // To test new styles, put the style file in /assets/static/maps
+        // and include it from there e.g. "/static/maps/embedded.json":
+        // style: "/static/maps/embedded.json",
+        style: `https://cdn.photoprism.app/maps/${this.style}.json`,
         glyphs: `https://cdn.photoprism.app/maps/font/{fontstack}/{range}.pbf`,
-        zoom: 9,
+        zoom: this.zoom,
         interactive: true,
         attributionControl: false,
       },

frontend/src/page/places.vue

@@ -458,8 +458,8 @@ export default {
 
       let mapOptions = {
         container: this.$refs.map,
-        style: "https://api.maptiler.com/maps/" + this.style + "/style.json?key=" + mapKey,
-        glyphs: "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=" + mapKey,
+        style: `https://api.maptiler.com/maps/${this.style}/style.json?key=${mapKey}`,
+        glyphs: `https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=${mapKey}`,
         attributionControl: { compact: true },
         zoom: 0,
       };
@@ -467,8 +467,11 @@ export default {
       if (this.style === "default") {
         mapOptions = {
           container: this.$refs.map,
-          style: `https://cdn.photoprism.app/maps/${this.style}.json`,
+          // Styles can be edited/created with https://maplibre.org/maputnik/.
+          // To test new styles, put the style file in /assets/static/maps
+          // and include it from there e.g. "/static/maps/default.json":
           // style: `/static/maps/${this.style}.json`,
+          style: `https://cdn.photoprism.app/maps/${this.style}.json`,
           glyphs: `https://cdn.photoprism.app/maps/font/{fontstack}/{range}.pbf`,
           zoom: 0,
         };