I’m currently working on creating a map using an Esri feature layer, along with the Windy API for weather data visualization. I’m facing an issue where the Esri feature layer does not scale down as I zoom out on the map, while the Windy map adjusts properly. Or, the opposite will happen if I hover over a point on the feature layer and zoom, the feature layer will change size, but not the Windy map.
Here’s my current code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Map Tiler, Esri, Windy</title>
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet-vector.js"></script>
<script src="https://js.arcgis.com/4.24/"></script>
<!-- Load Windy API -->
<script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#windy {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 1; // To ensure the Windy map is seen above basemap and below feature layer
}
</style>
</head>
<body>
<div id="map"></div>
<div id="windy"></div>
<script>
// Initialize Leaflet map
const map = L.map("map").setView([47.22231670231114, -122.44999808745531], 10);
// Initialize Windy API
let windyMap; // Variable to hold the Windy map instance
function initWindy() {
windyInit({
key: 'xxxxxxxx',
lat: 47.22231670231114, // Default latitude
lon: -122.44999808745531, // Default longitude
zoom: 10 // Default zoom level
}).then(function (windy) {
windyMap = windy; // Save the Windy map instance
console.log('Windy map initialized');
// Sync Windy zoom and center with Leaflet
map.on('zoomend moveend', function () {
const center = map.getCenter();
const zoomLevel = map.getZoom();
windyMap.map.setCenter([center.lat, center.lng]);
windyMap.map.setZoom(zoomLevel);
});
}).catch(function (error) {
console.error('Error initializing Windy API', error);
});
}
// Add ESRI Feature Layer to Leaflet map
L.esri.featureLayer({
url: "xxxxxxxx",
}).addTo(map);
// Wait until the Windy library is fully loaded
window.onload = function() {
initWindy();
};
</script>
</body>
</html>
Even though the Windy map zooms in and out correctly, the Esri feature layer remains the same size and does not seem to respond to the zoom changes.
How do I fix it?
I am very new to coding / development.
