D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
d3noob
Full window
Github gist
Aircraft markers on a map
A second demonstration file showing multiple aircraft locations.
<!DOCTYPE html> <html> <head> <title>Simple Leaflet Map</title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> <style> body { padding: 0; margin: 0; } html, body, #map { height: 100%; width: 100%; } </style> </head> <body> <div id="map"></div> <script src="https://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script> <script> var planes = [ ["7C6B07",-40.99497,174.50808], ["7C6B38",-41.30269,173.63696], ["7C6CA1",-41.49413,173.5421], ["7C6CA2",-40.98585,174.50659], ["C816BF",-41.49202,174.63031], ["C81845",-41.49415,174.63209], ["C81B14",-41.3172,174.80762], ["C81B20",-41.44762,174.59853], ["C81D8E",-41.27454,174.80988], ["C81D9D",-40.93163,173.81726], ["C81DD5",-41.53768,174.48065], ["C81E27",-41.30814,174.80817], ["C81E2C",-40.97438,174.4989], ["C82009",-41.5183,174.78081], ["C82081",-41.42079,173.5783], ["C820AB",-42.08414,173.96632], ["C820B6",-41.51285,173.53274] ]; var map = L.map('map').setView([-41.3058, 174.82082], 9); mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© ' + mapLink + ' Contributors', maxZoom: 18, }).addTo(map); for (var i = 0; i < planes.length; i++) { marker = new L.marker([planes[i][1],planes[i][2]]) .bindPopup(planes[i][0]) .addTo(map); } </script> </body> </html>