Skip to content

Instantly share code, notes, and snippets.

@jseppi

jseppi/README.md

Last active August 29, 2015 14:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jseppi/b2acfbdbd85b6a35ab1c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jseppi/b2acfbdbd85b6a35ab1c to your computer and use it in GitHub Desktop.
Download ZIP
Flight of the Coffee Bean
Raw
README.md
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">
<style>
body {
font-family: sans-serif;
}
.map {
height: 600px;
width: 100%;
}
.ol-popup {
display: none;
position: absolute;
width: 130px;
background-color: white;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 40px;
left: -76px;
text-align:center;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 75px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 75px;
margin-left: -11px;
}
</style>
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<title>Flight of the Coffee Bean</title>
</head>
<body>
<div id="map" class="map">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/javascript">
var locations = [
{
name: 'Fazenda Ambiental Fortaleza',
lnglat: [-46.787446, -21.41371],
zoom: 9,
icon: {
maki: 'farm',
color: '12a51c',
},
anim: {
duration: 3000,
type: 'pan'
}
},
{
name: 'Port of Santos',
lnglat: [-46.29261, -23.98223],
zoom: 6,
icon: {
maki: 'ferry',
color: '000eb8',
},
anim: {
duration: 2000,
type: 'pan'
}
},
{
name: 'Port of Houston',
lnglat: [-95.27241, 29.73000],
zoom: 5,
icon: {
maki: 'ferry',
color: '000eb8',
},
anim: {
duration: 5000,
type: 'fly'
}
},
{
name: 'Dupuy Storage',
lnglat: [-95.37669, 29.67991],
zoom: 14,
icon: {
maki: 'warehouse',
color: 'FF1919',
},
anim: {
duration: 3000,
type: 'pan'
}
},
{
name: 'Casa Brasil Coffees',
lnglat: [-97.76232, 30.21462],
zoom: 14,
icon: {
maki: 'cafe',
color: '302013',
},
anim: {
duration: 5000,
type: 'fly'
}
},
{
name: 'Casa Brasil Cafe at Foreign & Domestic',
lnglat: [-97.71954, 30.31707],
zoom: 14,
icon: {
maki: 'restaurant',
color: 'cccc00',
},
anim: {
duration: 3000,
type: 'pan'
}
}
];
function showPopup(loc) {
overlay.setPosition(merc(loc.lnglat));
content.innerHTML = '<strong>'+loc.name+'</strong>';
container.style.display = 'block';
};
function hidePopup() {
container.style.display = 'none';
}
function flyTo(loc) {
var view = map.getView();
var duration = loc.anim.duration;
hidePopup();
var zoomDuration = 2000;
var zoom = ol.animation.zoom({
duration: zoomDuration,
resolution: view.getResolution()
});
map.beforeRender(zoom);
view.setZoom(loc.zoom);
setTimeout(function () {
var pan = ol.animation.pan({
duration: duration,
source:(view.getCenter())
});
var bounce = ol.animation.bounce({
duration: duration,
resolution: 4 * view.getResolution()
});
if (loc.anim.type === 'fly') {
map.beforeRender(pan, bounce);
}
else if (loc.anim.type === 'pan') {
map.beforeRender(pan);
}
var prevLayer = currLocLayer;
currLocLayer = makeMarker(loc);
map.addLayer(currLocLayer);
view.setCenter(merc(loc.lnglat));
setTimeout(function () {
if (prevLayer) {
map.removeLayer(prevLayer);
}
showPopup(loc);
}, duration);
}, zoomDuration);
}
function merc(lnglat) {
return ol.proj.transform(lnglat, 'EPSG:4326', 'EPSG:3857');
}
function makeMarker (loc) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(merc(loc.lnglat)),
name: loc.name
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
src: 'https://api.tiles.mapbox.com/v3/marker/pin-m-' + loc.icon.maki + '+' + loc.icon.color + '.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
return vectorLayer;
}
function loop() {
var currLocIndex = 0;
window.setInterval(function () {
var nextLocIndex = (currLocIndex + 1) % locations.length;
flyTo(locations[nextLocIndex]);
currLocIndex = nextLocIndex;
}, 10000); // repeat forever, polling every 3 seconds
}
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay({
element: container
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls: [
'https://a.tiles.mapbox.com/v3/jseppi.ipgbh1ko/{z}/{x}/{y}.png',
'https://b.tiles.mapbox.com/v3/jseppi.ipgbh1ko/{z}/{x}/{y}.png',
'https://c.tiles.mapbox.com/v3/jseppi.ipgbh1ko/{z}/{x}/{y}.png',
'https://d.tiles.mapbox.com/v3/jseppi.ipgbh1ko/{z}/{x}/{y}.png'
],
attributions: [new ol.Attribution({
html: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
})]
})
})
],
overlays: [overlay],
view: new ol.View({
center: merc(locations[0].lnglat),
zoom: locations[0].zoom
})
});
var currLocLayer = makeMarker(locations[0]);
map.addLayer(currLocLayer);
showPopup(locations[0]);
loop();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment