Skip to content

Instantly share code, notes, and snippets.

View danswick's full-sized avatar

Dan Swick danswick

45 followers · 3 following
View GitHub Profile
@danswick
danswick / index.html
Last active April 24, 2024 20:14
Fit map to polygon bounds with Turf and Mapbox GL JS
<!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.18.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
<style>
@danswick
danswick / index.html
Created October 30, 2015 22:07
save from leaflet draw
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Demo</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<!--Add mapbox.js -->
@danswick
danswick / icon.png
Last active April 19, 2023 14:29
Save GeoJSON from Mapbox GL Draw
icon.png
@danswick
danswick / README.md
Last active April 10, 2023 08:04
Restrict mapbox.js GeocoderControl to a single country

The Mapbox Geocoding API can handle lots of different query parameters, including country, which will only return results for a given country.

This example uses GeocoderControl's queryOptions option to restrict results to those from the United States. Try searching for "Dublin."

@danswick
danswick / index.html
Last active March 11, 2023 16:34
Clickable markers with popup content from GeoJSON
<!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.12.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />
<script src='parks.js'></script>
<style>
@danswick
danswick / index.html
Last active March 5, 2023 05:24
Mapbox GL JS circle with outline of custom style
<!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.37.0/mapbox-gl.js'></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<style>
@danswick
danswick / README.md
Last active January 6, 2023 09:04
Mapbox GL JS interactive map.resize()

Intentionally break your map canvas using the resize container button, then fix it again using the fix map button. This little demo is designed to show off how Mapbox GL JS's map.resize() method can fix a squished or stretched map canvas by telling the map to 1) check the size of its container, then 2) trigger a re-render. This method is useful for applications where the map's container might be resized interactively through a sliding, expanding, contracting, or interactively hidden HTML element.

@danswick
danswick / README.md
Last active December 26, 2022 04:05
Indoor map example

Using a hypothetical museum floorplan to demonstrate hover and click interactivity, as well as fitBounds.

@danswick
danswick / index.html
Last active February 23, 2022 22:12
Add draw control to a Mapbox GL JS 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.18.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
<script src="mapbox-gl-draw.js"></script>
<link href='mapbox-gl-draw.css' rel='stylesheet' />
@danswick
danswick / index.html
Created September 1, 2016 01:03
Put reverse geocoding results in GL JS popup
<!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.23.0/mapbox-gl.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.css' rel='stylesheet' />
<style>