leaflet#DomEvent TypeScript Examples

onAdd() {
		const store = useStore(),
			chatButton = DomUtil.create('button',
				'leaflet-control-bottom leaflet-control-button leaflet-control-chat') as HTMLButtonElement;

		chatButton.type = 'button';
		chatButton.title = store.state.messages.chatTitle;
		chatButton.innerHTML = `
		<svg class="svg-icon">
		  <use xlink:href="#icon--chat" />
		</svg>`;

		chatButton.addEventListener('click', e => {
			store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'chat');
			e.stopPropagation();
			e.preventDefault();
		});

		//Open chat on ArrowRight from button
		DomEvent.on(chatButton,'keydown', (e: Event) => {
			if((e as KeyboardEvent).key === 'ArrowRight') {
				store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'chat', state: true});
			}
		});

		watch(store.state.ui.visibleElements, (newValue) => {
			chatButton.setAttribute('aria-expanded', newValue.has('chat').toString());
		});

		return chatButton;
	}

MapCustomControlButton: FunctionComponent<MapCustomControlButtonProps> = ({
  children,
  className = '',
  tooltip = '',
  ...other
}) => {
  const classes = useStyles();

  const innerReference = useRef(null);
  const referenceCallback = useCallback((node) => {
    if (innerReference.current) {
      // Make sure to cleanup any events/references added to the last instance
    }

    if (node) {
      // Check if a node is actually passed. Otherwise node would be null.
      // You can now do what you need to, addEventListeners, measure, etc.

      // Prevent clicking the button from affecting the map.
      DomEvent.disableClickPropagation(node).disableScrollPropagation(node);
    }

    // Save a reference to the node
    innerReference.current = node;
  }, []);

  return (
    <Tooltip title={tooltip}>
      <div ref={referenceCallback} className={clsx(classes.button, className)} {...other}>
        {children}
      </div>
    </Tooltip>
  );
}

_initLayout() {
		const className = 'leaflet-control-layers',
			container = this._container = DomUtil.create('div', className),
			section = this._section = DomUtil.create('section', className + '-list'),
			button = this._layersButton = DomUtil.create('button', className + '-toggle', container);

		DomEvent.disableClickPropagation(container);
		DomEvent.disableScrollPropagation(container);

		//Open layer list on ArrowRight from button
		DomEvent.on(button,'keydown', (e: Event) => {
			if((e as KeyboardEvent).key === 'ArrowRight') {
				store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'layers', state: true});
			}
		});

		DomEvent.on(container, 'keydown', (e: Event) => {
			//Close layer list on ArrowLeft from within list
			if((e as KeyboardEvent).key === 'ArrowLeft') {
				e.preventDefault();
				store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'layers', state: false});
				nextTick(() => button.focus());
			}

			const elements = Array.from(container.querySelectorAll('input')) as HTMLElement[];
			handleKeyboardEvent(e as KeyboardEvent, elements);
		});
		DomEvent.on(button,'click', () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'layers'));

		section.style.display = 'none';

		button.title = store.state.messages.layersTitle;
		button.setAttribute('aria-expanded', 'false');
		button.innerHTML = `
			<svg class="svg-icon" aria-hidden="true">
			  <use xlink:href="#icon--layers" />
			</svg>`;


		//Use vuex track expanded state
		watch(store.state.ui.visibleElements, (newValue) => {
			if(newValue.has('layers') && !this.visible) {
				this.expand();
			} else if(this.visible && !newValue.has('layers')) {
				this.collapse();
			}

			this.visible = store.state.ui.visibleElements.has('layers');
		});

		watch(store.state.messages, (newValue) => (button.title = newValue.layersTitle));//

		this.visible = store.state.ui.visibleElements.has('layers');

		if (this.visible) {
			this.expand();
		}

		this._baseLayersList = DomUtil.create('div', className + '-base', section);
		this._separator = DomUtil.create('div', className + '-separator', section);
		this._overlaysList = DomUtil.create('div', className + '-overlays', section);

		container.appendChild(section);

		window.addEventListener('resize', () => this.handleResize());
		this.handleResize();
	}

// noinspection JSUnusedGlobalSymbols
	_addItem(obj: any) {
		const container = obj.overlay ? this._overlaysList : this._baseLayersList,
			item = document.createElement('label'),
			label = document.createElement('span'),
			checked = this._map!.hasLayer(obj.layer);

		let input;

		item.className = 'layer checkbox';

		if (obj.overlay) {
			input = document.createElement('input');
			input.type = 'checkbox';
			input.className = 'leaflet-control-layers-selector';
			input.defaultChecked = checked;
		} else {
			// @ts-ignore
			input = super._createRadioElement('leaflet-base-layers_' + Util.stamp(this), checked);
		}

		input.layerId = Util.stamp(obj.layer);
		this._layerControlInputs!.push(input);
		label.textContent = obj.name;

		// @ts-ignore
		DomEvent.on(input, 'click', (e: LeafletEvent) => super._onInputClick(e), this);

		item.appendChild(input);
		item.insertAdjacentHTML('beforeend',  `
		<svg class="svg-icon" aria-hidden="true">
	  		<use xlink:href="#icon--checkbox" />
		</svg>`);
		item.appendChild(label);

		container!.appendChild(item);

		// @ts-ignore
		super._checkDisabledLayers();
		return label;
	}

constructor(options: ControlOptions) {
		super(options);

		this._button = DomUtil.create('button',
				'leaflet-control-bottom leaflet-control-button leaflet-control-login') as HTMLButtonElement;

		this._button.type = 'button';

		this._button.addEventListener('click', async e => {
			e.stopPropagation();
			e.preventDefault();

			await this.handleClick();
		});

		//Open login on ArrowRight from button
		DomEvent.on(this._button,'keydown', async (e: Event) => {
			if ((e as KeyboardEvent).key === 'ArrowRight') {
				e.stopPropagation();
				e.preventDefault();

				await this.handleClick();
			}
		});

		watch(this.loggedIn, () => {
			this.update();
		});

		const visibleModal = computed(() => this.store.state.ui.visibleModal);

		watch(visibleModal, (newValue, oldValue) => {
			this._button.setAttribute('aria-expanded', (newValue === 'login').toString());

			if(this._map && !newValue && oldValue === 'login') {
				this._button.focus();
			}
		});

		this.update();
	}