Skip to content

Instantly share code, notes, and snippets.

@mapsmania

mapsmania/index.html

Created February 3, 2020 14:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mapsmania/df7667f122a850a292691da17349aad1 to your computer and use it in GitHub Desktop.
Save mapsmania/df7667f122a850a292691da17349aad1 to your computer and use it in GitHub Desktop.
Download ZIP
Where's Null Island
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Null Island</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"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoiZ21hcHNtYW5pYSIsImEiOiJOYnlnSFpvIn0.5f62d0cnrWCA1KioxzXtqg";
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/outdoors-v11",
center: [0, 20],
zoom: 1
});
map.addControl(new mapboxgl.NavigationControl());
map.on("load", function() {
map.addSource("realnull", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] }
}
]
}
});
map.addLayer({
id: "nullisland",
type: "circle",
source: "realnull",
paint: {
"circle-radius": 10,
"circle-color": "#F6F83F"
},
filter: ["==", "$type", "Point"]
});
});
map.on("load", function() {
map.addSource("survey", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [1.5820312500003695, 53.45261013023293]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [109.86328125000006, -8.900470391613467]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [76.46484374999994, 62.36276720787586]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [3.3398437499993747, -2.2562136924334197]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-1.3591185197996367, 52.57518080444717]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [0.5273437500015064, -4.011328561127925]
}
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] }
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-2.7071645381905114, 0.6550600247456799]
}
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] }
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [0.5897699128286433, 2.949148361686639]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-5.700913420093428, 56.01426215553357]
}
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] }
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-12.128906249999488, 34.185280885345634]
}
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] }
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] }
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] }
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] }
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.00046445801612549076, -0.0004536487105042397]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.05089453773840091, 0.0408395200839351]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-1.4062499999999147, -3.3096424371169206]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [2.2851562500010516, -4.887577288393771]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [2.2851562499999716, 0.2041400479871811]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.12452474074308384, 51.499337346820056]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-42.76078334669336, 29.546579661065692]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-103.60563527198786, 39.78910295342533]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [91.436621014916, -28.0471469416227]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [3.0354753487269193, -1.9254285293217777]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [1.2304687499996874, -3.5134184979649348]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.42055500485201947, 1.8887420800530634]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [3.6914062499999147, -0.8505157827296159]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [3.4950494540899797, -2.6459323720601304]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-2.7140097530645733, -5.65401421894083]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [192.12890625000352, 8.754797225166498]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [4.394531249999432, 0.3799189458175505]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [1.7487151299899608, 1.6766865565741114]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-14.430787355321797, -8.045446419068085]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.18165072156722317, 1.1252703882602901]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [1.227288274672901, 1.5131871353215303]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [64.9497658246957, -50.4095694259489]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [3.7132877608784156, 0.13380971799149677]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-1.5820312500019327, -3.1341391023677687]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-104.4777104139848, 76.56214327072527]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [5.912503611727601, 1.9371594584031868]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [5.912519747338536, 1.9374819861679526]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [6.550763438306433, 2.661221111562668]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.8201140503429087, -1.3473310579089173]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-1.2302306104112404, 0.7031099047159586]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-174.6490057110866, -18.79493822249985]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-174.6501514865258, -18.80863145722377]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [4.386333453100718, 24.62349233102985]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [24.18402277896763, -14.601015146845839]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-6.3517453067647125, -13.876440239896482]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-100.72265625000092, 80.05805000284144]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-99.73619922051897, 80.12511131702303]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-99.24869952833268, 80.18574536206805]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [123.25630708710054, 11.194914516629368]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [171.24594353643175, 71.72856404217342]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-1.0285560204367812, 0.8034639032767075]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-185.17542529204962, 73.61465080929338]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [0.24476543306056442, -1.2258556857240421]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [3.03617994675065, -1.539173368694577]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [3.281784901636115, 2.28109372839873]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-1.3528841532297236, -4.516460605379677]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.34062107526153795, -3.164830586663072]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.0891303464764519, -4.207028340412265]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-2.295163400334559, -2.6104145292251815]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-3.1640624999992895, -5.58776202733911]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-5.62499999999946, -6.636439161035881]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-2.1670429201184334, -6.890777512979582]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-4.875846570269573, -4.46499988399556]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [2.2465030892417417, 0.7492864359284681]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [6.901557871923785, -0.12015315831786211]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [1.25083027135679, -0.6505970007656146]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-1.5210262987210683, 52.78387345861043]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-0.21518871717569255, -4.925254798698731]
}
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-5.547717876961173, -7.955927452402946]
}
}
]
}
});
map.addLayer({
id: "guesses",
type: "circle",
source: "survey",
paint: {
"circle-radius": 7,
"circle-color": "#B42222"
},
filter: ["==", "$type", "Point"]
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment