http://www.efojs.com/envisioning_information/airports/

1<!DOCTYPE html>
2<html>
3<head>
4	<title>All airports (~50000) on the world map (8 MB)</title>
5	<meta property="og:type" content="website" />
6	<meta property="og:site_name" content="Envisioning information at EFOJS" />
7	<meta property="og:title" content="All airports (~50000) on the world map (8 MB)" />
8	<meta property="og:url" content="http://efojs.com/envisioning_information/airports/" />
9	<meta property="og:description" content="Visualisation of density of airports, with markers differed by type. Information is not updated"/>
10	<meta property="og:image" content="http://efojs.com/envisioning_information/airports/airports-on-map.jpg" />
11
12	<style type="text/css">
13		* {
14			margin-top: 0;
15			box-sizing: border-box;
16		}
17		#map {
18			height: 100%;
19			width: 100%;
20			/*display: inline-block;*/
21		}
22		.legend {
23			width: 100%;
24			padding: 0.5rem 1rem;
25			vertical-align: middle;
26			text-align: center;
27			font-family: sans-serif;
28			font-size: 1rem;
29		}
30		.legend span {
31				padding-right: 10px;
32			}
33		html, body {
34	        height: 100%;
35	        margin: 0;
36	        padding: 0;
37	      }
38	    h4 {
39	    	margin-bottom: 0.2rem
40	    }
41	</style>
42	

42<script src="airports.json"></script>

42
43
44	
45</head>
46<body>
47	<div id="map"></div>
48	<div class="legend">
49		Airports types: 
50		<span>
51			<img src="small_airport.png">&nbsp;Small
52		</span>
53		<span>
54			<img src="medium_airport.png">&nbsp;Medium
55		</span>
56		<span>
57			<img src="large_airport.png">&nbsp;Large
58		</span>
59		<span>
60			<img src="heliport.png">&nbsp;Heliport
61		</span>
62		<span>
63			<img src="seaplane_base.png">&nbsp;Seaplane base
64		</span>
65		<span>
66			<img src="balloonport.png">&nbsp;Balloonport
67		</span>
68	</div>
69	

69<script>
70		var map, 
71			infoWindow,
72			markers = markersArray,
73			markersOnMap = [],
74			markersIDsOnMap = [];
75		// function clearMarkers() {
76		// 	console.log("clearMarkers: ");
77		// 	var bounds = map.getBounds();
78		// 	var newArray = [];
79		// 	for (var i = 0; i < markersOnMap.length; i++) {
80		// 		if (!bounds.contains(markersOnMap[i].position)) {
81		// 			var marker = markersOnMap[i];
82		// 			marker.setMap(null);
83		// 			markersIDsOnMap.splice(markersIDsOnMap.indexOf(marker.id), 1);
84		// 			// console.log("outside");
85		// 		} else {
86		// 			// console.log("in bounds");
87		// 			// newArray.push(markersOnMap[i]);
88		// 		}
89	 //        }
90	 //        markersOnMap = newArray;
91		// };
92		function initMap() {
93			infoWindow = new google.maps.InfoWindow;
94			map = new google.maps.Map(document.getElementById('map'), {
95			  // disableDefaultUI: true,
96			  streetViewControl: false,
97		      center: {lat: 0, lng: 0},
98		      zoom: 4,
99		      minZoom: 3
100		    });
101		    setMarkers();
102		    setNewHeight();
103		    map.addListener('click', function() {
104                infoWindow.close();
105			});
106		    map.addListener('idle', function() {
107		    	// checkMarkers(); // например чтобы узнать кто виден
108			});
109		};
110
111		function setMarkers() {
112			// console.log("setMarkers:");
113			markers.forEach(function(hash, index) {
114				var pos = {lat: hash.latitude_deg, lng: hash.longitude_deg };
115				if (hash.type != "closed") {
116					var marker = new google.maps.Marker({
117						id: hash.id,
118				        position: pos,
119				        icon: hash.type + ".png",
120				        title: hash.name,
121				        map: map
122				      });
123					var infowincontent = document.createElement('div'); 
124					var portName = document.createElement('h4');
125						portName.textContent = hash.name + " (" + hash.iata_code + ")";
126							infowincontent.appendChild(portName);
127					var coordsP = document.createElement('p'); 
128						var coordsLink = document.createElement('a');
129							coordsLink.textContent = "Open in Google Maps";
130							coordsLink.title = "Open in Google Maps: " + hash.latitude_deg + ", " + hash.longitude_deg;
131							coordsLink.href = "https://www.google.ru/maps/search/" + hash.latitude_deg + ",+" + hash.longitude_deg;
132								coordsP.appendChild(coordsLink);
133								infowincontent.appendChild(coordsP);
134					var description = document.createElement('span');
135						var iconImg = document.createElement('img');
136							iconImg.src = hash.type + ".png";
137							description.appendChild(iconImg);
138						var desText = document.createElement('span');
139							desText.textContent = " " + hash.type + ", el.: " + hash.elevation_ft;
140							description.appendChild(desText);
141
142					infowincontent.appendChild(description);
143					marker.addListener('click', function() {
144		                infoWindow.setContent(infowincontent);
145		                infoWindow.open(map, marker);
146					});
147					markersOnMap.push(marker);
148					markersIDsOnMap.push(hash.id);
149		    	} else {
150		    		// console.log("closed");		
151		    	}
152		    });
153		    // console.log("all markers set");
154		};
155
156		function checkMarkers() {
157			var bounds = map.getBounds();
158			for (var i = 0; i < markersOnMap.length; i++) {
159				var marker = markersOnMap[i];
160				if (bounds.contains(marker.position)) {
161					if (marker.map == null) {
162						marker.setMap(map);
163					}
164				} else {
165					marker.setMap(null);
166				}
167	        }
168		};
169
170		function setNewHeight() {
171			var map = document.getElementById('map');
172			var mapHeight = map.clientHeight;
173			var newMapHeight = mapHeight - document.getElementsByClassName('legend')[0].clientHeight;
174			map.style.height = newMapHeight + "px";
175		};
176	</script>

176
177														<!-- локальный ключ, нужно добавлять IP в консоли -->
178	

178<script src="https://maps.googleapis.com/maps/api/js?key=
179AIzaSyBK7RbCHCLuCUM8lCs1Ui9xRbVfXHqZIEo&callback=initMap"
180	async defer></script>

180
181</body>
182</html>