Merge pull request #97 from haiafara/add-fullscreen-button

Fullscreen button & Map.vue ESLint fixes
haiafara · May 27, 2019 · a6ccafa · a6ccafa
2 parents 1e6928c + 8034ed7
commit a6ccafa
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 37 deletions.
diff --git a/app/javascript/Map.vue b/app/javascript/Map.vue
@@ -3,9 +3,11 @@
 </template>
 
 <script>
-  import { eventBus } from 'packs/haiafara'
-  import L from 'leaflet'
-  import 'leaflet/dist/leaflet.css'
+  import { eventBus } from "packs/haiafara";
+  import L from "leaflet";
+  import "leaflet/dist/leaflet.css";
+  import LF from "leaflet.fullscreen";
+  import "leaflet.fullscreen/Control.FullScreen.css";
 
   export default {
     data() {
@@ -15,63 +17,63 @@
       }
     },
     created() {
-      eventBus.$on('mapInvalidateSize', () => {
-        this.map.invalidateSize(true)
+      eventBus.$on("mapInvalidateSize", () => {
+        this.map.invalidateSize(true);
       })
-      eventBus.$on('mapSetView', (coordinates, zoom) => {
-        this.map.setView(coordinates, zoom)
+      eventBus.$on("mapSetView", (coordinates, zoom) => {
+        this.map.setView(coordinates, zoom);
       })
-      eventBus.$on('mapFitBounds', (bounds) => {
-        this.map.fitBounds(bounds)
+      eventBus.$on("mapFitBounds", (bounds) => {
+        this.map.fitBounds(bounds);
       })
-      eventBus.$on('mapAddGeoJSON', (type, id, name, shape) => {
-        this.geoJSONLayer.addData({ type: 'Feature', id: id, properties: { type: type, name: name }, geometry: shape })
+      eventBus.$on("mapAddGeoJSON", (type, id, name, geometry) => {
+        this.geoJSONLayer.addData({ type: "Feature", properties: { name, type }, id, geometry });
       })
-      eventBus.$on('mapClearGeoJSONLayer', () => {
-        this.geoJSONLayer.clearLayers()
+      eventBus.$on("mapClearGeoJSONLayer", () => {
+        this.geoJSONLayer.clearLayers();
       })
     },
     mounted() {
-      var customControl = L.Control.extend({
+      var CustomControl = L.Control.extend({
         options: {
-        position: 'topright'
+          position: "topright"
         },
-        onAdd: function (map) {
-          var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom')
+        onAdd(map) {
+          var container = L.DomUtil.create("div", "leaflet-bar leaflet-control leaflet-control-custom");
 
-          container.style.backgroundColor = 'white'
-          container.style.width = '40px'
-          container.style.height = '30px'
-          container.style.padding = '5px'
-          container.style.cursor = 'pointer'
-          container.style.textAlign = 'center'
-          container.innerHTML = 'Info'
+          container.style.backgroundColor = "white";
+          container.style.width = "40px";
+          container.style.height = "30px";
+          container.style.padding = "5px";
+          container.style.cursor = "pointer";
+          container.style.textAlign = "center";
+          container.innerHTML = "Info";
 
           container.onclick = function() {
-            eventBus.$emit('toggleInfoPanel')
-          }
+            eventBus.$emit("toggleInfoPanel");
+          };
 
           return container;
         }
       });
-      this.map = L.map('map', { maxZoom: 20, trackResize: true })
+      this.map = L.map("map", { fullscreenControl: true, maxZoom: 20, trackResize: true });
       var tileLayer = L.tileLayer("//tileserver.haiafara.ro/hot/{z}/{x}/{y}.png", {
-        attribution: '&copy; Contribuitori <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        attribution: "&copy; Contribuitori <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
         maxZoom: 20
       });
-      tileLayer.addTo(this.map)
-      this.map.addControl(new customControl())
+      tileLayer.addTo(this.map);
+      this.map.addControl(new CustomControl());
 
       this.geoJSONLayer = L.geoJSON(
         undefined,
         {
           onEachFeature: (feature, layer) => {
             layer.on({
               click: () => {
-                this.$router.push({ name: feature.properties.type, params: { id: feature.id }})
+                this.$router.push({ name: feature.properties.type, params: { id: feature.id }});
               }
-            })
-            layer.bindTooltip(feature.properties.name)
+            });
+            layer.bindTooltip(feature.properties.name);
           },
           pointToLayer: (feature, latlng) => {
             return L.marker(
@@ -82,16 +84,16 @@
                     iconSize: [25, 41],
                     iconAnchor: [13, 41],
                     popupAnchor: [1, -24],
-                    iconUrl: '/marker-icon-blue.png'
+                    iconUrl: "/marker-icon-blue.png"
                   }
                 )
               }
-            )
+            );
           }
         }
-      ).addTo(this.map)
+      ).addTo(this.map);
     }
-  }
+  };
 </script>
 
 <style>

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "caniuse-lite": "^1.0.30000971",
     "css-loader": "^2.1.1",
     "leaflet": "^1.5.1",
+    "leaflet.fullscreen": "^1.4.5",
     "postcss-cssnext": "^3.1.0",
     "typescript": "^3.4.5",
     "vue": "^2.5.22",

diff --git a/yarn.lock b/yarn.lock
@@ -3893,6 +3893,11 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
+leaflet.fullscreen@^1.4.5:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/leaflet.fullscreen/-/leaflet.fullscreen-1.4.5.tgz#3b558dece24d9b51ce762b2e00fe902727f47272"
+  integrity sha512-rQnZswt/bI2HXmYDWjvgu8GIgg5TAyJEVOXJ1SVpo+36G9/YJ4j8gt8bz7VQU5P/gs2tQNCFbuuWtKYpSw8gbA==
+
 leaflet@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.5.1.tgz#9afb9d963d66c870066b1342e7a06f92840f46bf"