Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
190 lines (167 sloc) 4.3 KB
<!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.20.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.1/mapbox-gl.css' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<style>
#title {
position: absolute;
top: 10%;
left: 2%;
bottom: 0;
width: 350px;
height: 310px;
box-sizing: border-box;
border-color: #fff;
border-width: medium;
padding: 8px 10px;
font-family: 'Offside', cursive;
font-size: 9pt;
color: #424242;
text-align: center;
background: rgba(188, 188, 188, 1);
-webkit-border-radius: 4px;
border-radius: 4px;
z-index: 9999;
overflow: auto;
}
#button-wrap {
width: 90%;
margin: 0 auto;
}
.buttons {
display: inline-block;
position: relative;
cursor: pointer;
padding: 8px;
margin: 3px;
border-radius: 0px;
cursor: pointer;
font: 12px/20px 'Offside', Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
color: #fff;
background: #424242;
}
.buttons:hover {
background: #e9e9e9;
}
a {
color: #3297b8;
}
</style>
<div id='map'></div>
<div id='title'>
<font size='4.5'>Paid Mappers</font size>
<br>
<font size='6'>A Year Of Edits</font size>
<font face='Helvetica'>
<br>Edits in <font color=#3297b8><strong> BLUE</strong></font> indicate a new feature added to OpenStreetMap.
Edits in <font color=#f90><strong> ORANGE</strong></font> indicate an edit to an existing OpenStreetMap feature.</p>
<li onclick='fit1();' class='buttons'>Downtown, Hampton</li>
<li onclick='fit2();' class='buttons'>Fort Lee, Virginia</li>
<li onclick='fit3();' class='buttons'>Landstown / Virginia Beach</li>
<li onclick='fit4();' class='buttons'>Water Country, USA</li>
<li onclick='fit5();' class='buttons'>Default View</li>
<br>Want the stats? Check out our <a target="blank" href="http://paidmappers.github.io/home/">annual report</a>
<br>Wondering how we made it? Read the <a target="blank" href="http://jonahadkins.github.io/2016/08/15/year_of_edits.html">blog post</a>
<br>by <a target="blank" href="https://twitter.com/jonahadkins">Jonah Adkins</a>
</font face>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiam9uYWhhZGtpbnMiLCJhIjoiRlVVVkx3VSJ9.9sdVEK_B_VkEXPjssU5MqA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/jonahadkins/cir480y2c000hbpnlx45skqy0',
center: [-76.91, 37.12],
maxZoom: 16,
minZoom: 8,
zoom: 1,
pitch: 0
});
function fit1() {
map.jumpTo({
center: [-76.3374, 37.0315],
zoom: 11,
bearing: 0,
pitch: 0
});
map.flyTo({
zoom: 14,
bearing: 0,
pitch: 25
});
}
function fit2() {
map.jumpTo({
center: [-77.342, 37.249],
zoom: 11,
bearing: 0,
pitch: 0
});
map.flyTo({
bearing: 0,
zoom: 14,
pitch: 25
});
}
function fit3() {
map.jumpTo({
center: [-76.0983, 36.7750],
zoom: 11,
bearing: 0,
pitch: 0
});
map.flyTo({
bearing: 0,
zoom: 14,
pitch: 25
});
}
function fit4() {
map.jumpTo({
center: [-76.6361, 37.2615],
zoom: 11,
bearing: 0,
pitch: 0
});
map.flyTo({
bearing: 0,
zoom: 14,
pitch: 25
});
}
function fit5() {
map.jumpTo({
center: [-76.91, 37.12],
zoom: 1,
bearing: 0,
pitch: 0
});
}
map.on('mousemove', function(e) {
document.getElementById('info').innerHTML =
// e.lngLat is the longitude, latitude geographical position of the event
JSON.stringify(e.lngLat);
});
</script>
</body>
</html>