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 / earthquakes.geojson
Last active March 4, 2022 05:05
Change cluster if child is selected
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:06
Add circle with line-dasharray using Turf.js
<!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.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:06
Accessibility plugin (II)
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</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.7.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; top: 0; left: 0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:07
Use queryRenderedFeatures with a centered div
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</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.7.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; top: 0; left: 0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:08
Use queryRenderedFeatures with a canvas source
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</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.7.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; top: 0; left: 0; }
@malwoodsantoro
malwoodsantoro / index.html
Created December 24, 2019 20:25
User controls to change font size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>User controls to change font size</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
@malwoodsantoro
malwoodsantoro / index.html
Created November 15, 2019 19:26
Draw a rectangle with GL Draw
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Mapbox GL Draw Rectangle</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:08
Add a day/night overlay
<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/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
<script src="https://unpkg.com/@webgeodatavore/[email protected]/GeoJSON.Terminator.js"></script>
<style>
body { margin:0; padding:0; }
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:09
Use mask with Turf.js
<!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.44.1/mapbox-gl.js'></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<style>
@malwoodsantoro
malwoodsantoro / index.html
Last active March 4, 2022 05:10
Fly to polygon using Turf centroid
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a GeoJSON polygon</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.53.1/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>