HTML Animation Example Use our AMP Visualizer to add a radar animation of the past 3 hours: 04/23/2022 03:16 PM Here we add the radar animation in the ‘aerismap’ div: var ampAnimation = new AerisMaps.Visualizer("#aerismap", { loc: "minneapolis,mn", keys: { id: '[client_id]', secret: '[client_key]' }, autoplay: true, map: { zoom: 5, size: { width: 500, height: 300 }, layers: ["flat","radar","admin"] }, animation: { from: -3 * 3600, duration: 2 } }); JavaScript Interactive Map Example via Leaflet Looking for interactive maps? AMP easily integrates with popular libraries such as Leaflet: + − Leaflet | © OpenStreetMap contributors, ©AerisWeather With the above example we create a map within the aerismap div tag, add an Open Street Maps (OSM) base map with an AMP Radar layer on top: var map = L.map('aerismap').setView([44.96, -93.27], 5); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); L.tileLayer('https://maps.aerisapi.com/[client_id]_[client_key]/radar/{z}/{x}/{y}/current.png', { subdomains: '1234', attribution: '©AerisWeather', }).addTo(map); JavaScript Alternatively, an interactive map using AerisWeather Map layers for the base and overlays too: + − Leaflet | ©AerisWeather var map = L.map('aerismap').setView([44.96, -93.27], 5); L.tileLayer('https://maps.aerisapi.com/[client_id]_[client_key]/flat,radar,admin/{z}/{x}/{y}/current.png', { subdomains: '1234', attribution: '©AerisWeather', }).addTo(map); JavaScript AerisWeather's Interactive Map App Example Need a full featured interactive map with animation and other options? Try our AerisWeather Javascript SDK: + − Leaflet | © OpenStreetMap contributors, Weather data © AerisWeather Radar 3:55 PM Sat, Apr 23 Sat Apr 23 2:00 2:30 3:00 3:30 Legends Radar - Rain Radar - Ice Radar - Snow const aeris = new AerisWeather('[client_id]', '[client_secret]'); const utils = aeris.utils; aeris.apps().then((apps) => { const map = new apps.InteractiveMapApp('#app', { map: { strategy: 'leaflet', zoom: 4, layers: 'radar' }, panels: { layers: { buttons: [{ id: 'radar', value: 'radar:80', title: 'Radar' }] }, search: { position: { translate: {x: -50} } } } }); }); JavaScript Mobile Integration Looking for integration within mobile applications? Check out AerisWeather Mapping usage within our Android and iOS SDKs: Mobile Example Image Get Started Today! Check out the map builder for quick map creation, review our growing list of available layers or learn more with via our Getting Started section. Start mapping today with a free developer account! Last modified: July 30, 2021 var ampAnimation = new AerisMaps.Visualizer("#aerismap", { loc: "Vieux Boucau,fr", keys: { id: '[hb5bWsi7RK6p92XeId0Wo]', secret: '[client_keybx9CKPiu8kpVosSbyBGeNjEbISUskpKx8qzxC7Sy]' }, autoplay: true, map: { zoom: 5, size: { width: 500, height: 300 }, layers: ["flat","radar","admin"] }, animation: { from: -3 * 3600, duration: 2 } });