leaflet#Polyline TypeScript Examples

export default class LiveAtlasPolyline extends Polyline {
	declare options: LiveAtlasPolylineOptions;

	constructor(latlngs: LatLngExpression[] | LatLngExpression[][], option: LiveAtlasPathMarker) {
		super(latlngs, option.style);
		this.options.minZoom = option.minZoom;
		this.options.maxZoom = option.maxZoom;
	}
}

confirmationLines: Set<Polyline> = new Set()

function editablePolylineCtor(map: any, props: EditablePolylineProps) {
  const {
    color,
    stroke,
    weight,
    opacity,
    dashArray,
    onPositionInserted,
    onPositionModified,
    onPositionRemoved,
    onPositionClicked
  } = props;
  const positions = props.positions as LatLng[];

  const drawMarkers = props.drawMarkers !== undefined ? props.drawMarkers : true;
  const drawMidmarkers = props.drawMidmarkers !== undefined ? props.drawMidmarkers : true;
  const disableWpZero = props.disableWpZero !== undefined ? props.disableWpZero : false;

  let polyline: Polyline | null = null;
  let markers = [] as Marker[];
  let mid_markers = [] as Marker[];
  let dragging = false;

  const onDragStart = () => {
    dragging = true;
  };

  const onDrag = (index: number, e: any) => {
    if (polyline === null) return;

    const polylineLatLngs = polyline.getLatLngs();
    polylineLatLngs[index] = e.target._latlng;
    positions[index].lat = e.target._latlng.lat;
    positions[index].lng = e.target._latlng.lng;
    polyline.setLatLngs(polylineLatLngs);
    if (index !== markers.length - 1) {
      updateMidMarker(index);
    }
    if (index !== 0) {
      updateMidMarker(+index - 1);
    }
  };

  const onContextMenu = (index: number, e: any) => {
    if (markers.length < 3) {
      return;
    }

    if (disableWpZero && index === 0) {
      return;
    }

    positions.splice(index, 1);
    createMarkers();
    createPolyline();

    onPositionRemoved?.(index);
  };

  const onMidDragStart = (index: number, e: any) => {
    if (polyline === null) return;

    const polylineLatLngs = polyline.getLatLngs();
    polylineLatLngs.splice(index + 1, 0, e.target._latlng);
    polyline.setLatLngs(polylineLatLngs);
  };

  const onMidDrag = (index: number, e: any) => {
    if (polyline === null) return;

    const polylineLatLngs = polyline.getLatLngs();
    polylineLatLngs[index + 1] = e.target._latlng;
    polyline.setLatLngs(polylineLatLngs);
  };

  const onMidDragEnd = (index: number, e: any) => {
    const latlng = e.target._latlng;
    positions.splice(index + 1, 0, latlng);
    createMarkers();

    onPositionInserted?.(index + 1, latlng);
  };

  const updateMidMarker = (index: number) => {
    if (!drawMidmarkers) {
      return;
    }

    const a = markers[+index].getLatLng();
    const b = markers[+index + 1].getLatLng();
    const mid = new LatLng((a.lat + b.lat) / 2.0, (a.lng + b.lng) / 2.0);
    mid_markers[index].setLatLng(mid);
  };

  const onMarkerClick = (index: number, e: any) => {
    if (dragging) {
      dragging = false;
      return;
    }

    if (e.originalEvent.button === 0) {
      onPositionClicked?.(index);
    }
  };

  const clearMarkers = () => {
    markers.forEach(m => map.removeLayer(m));
    markers = [];
    mid_markers.forEach(m => map.removeLayer(m));
    mid_markers = [];
  };

  const clearPolyline = () => {
    if (polyline !== null) {
      map.removeLayer(polyline);
    }
  };

  const createPolyline = () => {
    clearPolyline();

    polyline = new Polyline(positions, {
      color: color,
      weight: weight,
      opacity: opacity,
      interactive: false,
      stroke: stroke,
      dashArray: dashArray
    }).addTo(map);
  };

  const createMarkers = () => {
    clearMarkers();

    if (!drawMarkers) {
      return;
    }

    const markerIcon = divIcon({ className: 'pl-marker-icon' });
    for (const index in positions) {
      const index_num = +index;
      const isAtWpZeroAndDisabled = disableWpZero && index_num === 0;
      markers[index_num] = new Marker(positions[index_num], {
        draggable: !isAtWpZeroAndDisabled,
        icon: markerIcon
      }).addTo(map);

      if (!isAtWpZeroAndDisabled) {
        markers[index_num].on('dragstart', onDragStart);
        markers[index_num].on('dragend', e => onPositionModified?.(index_num, e.target._latlng));
        markers[index_num].on('drag', e => onDrag(index_num, e));
        markers[index_num].on('contextmenu', e => onContextMenu(index_num, e));
      }
      markers[index_num].on('mouseup', e => onMarkerClick(index_num, e));
    }

    if (drawMidmarkers) {
      const midMarkerIcon = divIcon({ className: 'pl-mid-marker-icon' });
      for (let index = 0; index < positions.length - 1; ++index) {
        const index_const = +index;
        const a = positions[index_const];
        const b = positions[index_const + 1];
        const mid = new LatLng((a.lat + b.lat) / 2.0, (a.lng + b.lng) / 2.0);
        mid_markers[index_const] = new Marker(mid, { draggable: true, icon: midMarkerIcon }).addTo(map);
        mid_markers[index_const].on('dragstart', e => onMidDragStart(index_const, e));
        mid_markers[index_const].on('drag', e => onMidDrag(index_const, e));
        mid_markers[index_const].on('dragend', e => onMidDragEnd(index_const, e));
      }
    }
  };

  const dtor = () => {
    clearMarkers();
    clearPolyline();
  };

  // Ctor
  clearPolyline();
  clearMarkers();

  createPolyline();
  createMarkers();

  return dtor;
}

export function redraw() {
  // set default (hidden) rendering setting for all CPs
  circleMarkerByCapturePoint.forEach((cm) => {
    renderInfos.set(cm, new CPRenderInfo());
  });

  // upgrade CPRenderInfo as far as possible for every point
  if (mapData.ownMain !== null) {
    determineCPPossibilities();
  } else {
    // if no main base is selected, use special treatment to show both
    mapData.mains.forEach((mainCp) => {
      renderInfos
        .get(circleMarkerByCapturePoint.get(mainCp)!)!
        .upgrade(CLR_MAIN_BASE, null, null, CLR_PRIORITY.MAIN_BASE);
    });
  }

  // Update all circle markers
  renderInfos.forEach((rI, cm) => {
    const cp = capturePointByCircleMarker.get(cm)!;
    // remove hidden CPs and re-add previously hidden but not visible CPs
    if (!rI.visible) {
      // hide circlemarker
      cm.off("click");
      cm.remove();
      return;
    } else if (!map!.hasLayer(cm)) {
      cm.addTo(map!);
      cm.on("click", (ev) => {
        handleConfirmationClick(cp);
      });
    }

    // delete old tooltip
    cm.closeTooltip().unbindTooltip();

    // concat lane labels
    let laneTooltip = Array.from(rI.laneLabels)
      .map(([lane, depth]) => `${depth}${lane.name[0]}`)
      .join(",");

    // hide lane label for
    // - main bases
    // - confirmed points
    // - layers with just one lane
    if (
      mapData.lanes.size === 1 ||
      mapData.mains.has(cp) ||
      laneTooltip === ""
    ) {
      laneTooltip = "&nbsp";
    }

    // create new tooltip
    cm.bindTooltip(
      `<div class="cpTooltipName">${cp.displayName}</div>` +
        `<div class="cpTooltipDepth">${rI.centerNumber || "&nbsp"}</div>` +
        `<div class="cpTooltipLanes">${laneTooltip}</div>`,
      {
        permanent: true,
        direction: "top",
        opacity: 1.0,
        className: "cpTooltip",
        pane: "cpTooltip",
        offset: [0, 50],
      }
    ).openTooltip();

    // set correct color
    cm.setStyle({
      color: rI.color,
      opacity: 1.0,
      interactive: true,
      fill: true,
    });

    cm.redraw();
  });

  // draw confirmation line
  // first, remove line
  confirmationLines.forEach((line) => {
    line.remove();
  });

  // go through confirmation line and add a line segment between all points
  let cp = mapData.ownMain;
  let prev: CapturePoint | null = null;
  while (cp !== null) {
    if (prev !== null) {
      // only connect neighbouring CPs when both are confirmed or mandatory
      const line = polyline([prev.pos, cp.pos], {
        color: "rgb(102,202,193)",
        pane: "confirmationLines",
      }).addTo(map!);
      confirmationLines.add(line);
    }
    prev = cp;
    cp = cp.confirmedFollower;
  }
}