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
Last active March 4, 2022 04:47
Add a function to popup HTML
<!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" />
<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>
body { margin: 0; padding: 0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active November 19, 2020 22:31
Filter clusters using setData
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:48
Add image source by clicking nw, sw, se, ne coordinates
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active November 19, 2020 22:33
Swap static map on click
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="robots" content="noindex, nofollow" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
@malwoodsantoro
malwoodsantoro / index.html
Last active November 19, 2020 22:34
Clustering with nested properties
<!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/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active November 19, 2020 22:34
Change popup size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a popup</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:50
Use draw plugin and Turf.js to add white mask around drawn polygon
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Show drawn polygon area</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 May 27, 2023 13:49
Add custom placeholder destination to directions plugin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:52
Use directions plugin with polyfill for IE11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:54
Add 'go to route' button to recenter on route after panning
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</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>