April 30, 2017 - No Comments!

Fun with Mapbox

I’ve been playing around with Mapbox (free). It’s a mapping platform that lets you build experiences in an app or site. You can link up to APIs, do fancy coding stuff with it, including data overlays and analysis. The Mapbox Studio, where you do your work and setup, takes a little time to get to know, but there’s enough info out there to get you started, including a Getting Started resource page.

The pro move is to enlist someone who knows javascript to help you take the full potential of the platform. Or learn a little js yourself.

Step 1: Style map in Mapbox Studio

mapbox_map

 

Step 2: Code until you cry. This is a basic zoom in fly in from a full globe map to a specific location.

<!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.32.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<style>
.fly {
display: block;
position: fixed;
margin: 0px auto;
width: 50%;
height: 40px;
padding:10px;
top: 20px;
left: 20px;
}
</style>
<div id='map'></div>
<div class="fly">
<img src="believe100%25gold.png">
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZXJlaXQiLCJhIjoiY2l6OHEyZ2V5MDAxdDMzcW91ODRrMDl4biJ9.7ojFi6EbEIpatAkrYew55w';
/*
var start = [-122.32, 47.61];
var end = [-157.5, 84.47];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/ereit/ciz8q4d9800202ro0b41ud90t',
center: start,
zoom: 9
});

var isAtStart = true;

var travel = function () {
// depending on whether we're currently at point a or b, aim for
// point a or b
var target = isAtStart ? end : start;

// and now we're at the opposite point
isAtStart = !isAtStart;

map.flyTo({
// These options control the ending camera position: centered at
// the target, at zoom level 9, and north up.
center: target,
zoom: 9,
bearing: 0,

// These options control the flight curve, making it move
// slowly and zoom out almost completely before starting
// to pan.
speed: 0.2, // make the flying slow
curve: 1, // change the speed at which it zooms out

// This can be any easing function: it takes a number between
// 0 and 1 and returns another number between 0 and 1.
easing: function (t) {
return t;
}
});
};

travel();

var timerId = setInterval(function () {
if (map.isMoving() === false) {
travel();
}
}, 250);
*/

var start = 1;
var end = 17;
var seattle = [-122.3216, 47.6163];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/ereit/ciz8q4d9800202ro0b41ud90t',
center: seattle,
zoom: start
});

var isAtStart = true;

var travel = function () {
// depending on whether we're currently at point a or b, aim for
// point a or b
var target = isAtStart ? end : start;

// and now we're at the opposite point
isAtStart = !isAtStart;

//map.setCenter(seattle);

map.zoomTo(
target,
{
duration: 20000,
center: seattle
}
);
};

travel();

var timerId = setInterval(function () {
if (map.isMoving() === false) {
travel();
}
}, 250);
</script>

</body>
</html>

 

 

Published by: reitmane in Information design

Leave a Reply