Skip to content

Instantly share code, notes, and snippets.

@bmcbride

bmcbride/index.html

Created May 2, 2014 19:31
Show Gist options
  • Save bmcbride/108b35d567f6f39b6845 to your computer and use it in GitHub Desktop.
Save bmcbride/108b35d567f6f39b6845 to your computer and use it in GitHub Desktop.
Download ZIP
Fulcrum GeoJSON Data Shares
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Fulcrum Data Shares</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
/* Basemap Layers */
var mapquestOSM = L.tileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {
maxZoom: 19,
subdomains: ["otile1", "otile2", "otile3", "otile4"],
attribution: 'Tiles courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">. Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, CC-BY-SA.'
});
var mapquestOAM = L.tileLayer("http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg", {
maxZoom: 18,
subdomains: ["oatile1", "oatile2", "oatile3", "oatile4"],
attribution: 'Tiles courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>. Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'
});
var mapquestHYB = L.layerGroup([L.tileLayer("http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg", {
maxZoom: 18,
subdomains: ["oatile1", "oatile2", "oatile3", "oatile4"]
}), L.tileLayer("http://{s}.mqcdn.com/tiles/1.0.0/hyb/{z}/{x}/{y}.png", {
maxZoom: 19,
subdomains: ["oatile1", "oatile2", "oatile3", "oatile4"],
attribution: 'Labels courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">. Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, CC-BY-SA. Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'
})]);
/* Overlay Layers*/
var monuments = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
title: feature.properties["Monument Name"],
riseOnHover: true
});
},
onEachFeature: function (feature, layer) {
if (feature.properties) {
var popup = "";
for (var property in feature.properties) {
if (property === "Monument Photos" && feature.properties["Monument Photos"] !== null) {
var photoArray = feature.properties[property].split(",");
for (var i = 0; i < photoArray.length; i++) {
photoArray[i] = {href: "https://web.fulcrumapp.com/shares/f2516749743ade47/photos/"+photoArray[i]};
};
feature.properties[property] = "<a id='photos' href='#'>View Photos</a>";
};
if (property === "Monument Name" || property === "Address Full" || property === "Does this monument have statues?" || property === "Monument Happiness Meter" || property === "Date Visited" || property === "Monument Photos") {
popup += "<p><b>"+property+":</b><br/>"+feature.properties[property]+"</p>";
};
}
layer.bindPopup(popup);
layer.on({
popupopen: function () {
$('#photos').click(function () {
$.fancybox(photoArray, {
"type": "image",
"showNavArrows": true,
"padding": 0,
"scrolling": "no",
beforeShow: function () {
this.title = "Photo " + (this.index + 1) + " of " + this.group.length + (this.title ? " - " + this.title : "");
},
helpers: {
overlay: {
css: {
"overflow": "hidden"
}
}
}
});
return false;
})
}
});
}
}
});
$.getJSON("https://web.fulcrumapp.com/shares/f2516749743ade47.geojson?human_friendly=true&skip_system_columns=true", function (data) {
monuments.addData(data);
}).complete(function () {
map.fitBounds(monuments.getBounds());
});
var statues = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
title: feature.properties["Statue Gender"],
riseOnHover: true
});
},
onEachFeature: function (feature, layer) {
if (feature.properties) {
var popup = "";
for (var property in feature.properties) {
if (property === "Statue Photos" && feature.properties["Statue Photos"] !== null) {
var photoArray = feature.properties[property].split(",");
for (var i = 0; i < photoArray.length; i++) {
photoArray[i] = {href: "https://web.fulcrumapp.com/shares/f2516749743ade47/photos/"+photoArray[i]};
};
feature.properties[property] = "<a id='photos' href='#'>View Photos</a>";
};
if (property === "Statue Mood" || property === "Statue Gender" || property === "Statue Photos") {
popup += "<p><b>"+property+":</b><br/>"+feature.properties[property]+"</p>";
};
}
layer.bindPopup(popup);
layer.on({
popupopen: function () {
$('#photos').click(function () {
$.fancybox(photoArray, {
"type": "image",
"showNavArrows": true,
"padding": 0,
"scrolling": "no",
beforeShow: function () {
this.title = "Photo " + (this.index + 1) + " of " + this.group.length + (this.title ? " - " + this.title : "");
},
helpers: {
overlay: {
css: {
"overflow": "hidden"
}
}
}
});
return false;
})
}
});
}
}
});
$.getJSON("https://web.fulcrumapp.com/shares/f2516749743ade47.geojson?child=statues&human_friendly=true&skip_system_columns=true", function (data) {
statues.addData(data);
});
map = L.map("map", {
layers: [mapquestOSM, monuments]
}).fitWorld();
var baseLayers = {
"Street Map": mapquestOSM,
"Aerial Imagery": mapquestOAM,
"Imagery with Streets": mapquestHYB
};
var overlays = {
"Monuments": monuments,
"Statues": statues
};
var layerControl = L.control.layers(baseLayers, overlays, {
collapsed: false
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment