Locations visited by Fazenda Ambiental Fortaleza coffee from farm to cup.
- Fazenda Ambiental Fortaleza
- Port of Santos
- Port of Houston
- Dupuy Storage
- Casa Brasil Coffees
- Casa Brasil Cafe at Foreign & Domestic
Built with OpenLayers 3
Locations visited by Fazenda Ambiental Fortaleza coffee from farm to cup.
Built with OpenLayers 3
<!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 © <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> |