map.js

/* eslint-disable */
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';
import { transform } from 'ol/proj';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';
import Style from 'ol/style/Style';
import StrokeStyle from 'ol/style/Stroke';
import Icon from 'ol/style/Icon';
import Overlay from 'ol/Overlay';
import LineString from 'ol/geom/LineString';
import router from './router';
import i18n from './i18n';

const objectIconPath = '/assets/marker.png';
export const popupWithImageAndMoreButtonTemplate = function (tourismObject) {
  return `<div class="d-flex flex-column h-100">
            <p class="popup-header my-3">${tourismObject.name[i18n.locale]}</p>
            <img class="popup-img my-2 align-self-center" src="${tourismObject.imagesUrls[0]}"/>
            <a id="more-btn" href="" class='text-center'>${i18n.t('routePage.showMore')}</a>
          </div>`;
};
export const popupWithNameTemplate = function (tourismObject) {
  return `<div>
            <p class="popup-header my-3">${tourismObject.name[i18n.locale]}</p>
          </div>`;
};

export function createMap(place) {
  const map = new Map();
  const osmLayer = new TileLayer({
    source: new OSM(),
  });
  map.addLayer(osmLayer);
  const view = new View({
    projection: 'EPSG:900913',
    zoom: 16,
  });
  map.setView(view);
  map.getView().setCenter([0, 0]);
  map.setTarget(place);
  return map;
}

function createTourismObjectLayer(points) {
  const iconStyle = new Style({
    image: new Icon(({
      src: objectIconPath,
    })),
  });
  const features = points.map((point) => {
    const feature = new Feature({
      geometry: point.coords,
    });
    feature.setStyle(iconStyle);
    feature.tourismObject = point.object;
    return feature;
  });
  return new VectorLayer({
    source: new VectorSource({
      features,
    }),
  });
}

function createPopupOverlay(popupContainer) {
  return new Overlay({
    element: popupContainer,
    autoPan: false,
  });
}

function addClickHandlerShowingPopupOnMap(map, popup, subhandler) {
  map.on('click', (evt) => {
    popup.setPosition(undefined);
    window.dispatchEvent(new CustomEvent('disableActiveObject'));
    const clickedFeature = map.forEachFeatureAtPixel(evt.pixel, feature => feature);
    if (clickedFeature !== undefined) {
      popup.setPosition(clickedFeature.getGeometry().getCoordinates());
      subhandler(clickedFeature);
    }
  });
}

export function addPopupOverlayOnMap(map, popupContainer, template) {
  const popupOverlay = createPopupOverlay(popupContainer);
  map.addOverlay(popupOverlay);
  addClickHandlerShowingPopupOnMap(map, popupOverlay, (clickedFeature) => {
    popupContainer.innerHTML = template(clickedFeature.tourismObject);
  });
}

export function centerMapOnTourismObject(map, object) {
  const coords = transform(object.getCoordinates(), 'EPSG:4326', 'EPSG:900913');
  const size = map.getSize();
  const center = [size[0] / 4, (size[1] - 200) / 2];
  map.getView().centerOn(coords, size, center);
}

export function addTourismObjectsOnMap(map, objects) {
  const points = objects.map((object) => {
    const coords = transform(object.getCoordinates(), 'EPSG:4326', 'EPSG:900913');
    return {
      object,
      coords: new Point(coords),
    };
  });
  map.addLayer(createTourismObjectLayer(points));
}

export function addRouteOnMap(map, routePath) {
  let line = new LineString(routePath);
  line = line.transform('EPSG:4326', 'EPSG:900913');
  const lineFeature = new Feature({
    geometry: line,
  });
  const lineLayer = new VectorLayer({
    source: new VectorSource({
      features: [lineFeature],
    }),
    style: new Style({
      stroke: new StrokeStyle({
        color: 'rgba(0,0,255,0.5)',
        width: 5,
      }),
    }),
  });
  map.addLayer(lineLayer);
  map.getView().fit(line, { padding: [50, 250, 50, 0] });
}

export function showSelectedTourismObject(map, object, popupContainer) {
  const sources = [];
  let features = [];
  let clickedCoords;
  let clickedFeature;
  map.getLayers().forEach((layer) => {
    if (layer.getSource() instanceof VectorSource) {
      sources.push(layer.getSource());
    }
  });
  sources.forEach((source) => {
    features = features.concat(source.getFeatures());
  });
  features.forEach((feature) => {
    if (feature.tourismObject && feature.tourismObject.id === object.id) {
      clickedCoords = feature.getGeometry().getCoordinates();
      clickedFeature = feature;
    }
  });
  const size = map.getSize();
  const center = [size[0] / 4, (size[1] - 200) / 2];
  map.getView().centerOn(clickedCoords, size, center);
  const popup = map.getOverlays().item(0);
  popup.setPosition([clickedCoords[0] + 5, clickedCoords[1] + 5]);
  popupContainer.innerHTML = popupWithImageAndMoreButtonTemplate(clickedFeature.tourismObject)
  document.getElementById('more-btn').addEventListener('click', () => {
    router.localizedPush(`/objects/${clickedFeature.tourismObject.id}`);
  });
}