SHARE
TWEET

map.js

a guest Feb 27th, 2020 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* eslint-disable */
  2. import { Map, View } from 'ol';
  3. import TileLayer from 'ol/layer/Tile';
  4. import VectorLayer from 'ol/layer/Vector';
  5. import OSM from 'ol/source/OSM';
  6. import VectorSource from 'ol/source/Vector';
  7. import { transform } from 'ol/proj';
  8. import Point from 'ol/geom/Point';
  9. import Feature from 'ol/Feature';
  10. import Style from 'ol/style/Style';
  11. import StrokeStyle from 'ol/style/Stroke';
  12. import Icon from 'ol/style/Icon';
  13. import Overlay from 'ol/Overlay';
  14. import LineString from 'ol/geom/LineString';
  15. import router from './router';
  16. import i18n from './i18n';
  17.  
  18. const objectIconPath = '/assets/marker.png';
  19. export const popupWithImageAndMoreButtonTemplate = function (tourismObject) {
  20.   return `<div class="d-flex flex-column h-100">
  21.             <p class="popup-header my-3">${tourismObject.name[i18n.locale]}</p>
  22.             <img class="popup-img my-2 align-self-center" src="${tourismObject.imagesUrls[0]}"/>
  23.             <a id="more-btn" href="" class='text-center'>${i18n.t('routePage.showMore')}</a>
  24.           </div>`;
  25. };
  26. export const popupWithNameTemplate = function (tourismObject) {
  27.   return `<div>
  28.             <p class="popup-header my-3">${tourismObject.name[i18n.locale]}</p>
  29.           </div>`;
  30. };
  31.  
  32. export function createMap(place) {
  33.   const map = new Map();
  34.   const osmLayer = new TileLayer({
  35.     source: new OSM(),
  36.   });
  37.   map.addLayer(osmLayer);
  38.   const view = new View({
  39.     projection: 'EPSG:900913',
  40.     zoom: 16,
  41.   });
  42.   map.setView(view);
  43.   map.getView().setCenter([0, 0]);
  44.   map.setTarget(place);
  45.   return map;
  46. }
  47.  
  48. function createTourismObjectLayer(points) {
  49.   const iconStyle = new Style({
  50.     image: new Icon(({
  51.       src: objectIconPath,
  52.     })),
  53.   });
  54.   const features = points.map((point) => {
  55.     const feature = new Feature({
  56.       geometry: point.coords,
  57.     });
  58.     feature.setStyle(iconStyle);
  59.     feature.tourismObject = point.object;
  60.     return feature;
  61.   });
  62.   return new VectorLayer({
  63.     source: new VectorSource({
  64.       features,
  65.     }),
  66.   });
  67. }
  68.  
  69. function createPopupOverlay(popupContainer) {
  70.   return new Overlay({
  71.     element: popupContainer,
  72.     autoPan: false,
  73.   });
  74. }
  75.  
  76. function addClickHandlerShowingPopupOnMap(map, popup, subhandler) {
  77.   map.on('click', (evt) => {
  78.     popup.setPosition(undefined);
  79.     window.dispatchEvent(new CustomEvent('disableActiveObject'));
  80.     const clickedFeature = map.forEachFeatureAtPixel(evt.pixel, feature => feature);
  81.     if (clickedFeature !== undefined) {
  82.       popup.setPosition(clickedFeature.getGeometry().getCoordinates());
  83.       subhandler(clickedFeature);
  84.     }
  85.   });
  86. }
  87.  
  88. export function addPopupOverlayOnMap(map, popupContainer, template) {
  89.   const popupOverlay = createPopupOverlay(popupContainer);
  90.   map.addOverlay(popupOverlay);
  91.   addClickHandlerShowingPopupOnMap(map, popupOverlay, (clickedFeature) => {
  92.     popupContainer.innerHTML = template(clickedFeature.tourismObject);
  93.   });
  94. }
  95.  
  96. export function centerMapOnTourismObject(map, object) {
  97.   const coords = transform(object.getCoordinates(), 'EPSG:4326', 'EPSG:900913');
  98.   const size = map.getSize();
  99.   const center = [size[0] / 4, (size[1] - 200) / 2];
  100.   map.getView().centerOn(coords, size, center);
  101. }
  102.  
  103. export function addTourismObjectsOnMap(map, objects) {
  104.   const points = objects.map((object) => {
  105.     const coords = transform(object.getCoordinates(), 'EPSG:4326', 'EPSG:900913');
  106.     return {
  107.       object,
  108.       coords: new Point(coords),
  109.     };
  110.   });
  111.   map.addLayer(createTourismObjectLayer(points));
  112. }
  113.  
  114. export function addRouteOnMap(map, routePath) {
  115.   let line = new LineString(routePath);
  116.   line = line.transform('EPSG:4326', 'EPSG:900913');
  117.   const lineFeature = new Feature({
  118.     geometry: line,
  119.   });
  120.   const lineLayer = new VectorLayer({
  121.     source: new VectorSource({
  122.       features: [lineFeature],
  123.     }),
  124.     style: new Style({
  125.       stroke: new StrokeStyle({
  126.         color: 'rgba(0,0,255,0.5)',
  127.         width: 5,
  128.       }),
  129.     }),
  130.   });
  131.   map.addLayer(lineLayer);
  132.   map.getView().fit(line, { padding: [50, 250, 50, 0] });
  133. }
  134.  
  135. export function showSelectedTourismObject(map, object, popupContainer) {
  136.   const sources = [];
  137.   let features = [];
  138.   let clickedCoords;
  139.   let clickedFeature;
  140.   map.getLayers().forEach((layer) => {
  141.     if (layer.getSource() instanceof VectorSource) {
  142.       sources.push(layer.getSource());
  143.     }
  144.   });
  145.   sources.forEach((source) => {
  146.     features = features.concat(source.getFeatures());
  147.   });
  148.   features.forEach((feature) => {
  149.     if (feature.tourismObject && feature.tourismObject.id === object.id) {
  150.       clickedCoords = feature.getGeometry().getCoordinates();
  151.       clickedFeature = feature;
  152.     }
  153.   });
  154.   const size = map.getSize();
  155.   const center = [size[0] / 4, (size[1] - 200) / 2];
  156.   map.getView().centerOn(clickedCoords, size, center);
  157.   const popup = map.getOverlays().item(0);
  158.   popup.setPosition([clickedCoords[0] + 5, clickedCoords[1] + 5]);
  159.   popupContainer.innerHTML = popupWithImageAndMoreButtonTemplate(clickedFeature.tourismObject)
  160.   document.getElementById('more-btn').addEventListener('click', () => {
  161.     router.localizedPush(`/objects/${clickedFeature.tourismObject.id}`);
  162.   });
  163. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top