digitransit-ui/app/component/map/VerticalTransportationUseMarker.js

import React from 'react';
import PropTypes from 'prop-types';
import { default as L } from 'leaflet';

import Icon from '../Icon';
import { locationShape } from '../../util/shapes';
import GenericMarker from './GenericMarker';
import { getCaseRadius } from '../../util/mapIconUtils';
import { InclineType, RelativeDirection } from '../../constants';

const iconMappings = {
  default: 'icon_escalator_down_filled',
  'stairs-down': 'icon_stairs_down_filled',
  'stairs-up': 'icon_stairs_down_filled',
  'escalator-down': 'icon_escalator_down_arrow_filled',
  'escalator-up': 'icon_escalator_up_arrow_filled',
  elevator: 'icon_elevator_filled',
};

export default function VerticalTransportationUseMarker({
  position,
  relativeDirection,
  inclineType,
}) {
  const objs = [];

  const lowerCaseRelativeDirection = relativeDirection.toLowerCase();
  const lowerCaseInclineType = inclineType.toLowerCase();

  const getVerticalTransportationUseIcon = zoom => {
    let iconId;
    if (inclineType === InclineType.Unknown) {
      iconId = iconMappings[lowerCaseRelativeDirection];
    } else {
      iconId =
        iconMappings[`${lowerCaseRelativeDirection}-${lowerCaseInclineType}`];
    }
    const icon = Icon.asString({ img: iconId || iconMappings.default });
    const iconSize = Math.max(getCaseRadius(zoom) * 2, 8);

    return L.divIcon({
      html: icon,
      iconSize: [iconSize, iconSize],
      iconAnchor: [iconSize / 2, 1.5 * iconSize],
      className: 'map-vertical-transportation-use-info-icon',
    });
  };

  objs.push(
    <GenericMarker
      key={`icon_${relativeDirection}_incline_${inclineType}_lat_${position.lat}_lon_${position.lon}`}
      position={position}
      getIcon={getVerticalTransportationUseIcon}
    />,
  );

  return <div>{objs}</div>;
}

VerticalTransportationUseMarker.propTypes = {
  position: locationShape.isRequired,
  relativeDirection: PropTypes.oneOf(Object.values(RelativeDirection)),
  inclineType: PropTypes.oneOf(Object.values(InclineType)),
};

VerticalTransportationUseMarker.defaultProps = {
  relativeDirection: RelativeDirection.Continue,
  inclineType: InclineType.Unknown,
};