Skip to content

Instantly share code, notes, and snippets.

@mapsmania

mapsmania/index.html

Last active September 17, 2020 11:50
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/7c2084bd79104c718cce483d6d8e0a9c to your computer and use it in GitHub Desktop.
Save mapsmania/7c2084bd79104c718cce483d6d8e0a9c to your computer and use it in GitHub Desktop.
Download ZIP
Where is the West End?
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Here's the West End</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%;
}
#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 50px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
text-align: center;
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#menu a.active {
background-color: #3887be;
color: #ffffff;
}
#menu a.active:hover {
background: #3074a4;
}
#about {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
left: 20px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<nav id="menu"></nav>
<div id="about"><a href="http://googlemapsmania.blogspot.com/2020/09/this-is-west-end.html">About
This Map</a></div>
<div id="map"></div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoiZ21hcHNtYW5pYSIsImEiOiJOYnlnSFpvIn0.5f62d0cnrWCA1KioxzXtqg";
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/gmapsmania/ck6uxag6301gi1ir5qrb0nanx",
center: [-0.1274338,51.518414],
zoom: 12
});
map.addControl(new mapboxgl.NavigationControl());
map.on("load", function() {
map.addSource("survey", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.10456,51.511307],[-0.105075,51.517075],[-0.106791,51.521775],[-0.113313,51.526047],[-0.122581,51.53064],[-0.138543,51.525193],[-0.157938,51.522202],[-0.170295,51.520066],[-0.160512,51.513336],[-0.152102,51.505965],[-0.151072,51.502652],[-0.146438,51.498805],[-0.140431,51.500194],[-0.12344,51.50137],[-0.121723,51.508208],[-0.116231,51.510879],[-0.10456,51.511307]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.104732,51.511413],[-0.10559,51.516968],[-0.110568,51.5253],[-0.128074,51.527649],[-0.169609,51.521348],[-0.191921,51.515366],[-0.205652,51.507674],[-0.196383,51.494103],[-0.177504,51.494317],[-0.178362,51.493889],[-0.182481,51.486835],[-0.14867,51.485766],[-0.14867,51.487049],[-0.134081,51.486086],[-0.124641,51.492179],[-0.12344,51.504682],[-0.118291,51.510345],[-0.104732,51.511413]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.173308,51.537166],[-0.174681,51.511682],[-0.191163,51.510187],[-0.188073,51.50335],[-0.167814,51.502638],[-0.156598,51.487252],[-0.161519,51.479914],[-0.194253,51.475496],[-0.193795,51.475567],[-0.193223,51.475353],[-0.192994,51.474925],[-0.192994,51.474925],[-0.185045,51.469709],[-0.193629,51.464363],[-0.210511,51.472132],[-0.221899,51.485991],[-0.22167,51.507858],[-0.199924,51.510635],[-0.186876,51.533594],[-0.173308,51.537166]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.118594,51.520209],[-0.14087,51.536762],[-0.142817,51.544805],[-0.128443,51.539858],[-0.144019,51.544698],[-0.144019,51.544698],[-0.143688,51.571664],[-0.119862,51.547225],[-0.120033,51.547047],[-0.118594,51.520209]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.121175,51.523288],[-0.136977,51.517202],[-0.1344,51.508553],[-0.117053,51.516135],[-0.121175,51.523288]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.098553,51.511093],[-0.102158,51.528183],[-0.129275,51.52797],[-0.15502,51.53758],[-0.186944,51.526154],[-0.200503,51.506285],[-0.168236,51.488117],[-0.130649,51.488117],[-0.125328,51.49421],[-0.124813,51.504255],[-0.118634,51.510772],[-0.098553,51.511093]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.074525,51.50714],[-0.080017,51.52797],[-0.123612,51.531601],[-0.163602,51.529465],[-0.176303,51.515793],[-0.154505,51.501584],[-0.137342,51.489614],[-0.123955,51.508849],[-0.109023,51.512695],[-0.074525,51.50714]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.1038,51.510879],[-0.106548,51.522737],[-0.118742,51.529251],[-0.146222,51.524873],[-0.174732,51.518784],[-0.177136,51.50714],[-0.173186,51.498378],[-0.158931,51.489721],[-0.128875,51.50543],[-0.119944,51.512268],[-0.1038,51.510879]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.139412,51.512675],[-0.129382,51.508978],[-0.138795,51.502785],[-0.149519,51.508834],[-0.140106,51.513971],[-0.139412,51.512675]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.185918,51.495994],[-0.162235,51.496314],[-0.161033,51.48776],[-0.184202,51.484979],[-0.185918,51.495994]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.128363,51.51355],[-0.130411,51.517366],[-0.130926,51.518114],[-0.133534,51.522153],[-0.140747,51.533901],[-0.147879,51.541713],[-0.165909,51.540859],[-0.193687,51.532772],[-0.199696,51.519102],[-0.195575,51.504786],[-0.182525,51.496237],[-0.161748,51.488649],[-0.149007,51.486547],[-0.135957,51.486013],[-0.128573,51.490716],[-0.125723,51.499896],[-0.128363,51.51355]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.09591,51.510772],[-0.097498,51.522149],[-0.145225,51.516541],[-0.16162,51.51323],[-0.150676,51.502786],[-0.126812,51.506018],[-0.113764,51.510666],[-0.09591,51.510772]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.116872,51.509781],[-0.122151,51.516213],[-0.129196,51.518018],[-0.146155,51.516163],[-0.147038,51.51277],[-0.143571,51.507625],[-0.135153,51.505233],[-0.124953,51.505925],[-0.124953,51.505925],[-0.116872,51.509781]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.146242,51.502118],[-0.17131,51.535018],[-0.206164,51.533416],[-0.205821,51.491324],[-0.155857,51.49079],[-0.159291,51.502545],[-0.146242,51.502118]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.148306,51.504255],[-0.119458,51.517289],[-0.1277,51.528504],[-0.167881,51.519853],[-0.148306,51.504255]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.111511,51.513998],[-0.118878,51.510153],[-0.124684,51.503278],[-0.125933,51.495353],[-0.130366,51.490185],[-0.138482,51.493022],[-0.142415,51.493061],[-0.1446,51.503006],[-0.142415,51.509609],[-0.145474,51.515396],[-0.147347,51.520095],[-0.141416,51.523279],[-0.138607,51.529258],[-0.126869,51.530811],[-0.129554,51.532985],[-0.121969,51.527232],[-0.116038,51.519117],[-0.111511,51.513998]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.157838,51.522042],[-0.136462,51.52546],[-0.125473,51.516167],[-0.118176,51.513123],[-0.119206,51.510933],[-0.12719,51.507033],[-0.13835,51.502706],[-0.142299,51.506819],[-0.150283,51.50324],[-0.151227,51.506071],[-0.158181,51.513443],[-0.160241,51.513657],[-0.168654,51.519158],[-0.168654,51.519158],[-0.157838,51.522042]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.123839,51.509277],[-0.14101,51.508262],[-0.146161,51.512695],[-0.147964,51.519158],[-0.14762,51.519158],[-0.147878,51.519265],[-0.147878,51.519265],[-0.12796,51.518571],[-0.122466,51.519639],[-0.119546,51.51606],[-0.116799,51.512589],[-0.123839,51.509277]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.100552,51.513764],[-0.06123,51.53427],[-0.064492,51.549111],[-0.064492,51.549111],[-0.080659,51.544894],[-0.080659,51.544894],[-0.080659,51.544894],[-0.084061,51.543986],[-0.084061,51.543853],[-0.100552,51.513764]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.127131,51.509429],[-0.133993,51.508885],[-0.134976,51.510122],[-0.132439,51.511979],[-0.135501,51.515581],[-0.125032,51.517163],[-0.117756,51.512883],[-0.119397,51.511026],[-0.126935,51.507508],[-0.127131,51.509429]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.118094,51.509891],[-0.11921,51.511467],[-0.118738,51.512562],[-0.117493,51.513363],[-0.120283,51.517583],[-0.125392,51.517129],[-0.133977,51.516141],[-0.142262,51.515259],[-0.147242,51.514592],[-0.140674,51.507834],[-0.137411,51.505136],[-0.136295,51.503827],[-0.118094,51.509891]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.126884,51.509945],[-0.133979,51.510509],[-0.140617,51.515407],[-0.125095,51.517103],[-0.117851,51.513034],[-0.126884,51.509945]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.115832,51.511283],[-0.130429,51.528059],[-0.223506,51.515771],[-0.18418,51.479852],[-0.131459,51.486161],[-0.115832,51.511283]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.126411,51.53395],[-0.126411,51.489079],[-0.196083,51.4662],[-0.237954,51.491858],[-0.236581,51.531814],[-0.126411,51.53395]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.115888,51.510666],[-0.123612,51.527649],[-0.1624,51.52028],[-0.149528,51.504362],[-0.125156,51.500729],[-0.115888,51.510666]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.103884,51.511494],[-0.150564,51.504653],[-0.170129,51.519618],[-0.108346,51.532868],[-0.103884,51.511494]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.182182,51.557863],[-0.492292,51.563626],[-0.501565,51.455077],[-0.163294,51.465344],[-0.182182,51.557863]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.104808,51.528509],[-0.130093,51.51748],[-0.093677,51.516625],[-0.093677,51.516454],[-0.08209,51.52244],[-0.086557,51.527142],[-0.086557,51.527142],[-0.104808,51.528509]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.167455,51.518037],[-0.159644,51.51323],[-0.158614,51.513283],[-0.151404,51.505644],[-0.150803,51.503507],[-0.14943,51.50308],[-0.14222,51.50698],[-0.138443,51.502812],[-0.130976,51.505697],[-0.118873,51.511467],[-0.118272,51.512909],[-0.124624,51.516434],[-0.126684,51.516862],[-0.135782,51.52562],[-0.165481,51.5206],[-0.166082,51.519265],[-0.166167,51.519265],[-0.167455,51.518037]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.049122,51.51825],[-0.046891,51.513871],[-0.041913,51.514405],[-0.040883,51.51793],[-0.049122,51.51825]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.162761,51.511734],[-0.164134,51.510879],[-0.194682,51.497095],[-0.178207,51.482986],[-0.137022,51.486193],[-0.127927,51.495385],[-0.162761,51.511734]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.140757,51.510666],[-0.13389,51.508315],[-0.218699,51.523164],[-0.228828,51.470263],[-0.136982,51.477427],[-0.120501,51.50949],[-0.140757,51.510666]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.117939,51.511734],[-0.139566,51.502973],[-0.142999,51.507354],[-0.151753,51.503293],[-0.169948,51.519319],[-0.130469,51.527009],[-0.117939,51.511734]]]}},
{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.126777,51.504789],[-0.084846,51.538221],[-0.187553,51.650407],[-0.424405,51.5442],[-0.10517,51.501477],[-0.126777,51.504789]]]}},
]
}
});
map.addLayer({
'id': 'Crowdsourced Entries',
'type': 'fill',
'source': 'survey',
'layout': {},
'paint': {
'fill-color': 'orange',
'fill-opacity': 0.2,
'fill-outline-color': 'black'
}
});
//texas geojson
map.addSource('Texas', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[
-0.1420927047729492,
51.51520589407308
],
[
-0.13788700103759766,
51.50997111626239
],
[
-0.13651371002197266,
51.509784148786515
],
[
-0.13496875762939453,
51.50999782583918
],
[
-0.13333797454833984,
51.51018479243817
],
[
-0.13102054595947266,
51.50778087767913
],
[
-0.12784481048583984,
51.507406923983446
],
[
-0.1238107681274414,
51.509410211532874
],
[
-0.11904716491699219,
51.51135999349115
],
[
-0.11844635009765626,
51.51280224425956
],
[
-0.11737346649169922,
51.51325627671818
],
[
-0.11475563049316405,
51.51312273822952
],
[
-0.11106491088867188,
51.513790426758206
],
[
-0.11183738708496094,
51.51595367036974
],
[
-0.11394023895263672,
51.51819692560407
],
[
-0.12050628662109375,
51.51758271194066
],
[
-0.12690067291259766,
51.51688837347746
],
[
-0.13325214385986328,
51.51616731848544
],
[
-0.1420927047729492,
51.51520589407308
]
]
]
}
}
});
map.addLayer({
'id': 'Google\'s West End Border',
'type': 'fill',
'source': 'Texas',
'layout': {},
'paint': {
'fill-color': 'white',
'fill-opacity': 1
}
});
});
var toggleableLayerIds = ['Crowdsourced Entries', 'Google\'s West End Border'];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
link.onclick = function(e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment