leaflet#Marker TypeScript Examples

/**
   * returns a L.marker list according to mid points defined in IotPath
   */
  public getMids (): Marker[] {
    this.mids?.forEach(pos => pos.remove())
    if (this.data.positions !== undefined) {
      this.data.positions.forEach(pos => {
        const newMarker = marker(pos, { icon: getPathIcon(PathIconType.mid, this.config), interactive: false })
        this.mids.push(newMarker)
      })
    }
    return this.mids
  }

/**
   * returns a L.marker list according to mid points defined in IotPath
   */
  public getMids (): Marker[] {
    this.mids?.forEach(pos => pos.remove())
    if (this.data.positions !== undefined) {
      this.data.positions.forEach(pos => {
        const newMarker = marker(pos, { icon: getPathIcon(PathIconType.mid, this.config), interactive: false })
        this.mids.push(newMarker)
      })
    }
    return this.mids
  }

addLayer(layer: Layer) {
		const id = this.getLayerId(layer);

		this._layers[id] = layer;

		if (layer instanceof Marker) {
			layer.options.pane = `${this.options.id}-markers`;
		} else if (layer instanceof Path) {
			layer.options.pane = `vectors`;
		}

		const zoomLimited = LiveAtlasLayerGroup._isLayerZoomLimited(layer);

		if (zoomLimited) {
			this._zoomLimitedLayers.add(layer);
		}

		if (this._map) {
			//If layer is zoom limited, only add to map if it should be visible
			if (zoomLimited) {
				if (LiveAtlasLayerGroup._isLayerVisible(layer, this._map.getZoom())) {
					this._addToMap(layer);
				}
			} else {
				this._addToMap(layer);
			}
		}

		return this;
	}

private mids: Marker[] = []

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

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

    }

/**
   * returns a L.marker displayed on the end point of the path
   */
  public getEnd (): Marker {
    this.end?.remove()
    this.end = marker(this.data.points[this.data.points.length - 1], { icon: getPathIcon(PathIconType.end, this.config), interactive: false })
    return this.end
  }

/**
   * returns a L.marker displayed on the start point of the path
   */
  public getStart (): Marker {
    this.start?.remove()
    this.start = marker(this.data.points[0], { icon: getPathIcon(PathIconType.start, this.config), interactive: false })
    return this.start
  }

private createMapLayersWithLocationMarkers(proofs: Proof[]) {
    return proofs
      .filter(proof => (proof.location.latitude && proof.location.longitude))
      .map(proof => marker([proof.location.latitude, proof.location.longitude]));
  }

private end: Marker

private start: Marker

/**
   * returns a L.marker displayed on the end point of the path
   */
  public getEnd (): Marker {
    this.end?.remove()
    this.end = marker(this.data.points[this.data.points.length - 1], { icon: getPathIcon(PathIconType.end, this.config), interactive: false })
    return this.end
  }

/**
   * returns a L.marker displayed on the start point of the path
   */
  public getStart (): Marker {
    this.start?.remove()
    this.start = marker(this.data.points[0], { icon: getPathIcon(PathIconType.start, this.config), interactive: false })
    return this.start
  }

export class PlayerMarker extends Marker {
	declare options: PlayerMarkerOptions;
	declare _icon: HTMLElement | null;

	private readonly _PlayerIcon: PlayerIcon;
	private readonly _player: LiveAtlasPlayer;
	private _playerUnwatch?: WatchStopHandle;
	private _imageUrlUnwatch?: WatchStopHandle;

	constructor(player: LiveAtlasPlayer, options: PlayerMarkerOptions) {
		super(new LatLng(0, 0), options);
		this._player = player;

		this._PlayerIcon = options.icon = new PlayerIcon(player, {
			imageSize: options.imageSize,
			showHealth: options.showHealth,
			showArmor: options.showArmor,
			showYaw: options.showYaw,
			compact: options.compact,
		});

		Util.setOptions(this, options);
	}

	onAdd(map: Map) {
		const imageUrl = computed(() => useStore().state.components.players.imageUrl);

		this._playerUnwatch = watch(this._player, () => this._PlayerIcon.update(), {deep: true});
		this._imageUrlUnwatch = watch(imageUrl, () => nextTick(() => this._PlayerIcon.updateImage()));

		return super.onAdd(map);
	}

	onRemove(map: Map): this {
		if(this._playerUnwatch) {
			this._playerUnwatch();
		}

		if(this._imageUrlUnwatch) {
			this._imageUrlUnwatch();
		}

		if(this._icon) {
			this._PlayerIcon.detach();
		}

		return super.onRemove(map);
	}

	// noinspection JSUnusedGlobalSymbols
	_resetZIndex() {
		//Don't change the zindex
	}
}

export class GenericMarker extends Marker {
	declare options: GenericMarkerOptions;

	constructor(latLng: LatLngExpression, options: LiveAtlasPointMarker) {
		super(latLng, {});

		this.options.icon = new GenericIcon({
			iconUrl: options.iconUrl,
			label: options.tooltipHTML || options.tooltip,
			iconSize: options.iconSize,
			iconAnchor: options.iconAnchor,
			isHtml: !!options.tooltipHTML,
		});

		this.options.maxZoom = options.maxZoom;
		this.options.minZoom = options.maxZoom;
	}

	// noinspection JSUnusedGlobalSymbols
	_resetZIndex() {
		//Don't change the zindex
	}

	getIcon(): Icon.Default {
		return this.options.icon as Icon.Default;
	}

	createLabel(): void {
		this.options.icon.createLabel();
	}

	removeLabel(): void {
		this.options.icon.createLabel();
	}

	onRemove(map: Map): this {
		this.options.icon.removeLabel();

		super.onRemove(map);

		return this;
	}
}

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