Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created October 3, 2013 14:29
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 tmcw/6810786 to your computer and use it in GitHub Desktop.
Save tmcw/6810786 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<link href="colorbox.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
<script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
<script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
<script src='csv2geojson.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet'>
<![endif]-->
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
body {font-family: 'Open Sans', sans-serif; padding:0px; color:#414042}
</style>
</head>
<body>
<!--popup styling-->
<style>
img{width:300px;height:200px;margin-left:auto;margin-right:auto;}
img.small{width:203px;height:75px;}
<!--Font Styling-->
b1 {font-size:18px;font-weight:600;}
r1 {font-size:12px;font-weight:700;}
r2{font-size:12px;color:#fff;}
b2 {font-size:13px;font-weight:300italic;color:#414042;}
</style>
<!--Navigation bar-->
<style>
#navigation {background:#fff;font-size:14px;color:#FFF;position:absolute;top:0px;right:0;bottom:0px;width:200px;padding:10px;text-decoration:none;background:rgba(255, 255,255, 0.9);}
#navigation a:hover { background:#cce8fb; }
#navigation2 {position:absolute;font-size:14px;color:#fff;top:195px;right:0;width:200px;text-decoration:none;padding:10px;}
#navigation2 a:hover { background:#cce8fb; }
#navigation3 {position:absolute;font-size:14px;color:#fff;top:215px;right:0;width:200px;text-decoration:none;padding:10px;}
#navigation3 a:hover { background:#cce8fb; }
#navigation4 {position:absolute;font-size:14px;top:235px;right:0;text-decoration:none;width:200px;padding:10px;}
#navigation4 a:hover { background:#cce8fb; }
a:hover {
COLOR: #5eb5de;text-decoration:none;}
a:link { color: #414042; text-decoration: none}
a:visited { color: #414042; text-decoration: none}
a:active { color: #414042; text-decoration: none}
#navigation a {display:block;}
</style>
<div id='map'></div>
<!--Nav bar-->
<div id='navigation'>
<img class="small" src="http://www.mapsforgood.org/patagonia/testenvironment/images/title.png" width="10" height="10" alt=""/>
<br>
<b2> Welcome to the future Patagonia National Park. Zoom in to explore the park-in-progress </b2>
<br><br>
<b2> Fly to:</b2>
<a href='#' lagunas='-47.129951, -72.482300' >Lagunas Altas Trail</a>
<script type='text/javascript'>
document.getElementById('navigation').onclick = function(e) {
var pos = e.target.getAttribute('lagunas');
if (pos) {
var loc = pos.split(',');
map.setView(loc, 13);}}</script></div>
<div id='navigation2'>
<a href='#' casco='-47.117103, -72.484531' >Park Headquarters</a>
<script type='text/javascript'>
document.getElementById('navigation2').onclick = function(e) {
var pos = e.target.getAttribute('casco');
if (pos) {
var loc = pos.split(',');
map.setView(loc, 17);
}
}
</script></div>
<div id='navigation3'>
<a href='#' fullpark='-47, -72.0' >Full Park</a>
<script type='text/javascript'>
document.getElementById('navigation3').onclick = function(e) {
var pos = e.target.getAttribute('fullpark');
if (pos) {
var loc = pos.split(',');
map.setView(loc, 9);
}
}</script></div>
<div id='navigation4'>
<a href='#' aviles='-46.961042, -72.152710' >Avil&eacute;s Trail</a>
<script type='text/javascript'>
document.getElementById('navigation4').onclick = function(e) {
var pos = e.target.getAttribute('aviles');
if (pos) {
var loc = pos.split(',');
map.setView(loc, 11);
}
}
</script>
<!--BASE MAP-->
<script type='text/javascript'>
var map = L.mapbox.map('map', 'mapsforgood.map-xs1az2ul')
.setView([-47, -72.0], 9)
//tooltips as popups
map.gridControl.options.follow = true;
//CSV TO MARKER
var markerLayer= L.mapbox.markerLayer().addTo(map);
markerLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon({
iconUrl: 'https://lh5.googleusercontent.com/-jZxOZpBmGVQ/UBhHCk9myVI/AAAAAAAAAA8/4uI1sYe8rsU/s42/mofgaicon3.png',
"iconSize": [25, 25], // size of the icon
"iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25] // point from which the popup should open relative to the iconAnchor
}));
});
$.ajax({
url: 'points.csv',
success: function csvLoad(csv) {
csv2geojson.csv2geojson(csv, function(err, data) {
markerLayer.setGeoJSON(data);
});
}
});
markerLayer.on('layeradd', function(e) {
// here you call `bindPopup` with a string of HTML you create - the feature
// properties declared above are available under `layer.feature.properties`
var content = '<b1>' + e.layer.feature.properties.title + '<\/b1>' +
'<img src=' + e.layer.feature.properties.image + '>' + '<br><r1>' +
e.layer.feature.properties.blurb + '<\/r1>' + '<br> <a href=' +
e.layer.feature.properties.info + '> Click here for more information';
e.layer.bindPopup(content);
});
map.on('zoomend', showHideMarkers);
function showHideMarkers() {
if (map.getZoom() > 11) {
markerLayer.setFilter(function() { return true; });
} else {
markerLayer.setFilter(function() { return false; });
}
}
showHideMarkers();
markerLayer.eachLayer(function(layer) {
layer.unbindPopup(layer);
});
//Panoramas/////////
var geoJson = [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [ -72.276993,-46.883192]
},
properties: {
url: 'http://mapsforgood.org/360/Valle%20Furioso/',
'marker-color': '#CC0033',
"icon": {
"iconUrl": "https://lh3.googleusercontent.com/-5L8XeJJD8VI/UICwV5TbDNI/AAAAAAAAACA/ZeRgstaAAOc/s25/trail.png",
"iconSize": [25, 25], // size of the icon
"iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25] // point from which the popup should open relative to the iconAnchor
}
}
},
{type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-72.216568,-47.062405]
},
properties: {
url: 'http://mapsforgood.org/360/Cerro%20Torres/',
'marker-color': '#CC0033',
"icon": {
"iconUrl": "https://lh3.googleusercontent.com/-5L8XeJJD8VI/UICwV5TbDNI/AAAAAAAAACA/ZeRgstaAAOc/s25/trail.png",
"iconSize": [25, 25], // size of the icon
"iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25] // point from which the popup should open relative to the iconAnchor
}
}
},
{type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-72.609158,-47.130068]
},
properties: {
url: 'http://mapsforgood.org/360/confluencia/',
'marker-color': '#CC0033',
"icon": {
"iconUrl": "https://lh3.googleusercontent.com/-5L8XeJJD8VI/UICwV5TbDNI/AAAAAAAAACA/ZeRgstaAAOc/s25/trail.png",
"iconSize": [25, 25], // size of the icon
"iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25] // point from which the popup should open relative to the iconAnchor
}
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-72, -47.1]
},
properties: {
url: 'https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F111315699',
'marker-color': '#0099ff',
"icon": {
"iconUrl": "https://lh3.googleusercontent.com/-5L8XeJJD8VI/UICwV5TbDNI/AAAAAAAAACA/ZeRgstaAAOc/s25/trail.png",
"iconSize": [25, 25], // size of the icon
"iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25] // point from which the popup should open relative to the iconAnchor
}
}
}];
map.markerLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon(feature.properties.icon));
});
map.markerLayer.setGeoJSON(geoJson);
map.on('zoomend', showHideMarkers);
function showHideMarkers() {
if (map.getZoom() > 9) {
map.markerLayer.setFilter(function() { return true; });
} else {
map.markerLayer.setFilter(function() { return false; });
}
if (map.getZoom() > 11) {
markerLayer.setFilter(function() { return true; });
} else {
markerLayer.setFilter(function() { return false; });
}
}
showHideMarkers();
markerLayer.eachLayer(function(layer) {
layer.unbindPopup(layer);
});
// Listen for individual marker clicks
map.markerLayer.on('click',function(e) {
$.colorbox({
iframe: true,
href: e.layer.feature.properties.url,
width: 700,
height: 400
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment