@maplibre/maplibre-gl-leaflet
Version:
Supports adding Maplibre GL Web to a Leaflet Map as a layer
87 lines (74 loc) • 3.16 kB
HTML
<html>
<head>
<title>WebGL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<!-- Maplibre GL -->
<link href="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css" rel='stylesheet' />
<script src="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"></script>
</head>
<body>
<div id="map"></div>
<script src="../leaflet-maplibre-gl.js"></script>
<script>
var leafletMap = L.map('map').setView([38.912753, -77.032194], 2);
L.marker([38.912753, -77.032194])
.bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
.addTo(leafletMap)
.openPopup();
var gl = L.maplibreGL({
padding: 0.1,
// get your own MapTiler token at https://cloud.maptiler.com/ or use MapBox style
style: 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
interactive: true
}).addTo(leafletMap);
var maplibreMap = gl.getMaplibreMap();
maplibreMap.on('load', () => {
console.log('MAPLIBRE map loaded');
// let's see events on maplibre map
maplibreMap.on('mousemove', () => { console.log('MAPLIBRE mousemove') });
maplibreMap.on('mouseenter', () => { console.log('MAPLIBRE mouseenter') });
maplibreMap.on('mouseout', () => { console.log('MAPLIBRE mouseout') });
maplibreMap.on('mouseleave', () => { console.log('MAPLIBRE mouseleave') });
maplibreMap.on('mouseover', () => { console.log('MAPLIBRE mouseover') });
// let's add some layer and fire events on it
maplibreMap.addSource('states', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
});
maplibreMap.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': '#627BC1',
'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0.5 ]
}
});
maplibreMap.on('mouseenter', 'state-fills', (e) => {console.log('state-fills mouseenter', e) });
maplibreMap.on('mousemove', 'state-fills', (e) => {console.log('state-fills mousemove', e) });
maplibreMap.on('mouseout', 'state-fills', (e) => {console.log('state-fills mouseout', e) });
maplibreMap.on('mouseleave', 'state-fills', (e) => {console.log('state-fills mouseleave', e) });
});
// now let's see on leaflet map events
// SPOILER: they are works
leafletMap.on('mousemove', () => { console.log('LEAFLET mousemove') });
leafletMap.on('mouseenter', () => { console.log('LEAFLET mouseenter') });
leafletMap.on('mouseout', () => { console.log('LEAFLET mouseout') });
leafletMap.on('mouseleave', () => { console.log('LEAFLET mouseleave') });
leafletMap.on('mouseover', () => { console.log('LEAFLET mouseover') });
</script>
</body>
</html>