Merge pull request #10 from hatnote/dev

version 0.9

Author: yarl

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monumental",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": true,
   "description": "Monumental app",
   "main": "src/index.js",

src/components/main/map/map.html

@@ -4,6 +4,21 @@
 			Dashboard
 		</md-button>
 		<span flex></span>
+    <md-autocomplete
+          md-input-name="autocompleteField"
+          md-selected-item="$ctrl.search.selectedItem"
+          md-search-text="$ctrl.search.text"
+          md-items="item in $ctrl.querySearch($ctrl.search.text)"
+          md-selected-item-change="$ctrl.goToItem(item)"
+          md-item-text="item.label"
+          md-min-length="1"
+          placeholder="Search"
+          md-menu-class="autocomplete-custom-template">
+        <md-item-template>
+          <strong>{{item.label}}</strong>
+      <span>{{item.description}}</span>
+      </md-item-template>
+    </md-autocomplete>
 	</div>
 </md-toolbar>
 <div class="container" layout="column" layout-align="space-between stretch" flex>

src/components/main/map/map.js

@@ -1,5 +1,3 @@
-import _ from 'lodash';
-
 import './map.scss';
 import template from './map.html';
 
@@ -11,25 +9,34 @@ function controller($location, $scope, $state, $stateParams, $timeout, leafletDa
 
   // bindings
 
-  vm.goToItem = item => $state.go('main.list', { id: item.id.substring(1) });
+  vm.goToItem = item => setMap(item);
   vm.map = mapService.getMapInstance({ center: { lat: 51.686, lng: 19.545, zoom: 7 } });
+  vm.querySearch = text => wikidata.getSearch(text);
   vm.list = [];
   vm.listParams = {};
   vm.loading = vm.loadingMap = true;
   vm.search = {};
 
   // activate
 
+  let langs = $stateParams.lang ? [$stateParams.lang] : [];
+  langs = langs.concat(localStorageService.get('languages') || ['en', 'de']);
+  wikidata.setLanguages(langs);
+
   $scope.$on('centerUrlHash', (event, centerHash) => {
     $location.search({ c: centerHash });
   });
 
   $timeout(() => {
     vm.loadingMap = false;
     leafletData.getMap().then((map) => {
-      getDataBB(map.getBounds());
-      map.on('dragend zoomend', () => {
+      if (map.getZoom() > 12) {
         getDataBB(map.getBounds());
+      }
+      map.on('dragend zoomend', () => {
+        if (map.getZoom() > 12) {
+          getDataBB(map.getBounds());
+        }
       });
     });
   }, 100);
@@ -38,15 +45,16 @@ function controller($location, $scope, $state, $stateParams, $timeout, leafletDa
 
   function getDataBB(bounds) {
     vm.loading = true;
-    wikidata.getSPARQL(`SELECT ?item ?itemLabel ?admin ?adminLabel ?image ?coord WHERE {
+    wikidata.getSPARQL(`SELECT ?item ?itemLabel ?admin ?adminLabel ?image ?coord ?heritage WHERE {
         SERVICE wikibase:box {
           ?item wdt:P625 ?coord .
           bd:serviceParam wikibase:cornerWest "Point(${bounds.getSouthWest().lng} ${bounds.getSouthWest().lat})"^^geo:wktLiteral .
           bd:serviceParam wikibase:cornerEast "Point(${bounds.getNorthEast().lng} ${bounds.getNorthEast().lat})"^^geo:wktLiteral .
         }
         OPTIONAL { ?item wdt:P131 ?admin . }
         OPTIONAL { ?item wdt:P18 ?image . }
-        SERVICE wikibase:label { bd:serviceParam wikibase:language "pl" }
+        ?item wdt:P1435 ?heritage .
+        SERVICE wikibase:label { bd:serviceParam wikibase:language "${langs.join(',')}" }
       }`).then((data) => {
         vm.map.markers = {};
         vm.list = data.map(element => setListElement(element));
@@ -96,6 +104,24 @@ function controller($location, $scope, $state, $stateParams, $timeout, leafletDa
     return obj;
   }
 
+  function setMap(item) {
+    if (!item || !item.id) { return; }
+    vm.loading = true;
+    wikidata.getById(item.id)
+      .then((data) => {
+        const element = Object.values(data)[0];
+        const coords = element.claims.P625;
+        if (coords) {
+          const lat = coords.values[0].value.latitude;
+          const lng = coords.values[0].value.longitude;
+          leafletData.getMap().then((map) => {
+            map.setView([lat, lng], 14);
+            getDataBB(map.getBounds());
+          });
+        }
+      });
+  }
+
   function setMarker(element) {
     return {
       lat: +element.coord[1],

src/services/map.service.js

@@ -47,6 +47,12 @@ const MapService = () => {
             name: 'Monuments',
             type: 'markercluster',
             visible: true,
+            layerOptions: {
+              spiderfyOnMaxZoom: false,
+              showCoverageOnHover: false,
+              zoomToBoundsOnClick: true,
+              disableClusteringAtZoom: 17,
+            },
           },
         },
       },

src/styles/_general.scss

@@ -1,75 +1,79 @@
 @import 'variables';
 
 html, body {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 body {
-    color: $darkGrey;
-    font: 16px Roboto, Arial, sans-serif; 
+  color: $darkGrey;
+  font: 16px Roboto, Arial, sans-serif; 
 }
 
 ::-webkit-scrollbar {
-    width: 5px;
-    background: transparent;
+  width: 5px;
+  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-    background: rgba(0,0,0,0.2);
+  background: rgba(0,0,0,0.2);
 }
 
 md-content {
-    margin: 20px;
+  margin: 20px;
 }
 
 .container {
-    min-height: calc(100vh - 64px);
+  min-height: calc(100vh - 64px);
 
-    ui-view, ui-view > * {
-        width: 100%;
-    }
+  ui-view, ui-view > * {
+    width: 100%;
+  }
 }
 
 ////
 
 .link {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 a, a.link {
-    cursor: pointer;
-    color: #8f0000;
-    text-decoration: none;
+  cursor: pointer;
+  color: #8f0000;
+  text-decoration: none;
 }
 
 .muted {
-    color: $lightGrey;
+  color: $lightGrey;
 }
 
 .full-width {
-    width: 100%;
+  width: 100%;
 }
 
 .text-left {
-    text-align: left;
+  text-align: left;
 }
 
 .text-right {
-    text-align: right;
+  text-align: right;
 }
 
 .invisible {
-    width: 0;
-    height: 0;
-    opacity: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
 }
 
 strong {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 ////
 
 .toolbar {
-    padding: 0 5px;
+  padding: 0 5px;
+}
+
+.md-virtual-repeat-container.md-autocomplete-suggestions-container {
+  z-index: 1000 !important;
 }