feat(map): add search for map

Author: Paweł Marynowski

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

@@ -11,8 +11,9 @@ 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;
@@ -96,6 +97,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],