Skip to content

Commit 73c0f3f

Browse files
yarlyarl
committed
feat(monument): add map, clean-up legacy code
1 parent 160f977 commit 73c0f3f

3 files changed

Lines changed: 31 additions & 69 deletions

File tree

‎src/components/main/monument/monument.html‎

Lines changed: 24 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ <h4 class="monument__subtitle md-headline muted">
6666
</div>
6767

6868
<div class="monument__data" layout="column" layout-align="start center">
69-
<div class="monument monument__panel monument__article" flex="40"
69+
<div class="monument monument__panel monument__article"
7070
layout="column" layout-align="start stretch">
7171
<div class="article__header"
7272
layout="row" layout-align="start center">
@@ -89,7 +89,7 @@ <h4 class="monument__subtitle md-headline">Wikipedia</h4>
8989
</md-button>
9090
</div>
9191

92-
<div class="monument monument__panel" flex="60">
92+
<div class="monument monument__panel">
9393
<div class="monument__details">
9494
<h4 class="monument__subtitle md-headline">Properties</h4>
9595
<div class="monument__details-item"
@@ -113,69 +113,29 @@ <h4 class="monument__subtitle md-headline">Properties</h4>
113113
</div>
114114
</div>
115115
</div>
116-
</div>
117-
118-
<div style="display: none;" class="monument" layout="row" layout-align="space-between stretch">
119-
120-
<!-- LEFT -->
121-
<div class="monument__left" ng-show="$ctrl.loading">
122-
<h2 class="monument__title md-display-1">Loading...</h2>
123-
</div>
124-
125-
<div class="monument__left" ng-show="!$ctrl.loading">
126-
<h2 class="monument__title md-display-1">{{$ctrl.monument.labels[$ctrl.lang] || 'no name'}}</h2>
127-
<h4 class="monument__subtitle md-headline muted">{{$ctrl.monument.labels.en || 'no english name'}}</h4>
128-
129-
130-
131-
132-
<md-button class="md-primary"
133-
aria-label="Show raw data"
134-
ng-click="$ctrl.showRawData = !$ctrl.showRawData">
135-
Show raw data
136-
</md-button>
137-
<md-button ng-href="http://www.wikidata.org/wiki/{{$ctrl.monument.id}}">
138-
Show Wikidata page
139-
</md-button>
140-
<md-button ng-click="$ctrl.addCategory()">go</md-button>
141-
<pre ng-show="$ctrl.showRawData">{{$ctrl.monument | json}}</pre>
142-
</div>
143-
144-
<!-- RIGHT -->
145-
<div class="monument__right"
146-
layout="column" layout-align="start stretch">
147-
<div class="monument__image"
148-
layout="column" layout-align="center center"
149-
ng-if="!$ctrl.image">
150-
<md-icon>crop_original</md-icon>
151-
</div>
152-
<a ng-repeat="image in $ctrl.image" ng-href="{{image.descriptionurl}}">
153-
<img ng-src="{{image.thumburl}}">
154-
</a>
155-
<div class="monument__images" ng-if="$ctrl.images">
156-
<a ng-repeat="image in $ctrl.images" ng-href="{{image.descriptionurl}}">
157-
<img ng-src="{{image.thumburl}}">
158-
</a>
159-
</div>
160-
<md-button class="md-primary"
161-
ng-if="$ctrl.monument.claims.P373"
162-
ng-href="{{$ctrl.getCommonsLink()}}">
163-
<md-icon>collections</md-icon> {{$ctrl.monument.claims.P373.property[$ctrl.lang]}}
164-
</md-button>
165116

166-
<leaflet ng-if="$ctrl.monument.claims.P625"
167-
markers="$ctrl.map.markers"
168-
center="$ctrl.map.center"></leaflet>
169-
<div layout="row" layout-align="center center"
170-
ng-if="$ctrl.monument.claims.P625">
171-
<md-button class="md-primary" flex
172-
ng-href="https://www.google.com/maps?q={{$ctrl.map.markers.marker.lat}},{{$ctrl.map.markers.marker.lng}}">
173-
<md-icon>map</md-icon> Google Maps
174-
</md-button>
175-
<md-button class="md-primary" flex
176-
ng-href="http://www.openstreetmap.org/#map=17/{{$ctrl.map.markers.marker.lat}}/{{$ctrl.map.markers.marker.lng}}">
177-
<md-icon>map</md-icon> OSM
178-
</md-button>
117+
<div class="monument monument__panel">
118+
<div class="monument__details">
119+
<h4 class="monument__subtitle md-headline">Map</h4>
120+
<leaflet ng-if="$ctrl.monument.claims.P625"
121+
markers="::$ctrl.map.markers" layers="::$ctrl.map.layers" center="::$ctrl.map.center"></leaflet>
122+
<div layout="row" layout-align="center center"
123+
ng-if="$ctrl.monument.claims.P625">
124+
<!--
125+
<md-button class="md-primary" flex
126+
ng-href="https://www.google.com/maps?q={{$ctrl.map.markers.marker.lat}},{{$ctrl.map.markers.marker.lng}}" target="_blank">
127+
<md-icon>map</md-icon> Show in Google Maps
128+
</md-button>
129+
<md-button class="md-primary" flex
130+
ng-href="http://www.openstreetmap.org/#map=17/{{$ctrl.map.markers.marker.lat}}/{{$ctrl.map.markers.marker.lng}}" target="_blank">
131+
<md-icon>map</md-icon> Show in OSM.org
132+
</md-button>
133+
-->
134+
<md-button class="md-primary" flex
135+
ng-href="#/map?c={{$ctrl.map.markers.marker.lat}}:{{$ctrl.map.markers.marker.lng}}:16">
136+
<md-icon>map</md-icon> Show monuments nearby
137+
</md-button>
138+
</div>
179139
</div>
180140
</div>
181141
</div>

‎src/components/main/monument/monument.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import '../../../images/marker.png';
66

77
const MonumentComponent = { controller, template };
88

9-
function controller($http, $q, $sce, $stateParams, $timeout, $window, localStorageService, WikiService, langService, mapService, wikidata) {
9+
function controller($http, $q, $sce, $stateParams, $timeout, $window, localStorageService, WikiService, langService, leafletData, mapService, wikidata) {
1010
const vm = this;
1111
const icon = mapService.getMapIcon();
1212
const id = $stateParams.id.includes('Q') ? $stateParams.id : `Q${$stateParams.id}`;
@@ -99,7 +99,7 @@ function controller($http, $q, $sce, $stateParams, $timeout, $window, localStora
9999
vm.map = mapService.getMapInstance({ center: {
100100
lat: value.latitude,
101101
lng: value.longitude,
102-
zoom: 15,
102+
zoom: 16,
103103
} });
104104
vm.map.markers = {
105105
marker: {
@@ -108,6 +108,10 @@ function controller($http, $q, $sce, $stateParams, $timeout, $window, localStora
108108
icon,
109109
},
110110
};
111+
leafletData.getMap().then((map) => {
112+
map.scrollWheelZoom.disable();
113+
map.once('focus', () => { map.scrollWheelZoom.enable(); });
114+
});
111115
}
112116
getInterwiki();
113117
vm.loading = false;

‎src/components/main/monument/monument.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,6 @@ mo-monument {
142142
}
143143

144144
.angular-leaflet-map {
145-
width: 100%;
146-
height: 300px;
147-
margin-top: 20px;
145+
height: 600px;
148146
}
149147
}

0 commit comments

Comments
 (0)