"Real-Time Flights Map (by AirLabs.Co)"
Bootstrap 4.1.1 Snippet by airlabs

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" crossorigin="" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" crossorigin="" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script type="text/javascript">
// follow to get your api key
var base_url = "https://airlabs.co/";
var api_key = "YOUR-API-KEY";
$(document).ready(function () {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
var mymap = L.map('mapid').setView([51.76696254499177, -1.2647357121383023], 5);
L.tileLayer('http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}', {
attribution : false, zoomControl: false, draggable: false, interactive: false, subdomains: 'abcd'
}).addTo(mymap);
var getIcon = function(dir, state) {
var color = (state && state === 'active' ? '42ba96' : '335eea');
var border = '#ffffff';
var svg = '<svg id="plane_21" height="640" style="transform:rotate('+(+dir||0)+'deg)" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m321.66 609.69c57.26 14.18 89.07 22.05 95.44 23.63 5.72 1.55 11.03-2.07 11.88-6.54.7-1.25.7-1.25.14-3.21-.08-2.51-.71-22.61-.79-25.13.15-3.21-1.66-5.86-4.17-7.26-7.36-5.1-66.25-45.86-73.61-50.96-2.51-1.4-3.62-5.31-3.47-8.52.77-18.5 6.97-166.45 7.75-184.95-.41-5.17 5.6-10.04 10.07-9.19 1.25.7 3.21.14 3.21.14 25.35 11.19 228.21 100.7 253.57 111.89 5.02 2.8 11.58-.12 13.13-5.84.7-1.26 1.4-2.51.85-4.47-.12-4.51-1.06-40.58-1.17-45.09.14-3.21-1.67-5.87-4.18-7.27-26.57-19.93-239.12-179.36-265.68-199.29-2.51-1.4-4.32-4.06-4.18-7.27-.47-46.34-3.27-112.1-4.65-124.39-1.02-48.3-70.31-95.19-79.17 15.07-.59 12.84.96 77.9 3.27 112.1.55 1.96-.85 4.47-3.5 6.28-26.54 20.41-238.81 183.72-265.35 204.13-1.4 2.51-2.8 5.02-2.94 8.23-.01 4.44-.08 39.96-.09 44.4-1.54 5.72 2.78 9.77 9.2 10.06 1.25.7 3.21.15 3.91-1.1 25.43-11.65 228.86-104.85 254.28-116.5 4.62-2.36 10.34-.82 12 5.05.55 1.96.55 1.96 1.11 3.91.7 18.5 6.34 166.48 7.04 184.98-.14 3.21-1.54 5.72-4.9 8.78-7.38 5.27-66.43 47.37-73.81 52.63-2.65 1.81-4.05 4.32-4.2 7.53-.05 2.44-.42 21.98-.46 24.43.4 5.16 4.02 10.47 9.19 10.07 1.25.7 1.95-.56 3.21.14 6.47-1.76 38.83-10.59 97.07-26.47z"/></defs><use fill="#'+color+'" xlink:href="#a" stroke="'+border+'" stroke-width="2%" /><use fill="none" xlink:href="#a"/></svg>';
return L.icon({
iconUrl : 'data:image/svg+xml;base64,' + btoa(svg),
iconSize : [20, 20, dir],
iconAnchor : [10, 10, dir]
});
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function() {
// save these original methods before they are overwritten
var proto_initIcon = L.Marker.prototype._initIcon;
var proto_setPos = L.Marker.prototype._setPos;
var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');
L.Marker.addInitHook(function () {
var iconOptions = this.options.icon && this.options.icon.options;
var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
if (iconAnchor) {
iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
}
this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom' ;
this.options.rotationAngle = this.options.rotationAngle || 0;
// Ensure marker keeps rotated during dragging
this.on('drag', function(e) { e.target._applyRotation(); });
});
L.Marker.include({
_initIcon: function() {
proto_initIcon.call(this);
},
_setPos: function (pos) {
proto_setPos.call(this, pos);
this._applyRotation();
},
_applyRotation: function () {
if(this.options.rotationAngle) {
this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = this.options.rotationOrigin;
if(oldIE) {
// for IE 9, use the 2D rotation
this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2
Real Estate Media Listings

Questions / Comments:

You just need to use your own api key from https://airlabs.co/

airlabs () - 3 years ago - Reply 0