leaflet#Marker TypeScript Examples

The following examples show how to use leaflet#Marker. 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: iot-map-path.ts    From IOT-Map-Component with MIT License 6 votes vote down vote up
/**
   * 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
  }
Example #2
Source File: iot-map-path.ts    From IOT-Map-Component with MIT License 6 votes vote down vote up
/**
   * 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
  }
Example #3
Source File: LiveAtlasLayerGroup.ts    From LiveAtlas with Apache License 2.0 6 votes vote down vote up
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;
	}
Example #4
Source File: iot-map-path.ts    From IOT-Map-Component with MIT License 5 votes vote down vote up
private mids: Marker[] = []
Example #5
Source File: map.component.ts    From dayz-server-manager with MIT License 5 votes vote down vote up
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);
        }
    }
Example #6
Source File: map.component.ts    From dayz-server-manager with MIT License 5 votes vote down vote up
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);
        }
    }
Example #7
Source File: map.component.ts    From dayz-server-manager with MIT License 5 votes vote down vote up
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);
            }
        }

    }
Example #8
Source File: iot-map-path.ts    From IOT-Map-Component with MIT License 5 votes vote down vote up
/**
   * 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
  }
Example #9
Source File: iot-map-path.ts    From IOT-Map-Component with MIT License 5 votes vote down vote up
/**
   * 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
  }
Example #10
Source File: map.component.ts    From mylog14 with GNU General Public License v3.0 5 votes vote down vote up
private createMapLayersWithLocationMarkers(proofs: Proof[]) {
    return proofs
      .filter(proof => (proof.location.latitude && proof.location.longitude))
      .map(proof => marker([proof.location.latitude, proof.location.longitude]));
  }
Example #11
Source File: iot-map-path.ts    From IOT-Map-Component with MIT License 5 votes vote down vote up
private end: Marker
Example #12
Source File: iot-map-path.ts    From IOT-Map-Component with MIT License 5 votes vote down vote up
private start: Marker
Example #13
Source File: iot-map-path.ts    From IOT-Map-Component with MIT License 5 votes vote down vote up
/**
   * 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
  }
Example #14
Source File: iot-map-path.ts    From IOT-Map-Component with MIT License 5 votes vote down vote up
/**
   * 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
  }
Example #15
Source File: PlayerMarker.ts    From LiveAtlas with Apache License 2.0 5 votes vote down vote up
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
	}
}
Example #16
Source File: GenericMarker.ts    From LiveAtlas with Apache License 2.0 5 votes vote down vote up
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;
	}
}
Example #17
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;
}