Using MapsGL with LeafletJS
This example demonstrates using MapsGL with the Leaflet (opens in a new tab) mapping library.
Loading map view...
leaflet.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MapsGL SDK - Using MapsGL with Leaflet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@{% $versions.leaflet.current %}/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@{% $versions.leaflet.current %}/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script defer src="{% $paths.sdk %}"></script>
<style>
#map {
height: 600px;
margin: 30px auto;
width: 1200px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.addEventListener('load', () => {
// create the Leaflet map instance
const map = L.map('map').setView([40, -85.5], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// create the account
const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
// create the Leaflet Map Controller
const controller = new aerisweather.mapsgl.LeafletMapController(map, { account });
controller.on('load', () => {
// do stuff, like add weather layers
controller.addWeatherLayer('radar');
});
});
</script>
</body>
</html>