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:34
Get center and zoom of map when panning
<!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" />
<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 March 4, 2022 04:37
Show center coordinates while panning
<!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" />
<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 March 4, 2022 04:39
Show popups using a vector tile source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a vector 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:40
Use getClusterLeaves to show child count and 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/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:41
Add a geocoder to 3D terrain
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add 3D terrain to 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/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:43
Use draw plugin to query for POIs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draw plugin and qrf </title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Created December 19, 2020 00:51
Draw plugin and qrf to select POIs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draw plugin and qrf </title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:43
Locate the user without flyTo animation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Locate the user</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:44
Store Locator Tutorial using Fetch API
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Store Locator</title>
<meta name='robots' content='noindex, nofollow'>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet'>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 04:45
Accessibility plugin
<!DOCTYPE html>
<html>
<head>
<title>ap1</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {