|
| 1 | +import _ from 'lodash'; |
| 2 | + |
| 3 | +import './map.scss'; |
| 4 | +import template from './map.html'; |
| 5 | + |
| 6 | +const MapComponent = { controller, template }; |
| 7 | + |
| 8 | +function controller($location, $scope, $state, $stateParams, $timeout, leafletData, localStorageService, mapService, wikidata) { |
| 9 | + const vm = this; |
| 10 | + const icon = mapService.getMapIcon(); |
| 11 | + |
| 12 | + // bindings |
| 13 | + |
| 14 | + vm.goToItem = item => $state.go('main.list', { id: item.id.substring(1) }); |
| 15 | + vm.map = mapService.getMapInstance({ center: { lat: 51.686, lng: 19.545, zoom: 7 } }); |
| 16 | + vm.list = []; |
| 17 | + vm.listParams = {}; |
| 18 | + vm.loading = vm.loadingMap = true; |
| 19 | + vm.search = {}; |
| 20 | + |
| 21 | + // activate |
| 22 | + |
| 23 | + $scope.$on('centerUrlHash', (event, centerHash) => { |
| 24 | + $location.search({ c: centerHash }); |
| 25 | + }); |
| 26 | + |
| 27 | + $timeout(() => { |
| 28 | + vm.loadingMap = false; |
| 29 | + leafletData.getMap().then((map) => { |
| 30 | + getDataBB(map.getBounds()); |
| 31 | + map.on('dragend zoomend', () => { |
| 32 | + getDataBB(map.getBounds()); |
| 33 | + }); |
| 34 | + }); |
| 35 | + }, 100); |
| 36 | + |
| 37 | + // functions |
| 38 | + |
| 39 | + function getDataBB(bounds) { |
| 40 | + vm.loading = true; |
| 41 | + wikidata.getSPARQL(`SELECT ?item ?itemLabel ?admin ?adminLabel ?image ?coord WHERE { |
| 42 | + SERVICE wikibase:box { |
| 43 | + ?item wdt:P625 ?coord . |
| 44 | + bd:serviceParam wikibase:cornerWest "Point(${bounds.getSouthWest().lng} ${bounds.getSouthWest().lat})"^^geo:wktLiteral . |
| 45 | + bd:serviceParam wikibase:cornerEast "Point(${bounds.getNorthEast().lng} ${bounds.getNorthEast().lat})"^^geo:wktLiteral . |
| 46 | + } |
| 47 | + OPTIONAL { ?item wdt:P131 ?admin . } |
| 48 | + OPTIONAL { ?item wdt:P18 ?image . } |
| 49 | + SERVICE wikibase:label { bd:serviceParam wikibase:language "pl" } |
| 50 | + }`).then((data) => { |
| 51 | + vm.map.markers = {}; |
| 52 | + vm.list = data.map(element => setListElement(element)); |
| 53 | + vm.list.forEach((element) => { |
| 54 | + vm.map.markers[element.name.value_id] = setMarker(element); |
| 55 | + }); |
| 56 | + vm.loading = false; |
| 57 | + }); |
| 58 | + } |
| 59 | + |
| 60 | + function getImage(image) { |
| 61 | + if (image) { |
| 62 | + const newImage = image.value.replace('wiki/Special:FilePath', 'w/index.php?title=Special:Redirect/file'); |
| 63 | + return `${newImage}&width=120`; |
| 64 | + } |
| 65 | + return false; |
| 66 | + } |
| 67 | + |
| 68 | + function getMessage(element) { |
| 69 | + return `<md-list-item class="md-2-line" ui-sref="main.object({id: ${element.name.value_id.substring(1)}})"> |
| 70 | + <div class="list__image" layout="row" layout-align="center center"> |
| 71 | + <img ng-src="{{'${element.image}'}}" alt="${element.name.value}" ng-if="${!!element.image}"> |
| 72 | + </div> |
| 73 | + <div class="md-list-item-text" layout="column"> |
| 74 | + <p>${element.name.value}</p> |
| 75 | + <p class="muted">${element.admin ? element.admin.value : ''}</p> |
| 76 | + </div> |
| 77 | + </md-list-item>`; |
| 78 | + } |
| 79 | + |
| 80 | + function setListElement(element) { |
| 81 | + const id = element.item.value; |
| 82 | + const obj = { |
| 83 | + name: { |
| 84 | + value_id: id.substring(id.indexOf('/Q') + 1), |
| 85 | + value: element.itemLabel.value, |
| 86 | + }, |
| 87 | + coord: element.coord.value ? element.coord.value.replace('Point(', '').replace(')', '').split(' ') : false, |
| 88 | + image: getImage(element.image), |
| 89 | + }; |
| 90 | + if (element.admin) { |
| 91 | + obj.admin = { |
| 92 | + value_id: element.admin.value.substring(element.admin.value.indexOf('/Q') + 1), |
| 93 | + value: element.adminLabel ? element.adminLabel.value : element.admin.value.substring(element.admin.value.indexOf('/Q') + 1), |
| 94 | + }; |
| 95 | + } |
| 96 | + return obj; |
| 97 | + } |
| 98 | + |
| 99 | + function setMarker(element) { |
| 100 | + return { |
| 101 | + lat: +element.coord[1], |
| 102 | + lng: +element.coord[0], |
| 103 | + message: getMessage(element), |
| 104 | + layer: 'monuments', |
| 105 | + icon, |
| 106 | + }; |
| 107 | + } |
| 108 | +} |
| 109 | + |
| 110 | +export default () => { |
| 111 | + angular |
| 112 | + .module('monumental') |
| 113 | + .component('moMap', MapComponent); |
| 114 | +}; |
0 commit comments