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 December 26, 2022 09:05
Create draggable symbol
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Create a draggable point</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.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active May 24, 2018 23:17
Add a scale to the map
<!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.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:19
Add Stamen watercolor tiles
<!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.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:19
Add bathymetry data to map
<!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.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:19
Use expressions for icon-size and icon-color (SDFs)
<!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.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active August 25, 2022 17:49
Use feature state to change features to same color on hover
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Create a hover effect</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.47.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:18
Jump to cities with setTimeout
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Jump to to a location</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.48.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / earthquakes.geojson
Last active March 4, 2022 05:17
Symbol hover with GeoJSON source
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:17
Swap icon image on hover
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Swap icon-image on hover</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.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:16
Use feature state hover to change SDF color
<!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.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }