leaflet#divIcon TypeScript Examples

FromToMarker = ({
  position,
  type,
}: {
  position: LatLngTuple;
  type: "from" | "to";
}) => {
  const classes = useStyle();
  const color = type === "from" ? classes.blue : classes.red;
  const fromIcon = divIcon({
    className: `fas fa-map-marker-alt ${classes.markerLayout} ${color}`,
  });
  return <Marker position={position} icon={fromIcon} />;
}

private createLocations(): void {

        const locationLayer = this.layers.get('locationLayer')!;
        if (locationLayer.markers.length) {
            locationLayer.markers.forEach((x) => {
                locationLayer.layer.removeLayer(x.marker);
            });
            locationLayer.markers = [];
        }

        for (const x of this.info!.locations) {
            if (x.name) {
                const pos = this.unproject([x.position[0], this.info!.worldSize - x.position[1]]);
                const { name, icon } = this.getLocationTooltip(x);

                const t = tooltip(
                    {
                        permanent: true,
                        direction: 'bottom',
                    },
                ).setContent(name);

                const m = marker(
                    pos,
                    {
                        icon: divIcon({
                            html: `<i class="fa fa-${icon} fa-lg"></i>`,
                            iconSize: [50, 50],
                            className: 'locationIcon',
                        }),
                    },
                ).bindTooltip(t);

                locationLayer.markers.push({
                    marker: m,
                    toolTip: t,
                    id: x.name,
                });

                locationLayer.layer.addLayer(m);
            }
        }

    }

private updatePlayers(players: IngameEntity[]): void {
        const layer = this.layers.get('playerLayer')!;

        // remove absent
        layer.markers
            .filter((x) => !players.find((player) => `${player.id}` === x.id))
            .forEach((x) => {
                layer.layer.removeLayer(x.marker);
            });

        for (const x of players) {

            const pos = x.position.split(' ').map((coord) => Number(coord));
            const t = tooltip(
                {
                    permanent: true,
                    direction: 'bottom',
                },
            ).setContent(x.name);

            const m = marker(
                this.unproject([pos[0], this.info!.worldSize - pos[2]]),
                {
                    icon: divIcon({
                        html: `<i class="fa fa-user fa-lg"></i>`,
                        iconSize: [50, 50],
                        className: 'locationIcon',
                    }),
                },
            ).bindTooltip(t);

            layer.markers.push({
                marker: m,
                toolTip: t,
                id: String(x.id),
            });

            layer.layer.addLayer(m);
        }
    }

private updateVehicles(vehicles: IngameEntity[]): void {
        const layerGround = this.layers.get('vehicleLayer')!;
        const layerAir = this.layers.get('airLayer')!;
        const layerSea = this.layers.get('boatLayer')!;

        // remove absent
        for (const layer of [layerGround, layerAir, layerSea]) {
            layer.markers
                .filter((x) => !vehicles.find((vehicle) => `${vehicle.id}` === x.id))
                .forEach((x) => {
                    layer.layer.removeLayer(x.marker);
                });
        }

        for (const x of vehicles) {

            const pos = x.position.split(' ').map((coord) => Number(coord));
            const t = tooltip(
                {
                    permanent: true,
                    direction: 'bottom',
                },
            ).setContent(x.type);

            let layer: LayerContainer = layerGround;
            let iconClass: string = 'fa fa-car fa-lg';

            if (x.category === 'AIR') {
                layer = layerAir;
                iconClass = 'fa fa-helicopter fa-lg';
            } else if (x.category === 'SEA') {
                layer = layerSea;
                iconClass = 'fa fa-ship fa-lg';
            }

            const m = marker(
                this.unproject([pos[0], this.info!.worldSize - pos[2]]),
                {
                    icon: divIcon({
                        html: `<i class="${iconClass}"></i>`,
                        iconSize: [50, 50],
                        className: 'locationIcon',
                    }),
                },
            ).bindTooltip(t);

            layer.markers.push({
                marker: m,
                toolTip: t,
                id: String(x.id),
            });
            layer.layer.addLayer(m);
        }
    }

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;
}