mattdanielbrown · August 6, 2022 01:10
diff --git a/display-a-globe-on-a-webpage.markdown b/display-a-globe-on-a-webpage.markdown
diff --git a/index.html b/index.html

 <div id="map"></div>



diff --git a/script.js b/script.js

 	mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dGRhbmllbGJyb3duIiwiYSI6ImNqZHEyeDB1ZzF0d2gzM280bWx5bXdieHAifQ.Mv8GUhLb-OgANr1CRfBcVQ';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/satellite-streets-v11',
        zoom: 1.5,
        center: [30, 50],
        projection: 'globe'
    });

    map.on('load', () => {
        // Set the default atmosphere style
        map.setFog({});
    });
diff --git a/scripts b/scripts
 <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>
diff --git a/style.css b/style.css

 body { margin: 0; padding: 0; }
 #map { position: absolute; top: 0; bottom: 0; width: 100%; }
diff --git a/styles b/styles
 <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet" />

	mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dGRhbmllbGJyb3duIiwiYSI6ImNqZHEyeDB1ZzF0d2gzM280bWx5bXdieHAifQ.Mv8GUhLb-OgANr1CRfBcVQ';
	const map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/satellite-streets-v11',
	zoom: 1.5,
	center: [30, 50],
	projection: 'globe'
	});

	map.on('load', () => {
	// Set the default atmosphere style
	map.setFog({});
	});

	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }