Skip to content

Instantly share code, notes, and snippets.

@dhoboy

dhoboy/README.md

Last active August 29, 2015 14:12
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 dhoboy/a2134fbfd30d90edd06a to your computer and use it in GitHub Desktop.
Save dhoboy/a2134fbfd30d90edd06a to your computer and use it in GitHub Desktop.
Download ZIP
Song Tea and Ceramics Map
Raw
README.md

This is a map of Song Tea and Ceramics's 2014 tea collection. Click each marker on the map to see where the teas are from. Tea collection information taken from their website. This map was made with d3 and leaflet.

Raw
index.html
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map { height: 97%; }
#key { font-family: "Times New Roman"; }
#key a { text-decoration: none; color: #B23403;}
</style>
<title>Song Tea's 2014 Collection</title>
</head>
<body>
<div id="map"></div>
<script>
// establish the map tile
var map = L.map('map').setView([29.16, 117.09], 5); // large view of china/taiwan
L.tileLayer('http://{s}.tiles.mapbox.com/v3/dhoboy.kibmmo19/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(map);
// extend this to add pdf2json later and pull straight from internet...
var tea_data = [
{"name":"Dragonwell", "location":"Zhejiang", "latitude":"30.16", "longitude":"120.09"},
{"name":"Bird Tongue", "location":"Sichuan", "latitude":"30.39", "longitude":"104.04"},
{"name":"Gan Lu", "location":"Sichuan", "latitude":"30.39", "longitude":"104.04"},
{"name":"Wild Mao Feng", "location":"Anhui", "latitude":"31.51", "longitude":"117.17"},
{"name":"Fragrant Leaf", "location":"Fujian", "latitude":"26.6", "longitude":"119.17"},
{"name":"Snow Jasmine", "location":"Sichuan", "latitude":"30.39", "longitude":"104.04"},
{"name":"Gold Peony White", "location":"Fujian", "latitude":"26.6", "longitude":"119.17"},
{"name":"Lishan Shuixian", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Dragon Phoenix Shan Lin Xi", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Lishan Winter Sprout", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Shan Lin Xi Winter Sprout", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Gold Peony Twisted Leaf", "location":"Fujian", "latitude":"26.6", "longitude":"119.17"},
{"name":"Gold Peony Rolled Leaf", "location":"Fujian", "latitude":"26.6", "longitude":"119.17"},
{"name":"Old Tree Shuixian", "location":"Fujian", "latitude":"26.6", "longitude":"119.17"},
{"name":"Red Water Shuixian", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Red Water Tieguanyin", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Nantou Dark", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Formosa Dahongpao 1992", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"1960s Baozhong", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Twenty One", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Eighteen", "location":"Taiwan", "latitude":"23.41", "longitude":"120.57"},
{"name":"Old Tree Yunnan Red", "location":"Yunnan", "latitude":"25.2", "longitude":"102.42"},
{"name":"Meizhan Red", "location":"Fujian", "latitude":"26.6", "longitude":"119.17"},
{"name":"Gold Peony Red", "location":"Fujian", "latitude":"26.6", "longitude":"119.17"}
];
// display the data in the map
var m = {};
tea_data.forEach(function(tea){
if (m[tea.location]) {
m[tea.location]._popup._content += "<br>";
m[tea.location]._popup._content += tea.name;
}
else {
m[tea.location] = L.marker([tea.latitude, tea.longitude]).bindPopup("<div style='text-decoration:underline;'>" + tea.location + "</div>" + tea.name).addTo(map);
}
});
</script>
<div id="key"><a href="http://www.songtea.com" target="_blank">Song Tea and Ceramics</a> -- 2014 Tea Collection. Click the icons to see where the teas are from.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment