Skip to content

Instantly share code, notes, and snippets.

View malwoodsantoro's full-sized avatar

Mal Wood-Santoro malwoodsantoro

10 followers · 2 following
View GitHub Profile
@malwoodsantoro
malwoodsantoro / index.html
Created May 22, 2022 01:14
dog-async-await.html
<html>
<head>
<style>
* {
background-color: pink;
border-radius: 5px;
padding: 10px;
}
</style>
<script>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:23
Spinner animation on layer load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a raster tile source</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:24
Display a bézier curve using Turf.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<script src='https://unpkg.com/@turf/[email protected]/turf.min.js'></script>
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:26
Re-add custom layers when toggling between styles
<!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.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Created May 25, 2021 23:10
Toggle between two layers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Show and hide layers</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
@malwoodsantoro
malwoodsantoro / index.html
Created May 17, 2021 19:34
Show polygon around clustered points on hover
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Create and style clusters</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:29
Filter clusters using filter source param
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create and style clusters</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:30
Change cursor on hover
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a popup on click</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:31
Show an open popup when flying to a location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fly to a location</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:32
Hide/show map using an HTML button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<style>