adds dots for navigation flights too
This commit is contained in:
		
							parent
							
								
									e48882bf49
								
							
						
					
					
						commit
						53afd1ee77
					
				
					 1 changed files with 78 additions and 29 deletions
				
			
		
							
								
								
									
										103
									
								
								index.html
									
									
									
									
									
								
							
							
						
						
									
										103
									
								
								index.html
									
									
									
									
									
								
							| 
						 | 
				
			
			@ -82,7 +82,10 @@
 | 
			
		|||
 | 
			
		||||
        function _updateMap(csvData, airportsData) {
 | 
			
		||||
            const lines = csvData.split('\n');
 | 
			
		||||
            const features = lines.map(line => {
 | 
			
		||||
 | 
			
		||||
            const features_nav = new Array();
 | 
			
		||||
            const features_local = new Array();
 | 
			
		||||
            for(const line of lines) {
 | 
			
		||||
                const [from, to] = line.split(',');
 | 
			
		||||
 | 
			
		||||
                const fromAirport = airportsData[from];
 | 
			
		||||
| 
						 | 
				
			
			@ -97,45 +100,80 @@
 | 
			
		|||
                const toLatitude = parseFloat(toAirport.latitude);
 | 
			
		||||
 | 
			
		||||
                // if from == to, draw a point
 | 
			
		||||
                var geometry;
 | 
			
		||||
                if(fromAirport == toAirport) {
 | 
			
		||||
                    geometry = {
 | 
			
		||||
                        type: 'Point',
 | 
			
		||||
                        coordinates: [fromLongitude, fromLatitude]
 | 
			
		||||
                    };
 | 
			
		||||
                }
 | 
			
		||||
                else {
 | 
			
		||||
                    geometry = {
 | 
			
		||||
                        type: 'LineString',
 | 
			
		||||
                        coordinates: [
 | 
			
		||||
                            [fromLongitude, fromLatitude],
 | 
			
		||||
                            [toLongitude, toLatitude]
 | 
			
		||||
                        ]
 | 
			
		||||
                    };
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                return {
 | 
			
		||||
                    features_local.push( {
 | 
			
		||||
                        type: 'Feature',
 | 
			
		||||
                        properties: {
 | 
			
		||||
                            from,
 | 
			
		||||
                            to
 | 
			
		||||
                        },
 | 
			
		||||
                    geometry: geometry
 | 
			
		||||
                };
 | 
			
		||||
            });
 | 
			
		||||
                        geometry: {
 | 
			
		||||
                            type: 'Point',
 | 
			
		||||
                            coordinates: [fromLongitude, fromLatitude]
 | 
			
		||||
                        }
 | 
			
		||||
                    } );
 | 
			
		||||
                }
 | 
			
		||||
                else {
 | 
			
		||||
                    features_nav.push( {
 | 
			
		||||
                        type: 'Feature',
 | 
			
		||||
                        properties: {
 | 
			
		||||
                            from,
 | 
			
		||||
                            to
 | 
			
		||||
                        },
 | 
			
		||||
                        geometry: {
 | 
			
		||||
                            type: 'LineString',
 | 
			
		||||
                            coordinates: [
 | 
			
		||||
                                [fromLongitude, fromLatitude],
 | 
			
		||||
                                [toLongitude, toLatitude]
 | 
			
		||||
                            ]
 | 
			
		||||
                        }
 | 
			
		||||
                    } );
 | 
			
		||||
 | 
			
		||||
            map.addSource('routes', {
 | 
			
		||||
                    // Add a point for each airport
 | 
			
		||||
                    features_nav.push( {
 | 
			
		||||
                        type: 'Feature',
 | 
			
		||||
                        properties: {
 | 
			
		||||
                            name: fromAirport.name
 | 
			
		||||
                        },
 | 
			
		||||
                        geometry: {
 | 
			
		||||
                            type: 'Point',
 | 
			
		||||
                            coordinates: [fromLongitude, fromLatitude]
 | 
			
		||||
                        }
 | 
			
		||||
                    } );
 | 
			
		||||
                    
 | 
			
		||||
                    features_nav.push( {
 | 
			
		||||
                        type: 'Feature',
 | 
			
		||||
                        properties: {
 | 
			
		||||
                            name: toAirport.name
 | 
			
		||||
                        },
 | 
			
		||||
                        geometry: {
 | 
			
		||||
                            type: 'Point',
 | 
			
		||||
                            coordinates: [toLongitude, toLatitude]
 | 
			
		||||
                        }
 | 
			
		||||
                    } );
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            map.addSource('nav', {
 | 
			
		||||
                type: 'geojson',
 | 
			
		||||
                data: {
 | 
			
		||||
                    type: 'FeatureCollection',
 | 
			
		||||
                    features
 | 
			
		||||
                    features: features_nav
 | 
			
		||||
                }
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            map.addSource('local', {
 | 
			
		||||
                type: 'geojson',
 | 
			
		||||
                data: {
 | 
			
		||||
                    type: 'FeatureCollection',
 | 
			
		||||
                    features: features_local
 | 
			
		||||
                }
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            map.addLayer({
 | 
			
		||||
                id: 'routes',
 | 
			
		||||
                id: 'nav_lines',
 | 
			
		||||
                type: 'line',
 | 
			
		||||
                source: 'routes',
 | 
			
		||||
                source: 'nav',
 | 
			
		||||
                layout: {
 | 
			
		||||
                    'line-join': 'round',
 | 
			
		||||
                    'line-cap': 'round'
 | 
			
		||||
| 
						 | 
				
			
			@ -147,9 +185,20 @@
 | 
			
		|||
            });
 | 
			
		||||
 | 
			
		||||
            map.addLayer({
 | 
			
		||||
                id: 'points',
 | 
			
		||||
                id: 'nav_points',
 | 
			
		||||
                type: 'circle',
 | 
			
		||||
                source: 'routes',
 | 
			
		||||
                source: 'nav',
 | 
			
		||||
                paint: {
 | 
			
		||||
                    'circle-radius': 5,
 | 
			
		||||
                    'circle-color': '#ce42f5'
 | 
			
		||||
                },
 | 
			
		||||
                filter: ['==', '$type', 'Point']
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            map.addLayer({
 | 
			
		||||
                id: 'local_points',
 | 
			
		||||
                type: 'circle',
 | 
			
		||||
                source: 'local',
 | 
			
		||||
                paint: {
 | 
			
		||||
                    'circle-radius': 5,
 | 
			
		||||
                    'circle-color': '#f00'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in a new issue