leaflet#polyline TypeScript Examples

The following examples show how to use leaflet#polyline. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: LiveAtlasPolyline.ts    From LiveAtlas with Apache License 2.0 6 votes vote down vote up
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;
	}
}
Example #2
Source File: rendering.ts    From squadlanes with GNU Affero General Public License v3.0 5 votes vote down vote up
confirmationLines: Set<Polyline> = new Set()
Example #3
Source File: EditablePolyline.tsx    From project-tauntaun with GNU Lesser General Public License v3.0 4 votes vote down vote up
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;
}
Example #4
Source File: rendering.ts    From squadlanes with GNU Affero General Public License v3.0 4 votes vote down vote up
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;
  }
}