gtfs-to-html 2.9.14 → 2.10.0

package/views/default/js/timetable-map.js

@@ -1,4 +1,4 @@
-/* global document, jQuery, mapboxgl, Pbf, stopData, routeData, routeIds, tripIds, geojsons, gtfsRealtimeUrls */
+/* global document, jQuery, maplibregl, Pbf, mapStyleUrl, stopData, routeData, routeIds, tripIds, geojsons, gtfsRealtimeUrls */
 /* eslint prefer-arrow-callback: "off", no-unused-vars: "off" */
 
 const maps = {};
@@ -93,13 +93,83 @@ function getStopPopupHtml(feature, stop) {
   if (stop.stop_code ?? false) {
     jQuery('<div>')
       .html([
-        jQuery('<label>').addClass('popup-label').text('Stop Code:'),
+        jQuery('<div>').addClass('popup-label').text('Stop Code:'),
         jQuery('<strong>').text(stop.stop_code),
       ])
       .appendTo(html);
   }
 
-  jQuery('<label>').text('Routes Served:').appendTo(html);
+  if (tripUpdates) {
+    const stopTimeUpdates = {
+      0: [],
+      1: [],
+    };
+
+    for (const tripUpdate of tripUpdates) {
+      const stopTimeUpdatesForStop =
+        tripUpdate.trip_update.stop_time_update.filter(
+          (stopTimeUpdate) =>
+            stopTimeUpdate.stop_id === stop.stop_id &&
+            (stopTimeUpdate.departure !== null ||
+              stopTimeUpdate.arrival !== null) &&
+            stopTimeUpdate.schedule_relationship !== 3,
+        );
+      if (stopTimeUpdatesForStop.length > 0) {
+        stopTimeUpdates[tripUpdate.trip_update.trip.direction_id].push(
+          ...stopTimeUpdatesForStop,
+        );
+      }
+    }
+
+    stopTimeUpdates['0'].sort((a, b) => {
+      const timeA = a.departure ? a.departure.time : a.arrival.time;
+      const timeB = b.departure ? b.departure.time : b.arrival.time;
+      return timeA - timeB;
+    });
+
+    stopTimeUpdates['1'].sort((a, b) => {
+      const timeA = a.departure ? a.departure.time : a.arrival.time;
+      const timeB = b.departure ? b.departure.time : b.arrival.time;
+      return timeA - timeB;
+    });
+
+    if (stopTimeUpdates['0'].length > 0 || stopTimeUpdates['1'].length > 0) {
+      jQuery('<div>')
+        .addClass('popup-label')
+        .text('Upcoming Departures:')
+        .appendTo(html);
+
+      for (const direction of ['0', '1']) {
+        if (stopTimeUpdates[direction].length > 0) {
+          const directionName = jQuery(
+            `.timetable[data-direction-id="${direction}"]`,
+          ).data('direction-name');
+          const departureTimes = stopTimeUpdates[direction].map(
+            (stopTimeUpdate) =>
+              Math.round(
+                ((stopTimeUpdate.departure
+                  ? stopTimeUpdate.departure.time
+                  : stopTimeUpdate.arrival.time) -
+                  Date.now() / 1000) /
+                  60,
+              ),
+          );
+
+          // Only use the next 4 departures
+          const formattedDepartures = new Intl.ListFormat('en', {
+            style: 'long',
+            type: 'conjunction',
+          }).format(departureTimes.slice(0, 4).map((time) => `<b>${time}</b>`));
+
+          jQuery('<div>')
+            .html(`<b>${directionName}</b> in ${formattedDepartures} min`)
+            .appendTo(html);
+        }
+      }
+    }
+  }
+
+  jQuery('<div>').addClass('popup-label').text('Routes Served:').appendTo(html);
 
   jQuery(html).append(
     jQuery('<div>')
@@ -122,7 +192,7 @@ function getStopPopupHtml(feature, stop) {
 }
 
 function getBounds(geojson) {
-  const bounds = new mapboxgl.LngLatBounds();
+  const bounds = new maplibregl.LngLatBounds();
   for (const feature of geojson.features) {
     if (feature.geometry.type.toLowerCase() === 'point') {
       bounds.extend(feature.geometry.coordinates);
@@ -389,7 +459,10 @@ function addVehicleMarker(vehiclePosition, vehicleTripUpdate) {
   ];
 
   // Add marker to map
-  const vehicleMarker = new mapboxgl.Marker(el)
+  const vehicleMarker = new maplibregl.Marker({
+    element: el,
+    anchor: 'center',
+  })
     .setLngLat(coordinates)
     .addTo(maps[visibleTimetableId]);
 
@@ -502,10 +575,7 @@ async function updateArrivals() {
 
     jQuery('.vehicle-legend-item').show();
 
-    vehiclePositions = latestVehiclePositions;
-    tripUpdates = latestTripUpdates;
-
-    const routeVehiclePositions = vehiclePositions.filter((vehiclePosition) => {
+    vehiclePositions = latestVehiclePositions.filter((vehiclePosition) => {
       if (
         !vehiclePosition ||
         !vehiclePosition.vehicle ||
@@ -534,7 +604,19 @@ async function updateArrivals() {
       return tripIds.includes(vehiclePosition.vehicle.trip.trip_id);
     });
 
-    for (const vehiclePosition of routeVehiclePositions) {
+    tripUpdates = latestTripUpdates.filter((tripUpdate) => {
+      if (
+        !tripUpdate ||
+        !tripUpdate.trip_update ||
+        !tripUpdate.trip_update.trip
+      ) {
+        return false;
+      }
+
+      return tripIds.includes(tripUpdate.trip_update.trip.trip_id);
+    });
+
+    for (const vehiclePosition of vehiclePositions) {
       const vehicleId = vehiclePosition.vehicle.vehicle.id;
 
       let vehicleTripUpdate = tripUpdates?.find(
@@ -575,7 +657,7 @@ async function updateArrivals() {
     // Remove vehicles not in the feed
     for (const vehicleId of Object.keys(vehicleMarkers)) {
       if (
-        !routeVehiclePositions.find(
+        !vehiclePositions.find(
           (vehiclePosition) => vehiclePosition.vehicle.vehicle.id === vehicleId,
         )
       ) {
@@ -630,319 +712,332 @@ function createMap(id) {
   }
 
   const bounds = getBounds(geojson);
-  const map = new mapboxgl.Map({
+  const map = new maplibregl.Map({
     container: `map_timetable_id_${id}`,
-    style: 'mapbox://styles/mapbox/light-v11',
+    style: mapStyleUrl,
     center: bounds.getCenter(),
     zoom: 12,
     preserveDrawingBuffer: true,
   });
 
-  map.initialize = () =>
-    map.fitBounds(bounds, {
-      padding: {
-        top: 40,
-        bottom: 40,
-        left: 20,
-        right: 40,
-      },
-      duration: 0,
-    });
+  map.initialize = () => fitMapToBounds(map, bounds);
 
   map.scrollZoom.disable();
-  map.addControl(new mapboxgl.NavigationControl());
+  map.addControl(new maplibregl.NavigationControl());
+  map.addControl(new maplibregl.FullscreenControl());
 
   map.on('load', () => {
-    map.fitBounds(bounds, {
-      padding: {
-        top: 40,
-        bottom: 40,
-        left: 20,
-        right: 40,
-      },
-      duration: 0,
-    });
+    fitMapToBounds(map, bounds);
+    disablePointsOfInterest(map);
+    addMapLayers(map, geojson, defaultRouteColor, lineLayout);
+    setupEventListeners(map, id);
+  });
 
-    // Turn off Points of Interest labels
-    map.setLayoutProperty('poi-label', 'visibility', 'none');
+  return map;
+}
 
-    // Find the index of the first symbol layer in the map style to put the route lines underneath
-    let firstSymbolId;
-    for (const layer of map.getStyle().layers) {
-      if (layer.type === 'symbol') {
-        firstSymbolId = layer.id;
-        break;
-      }
-    }
+function fitMapToBounds(map, bounds) {
+  map.fitBounds(bounds, {
+    padding: { top: 40, bottom: 40, left: 20, right: 40 },
+    duration: 0,
+  });
+}
 
-    // Add route drop shadow outline first
-    map.addLayer(
-      {
-        id: 'route-line-shadow',
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'line-color': '#000000',
-          'line-opacity': 0.3,
-          'line-width': {
-            base: 12,
-            stops: [
-              [14, 20],
-              [18, 42],
-            ],
-          },
-          'line-blur': {
-            base: 12,
-            stops: [
-              [14, 20],
-              [18, 42],
-            ],
-          },
-        },
-        layout: lineLayout,
-        filter: ['!has', 'stop_id'],
-      },
-      firstSymbolId,
-    );
+function disablePointsOfInterest(map) {
+  const layers = map.getStyle().layers;
+  const poiLayerIds = layers
+    .filter((layer) => layer.id.startsWith('poi'))
+    ?.map((layer) => layer.id);
+  poiLayerIds.forEach((layerId) => {
+    map.setLayoutProperty(layerId, 'visibility', 'none');
+  });
+}
 
-    // Add route line outline
-    map.addLayer(
-      {
-        id: 'route-line-outline',
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'line-color': '#FFFFFF',
-          'line-opacity': 1,
-          'line-width': {
-            base: 8,
-            stops: [
-              [14, 12],
-              [18, 32],
-            ],
-          },
-        },
-        layout: lineLayout,
-        filter: ['!has', 'stop_id'],
-      },
-      firstSymbolId,
-    );
+function addMapLayers(map, geojson, defaultRouteColor, lineLayout) {
+  const layers = map.getStyle().layers;
+  const firstLabelLayerId = layers.find(
+    (layer) => layer.type === 'symbol' && layer.id.includes('label'),
+  )?.id;
+
+  addRouteLineShadow(map, geojson, lineLayout, firstLabelLayerId);
+  addRouteLineOutline(map, geojson, lineLayout, firstLabelLayerId);
+  addRouteLine(map, geojson, defaultRouteColor, lineLayout, firstLabelLayerId);
+  addStops(map, geojson);
+  addHighlightedStops(map, geojson);
+}
 
-    // Add route line
-    map.addLayer(
-      {
-        id: 'route-line',
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson,
+function addRouteLineShadow(map, geojson, lineLayout, firstSymbolId) {
+  map.addLayer(
+    {
+      id: 'route-line-shadow',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
+      paint: {
+        'line-color': '#000000',
+        'line-opacity': 0.3,
+        'line-width': {
+          base: 12,
+          stops: [
+            [14, 20],
+            [18, 42],
+          ],
         },
-        paint: {
-          'line-color': ['to-color', ['get', 'route_color'], defaultRouteColor],
-          'line-opacity': 1,
-          'line-width': {
-            base: 4,
-            stops: [
-              [14, 6],
-              [18, 16],
-            ],
-          },
+        'line-blur': {
+          base: 12,
+          stops: [
+            [14, 20],
+            [18, 42],
+          ],
         },
-        layout: lineLayout,
-        filter: ['!has', 'stop_id'],
       },
-      firstSymbolId,
-    );
+      layout: lineLayout,
+      filter: ['!has', 'stop_id'],
+    },
+    firstSymbolId,
+  );
+}
 
-    // Add stops
-    map.addLayer({
-      id: 'stops',
-      type: 'circle',
-      source: {
-        type: 'geojson',
-        data: geojson,
-      },
+function addRouteLineOutline(map, geojson, lineLayout, firstSymbolId) {
+  map.addLayer(
+    {
+      id: 'route-line-outline',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
       paint: {
-        'circle-color': '#fff',
-        'circle-radius': {
-          base: 1.75,
+        'line-color': '#FFFFFF',
+        'line-opacity': 1,
+        'line-width': {
+          base: 8,
           stops: [
-            [12, 4],
-            [22, 100],
+            [14, 12],
+            [18, 32],
           ],
         },
-        'circle-stroke-color': '#3f4a5c',
-        'circle-stroke-width': 2,
       },
-      filter: ['has', 'stop_id'],
-    });
+      layout: lineLayout,
+      filter: ['!has', 'stop_id'],
+    },
+    firstSymbolId,
+  );
+}
 
-    // Layer for highlighted stops
-    map.addLayer({
-      id: 'stops-highlighted',
-      type: 'circle',
-      source: {
-        type: 'geojson',
-        data: geojson,
-      },
+function addRouteLine(
+  map,
+  geojson,
+  defaultRouteColor,
+  lineLayout,
+  firstSymbolId,
+) {
+  map.addLayer(
+    {
+      id: 'route-line',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
       paint: {
-        'circle-color': '#fff',
-        'circle-radius': {
-          base: 1.75,
+        'line-color': ['to-color', ['get', 'route_color'], defaultRouteColor],
+        'line-opacity': 1,
+        'line-width': {
+          base: 4,
           stops: [
-            [12, 5],
-            [22, 125],
+            [14, 6],
+            [18, 16],
           ],
         },
-        'circle-stroke-width': 2,
-        'circle-stroke-color': '#3f4a5c',
       },
-      filter: ['==', 'stop_id', ''],
-    });
+      layout: lineLayout,
+      filter: ['!has', 'stop_id'],
+    },
+    firstSymbolId,
+  );
+}
 
-    map.on('mousemove', (event) => {
-      const features = map.queryRenderedFeatures(event.point, {
-        layers: ['stops'],
-      });
-      if (features.length > 0) {
-        map.getCanvas().style.cursor = 'pointer';
-        const stopIds = [features[0].properties.stop_id];
-        if (features[0].properties.parent_station) {
-          stopIds.push(features[0].properties.parent_station);
-        }
+function addStops(map, geojson) {
+  map.addLayer({
+    id: 'stops',
+    type: 'circle',
+    source: { type: 'geojson', data: geojson },
+    paint: {
+      'circle-color': '#ffffff',
+      'circle-radius': {
+        base: 1.75,
+        stops: [
+          [12, 4],
+          [22, 100],
+        ],
+      },
+      'circle-stroke-color': '#3f4a5c',
+      'circle-stroke-width': 2,
+    },
+    filter: ['has', 'stop_id'],
+  });
+}
 
-        highlightStop(stopIds);
-      } else {
-        map.getCanvas().style.cursor = '';
-        unHighlightStop();
-      }
-    });
+function addHighlightedStops(map, geojson) {
+  map.addLayer({
+    id: 'stops-highlighted',
+    type: 'circle',
+    source: { type: 'geojson', data: geojson },
+    paint: {
+      'circle-color': '#f8f8b9',
+      'circle-radius': {
+        base: 1.75,
+        stops: [
+          [12, 6],
+          [22, 150],
+        ],
+      },
+      'circle-stroke-width': 2,
+      'circle-stroke-color': '#3f4a5c',
+    },
+    filter: ['==', 'stop_id', ''],
+  });
+}
 
-    map.on('click', (event) => {
-      // Set bbox as 5px rectangle area around clicked point
-      const bbox = [
-        [event.point.x - 5, event.point.y - 5],
-        [event.point.x + 5, event.point.y + 5],
-      ];
-      const features = map.queryRenderedFeatures(bbox, {
-        layers: ['stops-highlighted', 'stops'],
-      });
-
-      if (!features || features.length === 0) {
-        return;
-      }
+function setupEventListeners(map, id) {
+  map.on('mousemove', (event) => handleMouseMove(event, map, id));
+  map.on('click', (event) => handleClick(event, map));
+  setupTableHoverListeners(id, map);
+}
 
-      // Get the first feature and show popup
-      const feature = features[0];
+function handleMouseMove(event, map, id) {
+  const features = map.queryRenderedFeatures(event.point, {
+    layers: ['stops'],
+  });
+  if (features.length > 0) {
+    map.getCanvas().style.cursor = 'pointer';
+    const stopIds = [features[0].properties.stop_id];
+    if (features[0].properties.parent_station) {
+      stopIds.push(features[0].properties.parent_station);
+    }
+    highlightStop(map, id, stopIds);
+  } else {
+    map.getCanvas().style.cursor = '';
+    unHighlightStop(map, id);
+  }
+}
 
-      new mapboxgl.Popup()
-        .setLngLat(feature.geometry.coordinates)
-        .setHTML(
-          getStopPopupHtml(feature, stopData[feature.properties.stop_id]),
-        )
-        .addTo(map);
-    });
+function handleClick(event, map) {
+  const bbox = [
+    [event.point.x - 5, event.point.y - 5],
+    [event.point.x + 5, event.point.y + 5],
+  ];
+  const features = map.queryRenderedFeatures(bbox, {
+    layers: ['stops-highlighted', 'stops'],
+  });
 
-    function highlightStop(stopIds) {
-      map.setFilter('stops-highlighted', [
-        'any',
-        ['in', 'stop_id', ...stopIds],
-        ['in', 'parent_station', ...stopIds],
-      ]);
+  if (!features || features.length === 0) return;
 
-      if (
-        jQuery(`#timetable_id_${id} table`).data('orientation') === 'vertical'
-      ) {
-        const columnIndexes = [];
-        const stopIdSelectors = stopIds
-          .map(
-            (stopId) =>
-              `#timetable_id_${id} table colgroup col[data-stop-id="${stopId}"]`,
-          )
-          .join(',');
-        jQuery(stopIdSelectors).each((index, col) => {
-          columnIndexes.push(
-            jQuery(`#timetable_id_${id} table colgroup col`).index(col),
-          );
-        });
+  const feature = features[0];
+  showStopPopup(map, feature);
+}
 
-        jQuery(`#timetable_id_${id} table .stop-time`).removeClass(
-          'highlighted',
-        );
-        jQuery(`#timetable_id_${id} table thead .stop-header`).removeClass(
-          'highlighted',
-        );
-        jQuery(`#timetable_id_${id} table .trip-row`).each((index, row) => {
-          jQuery('.stop-time', row).each((index, el) => {
-            if (columnIndexes.includes(index)) {
-              jQuery(el).addClass('highlighted');
-            }
-          });
-        });
+function showStopPopup(map, feature) {
+  new maplibregl.Popup()
+    .setLngLat(feature.geometry.coordinates)
+    .setHTML(getStopPopupHtml(feature, stopData[feature.properties.stop_id]))
+    .addTo(map);
+}
 
-        jQuery(`#timetable_id_${id} table thead`).each((index, thead) => {
-          jQuery('.stop-header', thead).each((index, el) => {
-            if (columnIndexes.includes(index)) {
-              jQuery(el).addClass('highlighted');
-            }
-          });
-        });
-      } else {
-        jQuery(`#timetable_id_${id} table .stop-row`).removeClass(
-          'highlighted',
-        );
-        const stopIdSelectors = stopIds
-          .map((stopId) => `#timetable_id_${id} table #stop_id_${stopId}`)
-          .join(',');
-        jQuery(stopIdSelectors).addClass('highlighted');
-      }
-    }
+function highlightStop(map, id, stopIds) {
+  map.setFilter('stops-highlighted', [
+    'any',
+    ['in', 'stop_id', ...stopIds],
+    ['in', 'parent_station', ...stopIds],
+  ]);
 
-    function unHighlightStop() {
-      map.setFilter('stops-highlighted', ['==', 'stop_id', '']);
+  highlightTimetableStops(id, stopIds);
+}
 
-      if (
-        jQuery(`#timetable_id_${id} table`).data('orientation') === 'vertical'
-      ) {
-        jQuery(`#timetable_id_${id} table .stop-time`).removeClass(
-          'highlighted',
-        );
-        jQuery(`#timetable_id_${id} table thead .stop-header`).removeClass(
-          'highlighted',
-        );
-      } else {
-        jQuery(`#timetable_id_${id} table .stop-row`).removeClass(
-          'highlighted',
-        );
-      }
-    }
+function unHighlightStop(map, id) {
+  map.setFilter('stops-highlighted', ['==', 'stop_id', '']);
+  unHighlightTimetableStops(id);
+}
 
-    // On table hover, highlight stop on map
-    jQuery('th, td', jQuery(`#timetable_id_${id} table`)).hover((event) => {
-      let stopId;
-      const table = jQuery(event.target).parents('table');
-      if (table.data('orientation') === 'vertical') {
-        var index = jQuery(event.target).index();
-        stopId = jQuery('colgroup col', table).eq(index).data('stop-id');
-      } else {
-        stopId = jQuery(event.target).parents('tr').data('stop-id');
-      }
+function highlightTimetableStops(id, stopIds) {
+  const table = jQuery(`#timetable_id_${id} table`);
+  const isVertical = table.data('orientation') === 'vertical';
+
+  if (isVertical) {
+    highlightVerticalTimetableStops(id, stopIds);
+  } else {
+    highlightHorizontalTimetableStops(id, stopIds);
+  }
+}
 
-      if (stopId === undefined) {
-        return;
+function highlightVerticalTimetableStops(id, stopIds) {
+  const table = jQuery(`#timetable_id_${id} table`);
+  const columnIndexes = [];
+  const stopIdSelectors = stopIds
+    .map(
+      (stopId) =>
+        `#timetable_id_${id} table colgroup col[data-stop-id="${stopId}"]`,
+    )
+    .join(',');
+
+  jQuery(stopIdSelectors).each((index, col) => {
+    columnIndexes.push(
+      jQuery(`#timetable_id_${id} table colgroup col`).index(col),
+    );
+  });
+
+  table.find('.stop-time, thead .stop-header').removeClass('highlighted');
+  table.find('.trip-row').each((index, row) => {
+    jQuery('.stop-time', row).each((index, el) => {
+      if (columnIndexes.includes(index)) {
+        jQuery(el).addClass('highlighted');
       }
+    });
+  });
 
-      highlightStop([stopId.toString()]);
-    }, unHighlightStop);
+  table.find('thead').each((index, thead) => {
+    jQuery('.stop-header', thead).each((index, el) => {
+      if (columnIndexes.includes(index)) {
+        jQuery(el).addClass('highlighted');
+      }
+    });
   });
+}
 
-  return map;
+function highlightHorizontalTimetableStops(id, stopIds) {
+  const table = jQuery(`#timetable_id_${id} table`);
+  table.find('.stop-row').removeClass('highlighted');
+  const stopIdSelectors = stopIds
+    .map((stopId) => `#timetable_id_${id} table #stop_id_${stopId}`)
+    .join(',');
+  jQuery(stopIdSelectors).addClass('highlighted');
+}
+
+function unHighlightTimetableStops(id) {
+  const table = jQuery(`#timetable_id_${id} table`);
+  const isVertical = table.data('orientation') === 'vertical';
+
+  if (isVertical) {
+    table.find('.stop-time, thead .stop-header').removeClass('highlighted');
+  } else {
+    table.find('.stop-row').removeClass('highlighted');
+  }
+}
+
+function setupTableHoverListeners(id, map) {
+  jQuery('th, td', jQuery(`#timetable_id_${id} table`)).hover(
+    (event) => {
+      const stopId = getStopIdFromTableCell(event.target);
+      if (stopId !== undefined) {
+        highlightStop(map, id, [stopId.toString()]);
+      }
+    },
+    () => unHighlightStop(map, id),
+  );
+}
+
+function getStopIdFromTableCell(cell) {
+  const table = jQuery(cell).closest('table');
+  if (table.data('orientation') === 'vertical') {
+    const index = jQuery(cell).index();
+    return jQuery('colgroup col', table).eq(index).data('stop-id');
+  } else {
+    return jQuery(cell).closest('tr').data('stop-id');
+  }
 }
 
 function createMaps() {
@@ -956,18 +1051,27 @@ function createMaps() {
     gtfsRealtimeUrls?.realtimeVehiclePositions?.url
   ) {
     // Popup for realtime vehicle locations
-    vehiclePopup = new mapboxgl.Popup({
+    const markerHeight = 20;
+    const markerRadius = 10;
+    const linearOffset = 15;
+    vehiclePopup = new maplibregl.Popup({
       closeOnClick: false,
       className: 'vehicle-popup',
       offset: {
-        top: [0, 10],
-        bottom: [0, -10],
-        left: [10, 0],
-        right: [-10, 0],
-        'top-left': [10, 10],
-        'top-right': [-10, 10],
-        'bottom-left': [10, -10],
-        'bottom-right': [-10, -10],
+        top: [0, 0],
+        'top-left': [0, 0],
+        'top-right': [0, 0],
+        bottom: [0, -markerHeight],
+        'bottom-left': [
+          linearOffset,
+          (markerHeight - markerRadius + linearOffset) * -1,
+        ],
+        'bottom-right': [
+          -linearOffset,
+          (markerHeight - markerRadius + linearOffset) * -1,
+        ],
+        left: [markerRadius, (markerHeight - markerRadius) * -1],
+        right: [-markerRadius, (markerHeight - markerRadius) * -1],
       },
     });