Merge pull request #3 from yarl/dev

version 0.3

Author: yarl

package.json

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

src/components/main/monument/monument.html

@@ -91,6 +91,21 @@ <h4 class="monument__subtitle md-headline">Properties</h4>
                  ng-href="{{$ctrl.getCommonsLink()}}">
         <md-icon>collections</md-icon> {{$ctrl.monument.claims.P373.property[$ctrl.lang]}}
       </md-button>
+
+      <leaflet ng-if="$ctrl.monument.claims.P625"
+               markers="$ctrl.map.markers"
+               center="$ctrl.map.center"></leaflet>
+      <div layout="row" layout-align="center center"
+           ng-if="$ctrl.monument.claims.P625">
+        <md-button class="md-primary" flex
+                   ng-href="https://www.google.com/maps?q={{$ctrl.map.markers.marker.lat}},{{$ctrl.map.markers.marker.lng}}">
+          <md-icon>map</md-icon> Google Maps
+        </md-button>
+        <md-button class="md-primary" flex
+                   ng-href="http://www.openstreetmap.org/#map=17/{{$ctrl.map.markers.marker.lat}}/{{$ctrl.map.markers.marker.lng}}">
+          <md-icon>map</md-icon> OSM
+        </md-button>
+      </div>
     </div>
   </div>
 </md-content>

src/components/main/monument/monument.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 
 import './monument.scss';
 import template from './monument.html';
+import '../../../images/marker.png';
 
 const MonumentComponent = {
   controller: controller,
@@ -15,6 +16,7 @@ function controller($http, $q, $sce, $stateParams, $timeout, $window, WikiServic
   vm.getCommonsLink = getCommonsLink;
   vm.image = [];
   vm.lang = $stateParams.lang || 'pl';
+  vm.map = {};
 
   wikidata.setLanguages([vm.lang, 'en']);
   getWikidata();
@@ -81,9 +83,35 @@ function controller($http, $q, $sce, $stateParams, $timeout, $window, WikiServic
       if (vm.monument.claims.P131) {
         getFullLocation(claims.P131.values[0].value_id);
       }
-      if(vm.monument.interwiki[vm.lang + 'wiki']) {
+      if (vm.monument.interwiki[vm.lang + 'wiki']) {
         getArticleHeader(vm.monument.interwiki[vm.lang + 'wiki'].title);
       }
+      if (vm.monument.claims.P625) {
+        const value = vm.monument.claims.P625.values[0].value;
+        const icon = {
+          iconUrl: 'assets/images/marker.png',
+          shadowUrl: undefined,
+          iconSize: [40, 40],
+          shadowSize: [0, 0],
+          iconAnchor: [20, 20],
+          shadowAnchor: [0, 0]
+        };
+
+        vm.map = {
+          center: {
+            lat: value.latitude,
+            lng: value.longitude,
+            zoom: 15
+          },
+          markers: {
+            marker: {
+              lat: value.latitude,
+              lng: value.longitude,
+              icon: icon
+            }
+          }
+        };
+      }
       getInterwiki();
 
       let title = vm.monument.labels[vm.lang] || vm.monument.labels.en || vm.monument.id;

src/components/main/monument/monument.scss

@@ -119,4 +119,9 @@ mo-monument {
         }
     }
 
+    .angular-leaflet-map {
+        width: 100%;
+        height: 300px;
+        margin-top: 20px;
+    }
 }

src/images/marker.png

@@ -31,9 +31,12 @@ angular
     'restangular',
     'infinite-scroll',
     'leaflet-directive'
-    ])
+  ])
   .config(stateConfig)
-  .config(themeConfig);
+  .config(themeConfig)
+  .config($logProvider => {
+    $logProvider.debugEnabled(false);
+  });
 
 /**
  * Config of routing
@@ -68,10 +71,15 @@ function stateConfig($stateProvider, $urlRouterProvider) {
  */
 function themeConfig($mdThemingProvider, $provide) {
   let tp = $mdThemingProvider;
+  tp.definePalette('moRed', tp.extendPalette('red', {
+    '500': '#8f0000',
+    '600': '#8f0000'
+  }));
+
   tp.alwaysWatchTheme(true);
   tp.theme('default')
-    .primaryPalette('blue')
-    .accentPalette('red');
+    .primaryPalette('moRed')
+    .accentPalette('blue');
 
   $provide.value('themeProvider', tp);
 }

src/index.js

@@ -30,7 +30,7 @@ md-content {
 
 a, a.link {
     cursor: pointer;
-    color: rgb(33,150,243);
+    color: #8f0000;
     text-decoration: none;
 }