---
title: "Map events in Leaflet | Leaflet"
description: "Handle map events in Leaflet for interactive and responsive applications."
---
# Map events in Leaflet
This example shows how to handle events of both the Leaflet map and the L.maptiler.maptilerLayer map together with a vector tiles layer. Discover how to incorporate interactivity and responsiveness into your map applications.
### NPM module setup
```bash
npm install --save @maptiler/leaflet-maptilersdk leaflet
```
#### main.js
```js
import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const leafletMap = L.map('map').setView([38.912753, -77.032194], 4);
const mtLayer = new MaptilerLayer({
apiKey: key,
style: MapStyle.STREETS, // optional
interactive: true
}).addTo(leafletMap);
const maptilerMap = mtLayer.getMaptilerSDKMap();
// control that shows events info
const info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.events = {};
return this._div;
};
info.update = function (event) {
const currentevents = this.events;
this.events = {...currentevents, ...event};
this._div.innerHTML = `
Last Leaflet event: ${this.events.leaflet || ""}
Last MapTiler SDK event: ${this.events.sdk || ""}
Last Vector layer event: ${this.events.layer || ""}
`;
};
info.addTo(leafletMap);
maptilerMap.on('load', () => {
info.update({sdk:'load'});
// let's see events on MapTiler SDK map
maptilerMap.on('mousemove', () => { info.update({sdk:'mousemove'}) });
maptilerMap.on('mouseenter', () => { info.update({sdk:'mouseenter'}) });
maptilerMap.on('mouseout', () => { info.update({sdk:'mouseout'}) });
maptilerMap.on('mouseleave', () => { info.update({sdk:'mouseleave'}) });
maptilerMap.on('mouseover', () => { info.update({sdk:'mouseover'}) });
// let's add some layer and fire events on it
maptilerMap.addSource('states', {
'type': 'geojson',
'data': 'https://docs.maptiler.com/sdk-js/assets/us_states.geojson'
});
maptilerMap.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': '#627BC1',
'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0.5 ]
}
});
maptilerMap.on('mouseenter', 'state-fills', (e) => {info.update({layer:'mouseenter'}) });
maptilerMap.on('mouseleave', 'state-fills', (e) => {info.update({layer:'mouseleave'}) });
});
// now let's see on leaflet map events
leafletMap.on('mousemove', () => { info.update({leaflet:'mousemove'}) });
leafletMap.on('mouseenter', () => { info.update({leaflet:'mouseenter'}) });
leafletMap.on('mouseout', () => { info.update({leaflet:'mouseout'}) });
leafletMap.on('mouseleave', () => { info.update({leaflet:'mouseleave'}) });
leafletMap.on('mouseover', () => { info.update({leaflet:'mouseover'}) });
```
#### index.html
```html
Map events in Leaflet | NPM example
```
#### style.css
```css
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
```
### Basic JavaScript setup
```html
Vector Tiles in Leaflet JS
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.