Flying Web GL Map

Developer
Steve Pepple
Size
3,202 Kb
Views
56,672
  1. Flying Web GL Map Previews
  2. Flying Web GL Map HTML Codes
  3. Flying Web GL Map CSS Codes
  4. Flying Web GL Map JS Codes

How do I make an flying web gl map?

What is a flying web gl map? How do you make a flying web gl map? This script and codes were developed by Steve Pepple on 19 June 2022, Sunday.

Flying Web GL Map Previews
IQ Test

Flying Web GL Map - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flying Web GL Map</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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.11.2/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.2/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style>
</head>
<body>
<div class="actions"> <a id="fly">Fly to Boston</a>
</div>
<div id='map'></div>
<script>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flying Web GL Map - Script Codes CSS Codes

.actions { height: 100px; width: 100%; position: absolute; background: rgba(0, 0, 0, 0.5); top: 0px; z-index: 100; text-align: center;
}
#fly { display: block; height: 50px; line-height: 50px; cursor: pointer; width: 186px; position: relative; overflow: hidden; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: white; font-size: 1.2em; text-align: center; left: 50%; margin-left: -92px; margin-top: 20px;
}
#fly:after { position: absolute; content: ''; display: inline-block; background: #3bade3; background: linear-gradient(45deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%); height: 50px; width: 372px; z-index: -1; transform: translateX(-280px); transition: transform 400ms ease-in;
}
#fly:hover:after { transform: translateX(-200px);
}
#fly span { position: relative; top: 16px;
}

Flying Web GL Map - Script Codes JS Codes

const custom = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/basic-v8.json';
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RldmVwZXBwbGUiLCJhIjoiTmd4T0wyNCJ9.1-jWg2J5XmFfnBAhyrORmw';
map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/satellite-v8', //stylesheet location center: [-122.267684, 37.806464], // starting position bearing: 28, zoom: 14, // starting zoom, pitch: 45
});
$("#fly").click(function(){ moveTo(42.367595, -71.085315);
})
function moveTo(lat, lon) { map.flyTo({ center: [lon, lat], zoom: 14, speed: 0.5, curve: 0.8, easing: function(t) { return t; } });
}
Flying Web GL Map - Script Codes
Flying Web GL Map - Script Codes
Home Page Home
Developer Steve Pepple
Username stevepepple
Uploaded June 19, 2022
Rating 3
Size 3,202 Kb
Views 56,672
Do you need developer help for Flying Web GL Map?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Steve Pepple (stevepepple) Script Codes
Name
Real Time Buses API
Colors from Photos Taken in the Mission
Color Scales with D3.js
A Pen by Steve Pepple
Isometric Treemap Visualization of Money Allocation
Heat Map of LA POIs
Diverging Color Scales
Photos from Mission San Francisco
Geofence Example
Oakland Instagram Colors
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!