peterqliu/index.html

## index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        .mapboxgl-popup{filter:invert(100%)}
        .mapboxgl-popup-content {padding:10px}
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicGV0ZXJxbGl1IiwiYSI6ImpvZmV0UEEifQ._D4bRmVcGfJvo1wjuOpA1g';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/peterqliu/civssiwp7000q2jmqzw2rewzm', //stylesheet location
    center: [90,40], // starting position
    zoom: 2.5 // starting zoom
});

var knotsPerMS = 1.94384;

map.on('load', function(){

    var barbCutoffs = [0,0,5,10,15,20,50,65];
    for (var b=0; b<barbCutoffs.length-1; b++){
        map.addLayer({
            'id':'barbs'+b,
            'type':'symbol',
            'filter':[
                "all",
                ['>=','velocity',barbCutoffs[b]/knotsPerMS],
                ['<', 'velocity',barbCutoffs[b+1]/knotsPerMS]
            ],
            'source':'composite',
            "source-layer": "winddata-9fwr1o",
            'paint':{
                'icon-opacity':0.6+b*0.05,
            },
            'layout':{
                'icon-image':'barbs-0'+(b+1),
                'icon-size':
                {'base':1,
                    'stops':[[2,0.2],[6,1]]
                },
                'icon-allow-overlap': true,
                'icon-rotation-alignment': 'map',
                'icon-rotate':{
                    'property':'direction',
                    'stops':[[0,90],[360,450]]
                }
            }
        })
    }

    var popup = new mapboxgl.Popup({closeOnClick: false, closeButton: false, offset:5})

    map.on('mousemove', function(e){
        var firstFeature = map.queryRenderedFeatures(e.point, {layers:['barbs0','barbs1','barbs2','barbs3','barbs4','barbs5','barbs6']})[0];
        if (firstFeature) {
            popup.setLngLat(firstFeature.geometry.coordinates);
            var angle = parseInt(firstFeature.properties.direction);
            var velocity = (firstFeature.properties.velocity/knotsPerMS).toFixed(1);

            popup
                .setHTML(velocity+' knots, '+angle+'° bearing')
                .addTo(map);
        }

        else popup.remove();
    })

})

// disable scroll if it's embedded in a blog post
if (window.location.search.indexOf('embed') !== -1 ) {
    map.scrollZoom.disable();
};

</script>

</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />
	<script src="https://d3js.org/d3.v4.min.js"></script>

	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	.mapboxgl-popup{filter:invert(100%)}
	.mapboxgl-popup-content {padding:10px}
	</style>
	</head>
	<body>

	<div id='map'></div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoicGV0ZXJxbGl1IiwiYSI6ImpvZmV0UEEifQ._D4bRmVcGfJvo1wjuOpA1g';
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/peterqliu/civssiwp7000q2jmqzw2rewzm', //stylesheet location
	center: [90,40], // starting position
	zoom: 2.5 // starting zoom
	});

	var knotsPerMS = 1.94384;

	map.on('load', function(){

	var barbCutoffs = [0,0,5,10,15,20,50,65];
	for (var b=0; b<barbCutoffs.length-1; b++){
	map.addLayer({
	'id':'barbs'+b,
	'type':'symbol',
	'filter':[
	"all",
	['>=','velocity',barbCutoffs[b]/knotsPerMS],
	['<', 'velocity',barbCutoffs[b+1]/knotsPerMS]
	],
	'source':'composite',
	"source-layer": "winddata-9fwr1o",
	'paint':{
	'icon-opacity':0.6+b*0.05,
	},
	'layout':{
	'icon-image':'barbs-0'+(b+1),
	'icon-size':
	{'base':1,
	'stops':[[2,0.2],[6,1]]
	},
	'icon-allow-overlap': true,
	'icon-rotation-alignment': 'map',
	'icon-rotate':{
	'property':'direction',
	'stops':[[0,90],[360,450]]
	}
	}
	})
	}

	var popup = new mapboxgl.Popup({closeOnClick: false, closeButton: false, offset:5})

	map.on('mousemove', function(e){
	var firstFeature = map.queryRenderedFeatures(e.point, {layers:['barbs0','barbs1','barbs2','barbs3','barbs4','barbs5','barbs6']})[0];
	if (firstFeature) {
	popup.setLngLat(firstFeature.geometry.coordinates);
	var angle = parseInt(firstFeature.properties.direction);
	var velocity = (firstFeature.properties.velocity/knotsPerMS).toFixed(1);

	popup
	.setHTML(velocity+' knots, '+angle+'° bearing')
	.addTo(map);
	}

	else popup.remove();
	})

	})

	// disable scroll if it's embedded in a blog post
	if (window.location.search.indexOf('embed') !== -1 ) {
	map.scrollZoom.disable();
	};

	</script>

	</body>
	</html>