malwoodsantoro’s gists

malwoodsantoro / index.html

Last active May 27, 2023 14:37

Show slideshow carousel in popup

	<!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/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 / index.html

Last active March 4, 2022 04:58

Line segment gradients

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<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 {

malwoodsantoro / index.html

Last active July 31, 2020 00:29

Toggle heatmap-opacity

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Create a heatmap layer</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body { margin: 0; padding: 0; }

malwoodsantoro / index.html

Last active March 23, 2021 22:36

Prevent map.on 'click' code from running when specific layer click event fires

	<!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/v1.10.1/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" />
	<style>

malwoodsantoro / earthquakes.geojson

Last active June 1, 2020 20:27

Use getClusterLeaves to show individual point properties when clicking on cluster

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

malwoodsantoro / index.html

Last active March 4, 2022 05:02

Draggable marker for geocoding result

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Add a geocoder</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" />
	<style>
	body { margin: 0; padding: 0; }

malwoodsantoro / index.html

Created May 28, 2020 01:24

Filter by zoom with vector source (pre-expressions)

	<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/v0.40.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body {

malwoodsantoro / index.html

Last active March 4, 2022 05:03

Add opencyclemap raster tiles

	<!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>
	body { margin: 0; padding: 0; }

malwoodsantoro / index.html

Last active January 10, 2025 17:01

Add openseamap raster 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.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
	<style>

malwoodsantoro / index.html

Last active March 4, 2022 05:04

Cluster data from a google sheet

	<!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://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
	<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" />

Mal Wood-Santoro malwoodsantoro