Skip to content

Instantly share code, notes, and snippets.

@rclark

rclark/index.html

Last active December 18, 2015 11:59
Show Gist options
  • Save rclark/5779893 to your computer and use it in GitHub Desktop.
Save rclark/5779893 to your computer and use it in GitHub Desktop.
Download ZIP
TopoJSON was made for geologic maps.
Raw
index.html
<!DOCTYPE html>
<html lang="en" style="height:100%; width:100%; padding:0; margin:0;">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
</head>
<body style="height:100%; width:100%; padding:0; margin:0;">
<div id="map" style="height:100%; width:100%; padding:0; margin:0;"></div>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="style.js"></script>
<script>
L.TopoJSON = L.GeoJSON.extend({
addData: function(jsonData) {
if (jsonData.type === "Topology") {
for (key in jsonData.objects) {
var geojson = topojson.feature(jsonData, jsonData.objects[key]);
L.GeoJSON.prototype.addData.call(this, geojson);
}
}
else {
L.GeoJSON.prototype.addData.call(this, jsonData);
}
}
});
</script>
<script>
var map = new L.Map("map", {
center: new L.LatLng(32.1855, -110.4356),
zoom: 12,
layers: [new L.TileLayer("http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg")]
});
function jsonp(data) {
var polys = new L.TopoJSON(data, { style: hpvStyle });
polys.addTo(map);
}
</script>
<script src="https://rawgithub.com/rclark/topojson-experiments/master/happyvalleyp.js"></script>
</body>
</html>
Raw
style.js
function hpvStyle(feature) {
if ("MapUnit" in feature.properties) {
switch (feature.properties.MapUnit) {
case "P*et": return { weight: 0, fillOpacity: 0.7, fillColor: "#59E8FF" };
case "Qyaf": return { weight: 0, fillOpacity: 0.7, fillColor: "#ECECC0" }
case "Ygg": return { weight: 0, fillOpacity: 0.7, fillColor: "#9E2637" };
case "Ks": return { weight: 0, fillOpacity: 0.7, fillColor: "#1B9E46" }
case "|ct": return { weight: 0, fillOpacity: 0.7, fillColor: "#00667D" };
case "YXgb": return { weight: 0, fillOpacity: 0.7, fillColor: "#B21766" };
case "d": return { weight: 0, fillOpacity: 0.7, fillColor: "#E9E9E9" };
case "P*eht": return { weight: 0, fillOpacity: 0.7, fillColor: "#7D5B00" };
case "Xgr": return { weight: 0, fillOpacity: 0.7, fillColor: "#7F615D" };
case "Dm_at": return { weight: 0, fillOpacity: 0.7, fillColor: "#AC7DFE" };
case "Yg": return { weight: 0, fillOpacity: 0.7, fillColor: "#BA0B7B" };
case "Ygu": return { weight: 0, fillOpacity: 0.7, fillColor: "#BA827B" };
case "QTbx": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFF04F" };
case "Ygp": return { weight: 0, fillOpacity: 0.7, fillColor: "#B21766" };
case "K_s": return { weight: 0, fillOpacity: 0.7, fillColor: "#56E595" };
case "Dm": return { weight: 0, fillOpacity: 0.7, fillColor: "#6687FF" };
case "*h": return { weight: 0, fillOpacity: 0.7, fillColor: "#69CCF0" };
case "Qyc": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFF00" };
case "Pc": return { weight: 0, fillOpacity: 0.7, fillColor: "#21C4FF" };
case "Tgb": return { weight: 0, fillOpacity: 0.7, fillColor: "#B2100B" };
case "_Yqt": return { weight: 0, fillOpacity: 0.7, fillColor: "#D15400" };
case "YXgjm": return { weight: 0, fillOpacity: 0.7, fillColor: "#871C2F" };
case "Tcg": return { weight: 0, fillOpacity: 0.7, fillColor: "#CB8C4F" };
case "Pe": return { weight: 0, fillOpacity: 0.7, fillColor: "#B2C4FF" };
case "Qy3": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFF4B" };
case "P*e": return { weight: 0, fillOpacity: 0.7, fillColor: "#9ED9FF" };
case "Pcn": return { weight: 0, fillOpacity: 0.7, fillColor: "#6687FF" };
case "Qi1": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFEBB4" };
case "*hMe": return { weight: 0, fillOpacity: 0.7, fillColor: "#00FFFF" };
case "Tgl": return { weight: 0, fillOpacity: 0.7, fillColor: "#FE8F00" };
case "Qy1": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFF96" };
case "*hMet": return { weight: 0, fillOpacity: 0.7, fillColor: "#99E0FE" };
case "_a": return { weight: 0, fillOpacity: 0.7, fillColor: "#8C4DD1" };
case "Qi3": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFEB78" };
case "Xgjm": return { weight: 0, fillOpacity: 0.7, fillColor: "#B21766" };
case "Tcy": return { weight: 0, fillOpacity: 0.7, fillColor: "#E3BF96" };
case "Tsmm": return { weight: 0, fillOpacity: 0.7, fillColor: "#EFC359" };
case "Me": return { weight: 0, fillOpacity: 0.7, fillColor: "#BFEAF9" };
case "Yd": return { weight: 0, fillOpacity: 0.7, fillColor: "#BA00AB" };
case "Qi2": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFEB96" };
case "none": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFFFF" };
case "none": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFFFF" };
case "QTa": return { weight: 0, fillOpacity: 0.7, fillColor: "#E1E1C8" };
case "Yp": return { weight: 0, fillOpacity: 0.7, fillColor: "#B984CC" };
case "Ygl": return { weight: 0, fillOpacity: 0.7, fillColor: "#DB8B78" };
case "TXgd": return { weight: 0, fillOpacity: 0.7, fillColor: "#C69500" };
case "none": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFFFF" };
case "none": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFFFF" };
case "Tgh": return { weight: 0, fillOpacity: 0.7, fillColor: "#FF5900" };
case "Ps": return { weight: 0, fillOpacity: 0.7, fillColor: "#B984CC" };
case "Kv": return { weight: 0, fillOpacity: 0.7, fillColor: "#E8FF00" };
case "Xp": return { weight: 0, fillOpacity: 0.7, fillColor: "#7B956C" };
case "TJm": return { weight: 0, fillOpacity: 0.7, fillColor: "#8A23A8" };
case "Xgj": return { weight: 0, fillOpacity: 0.7, fillColor: "#C4C4C4" };
case "none": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFFFF" };
case "Jg": return { weight: 0, fillOpacity: 0.7, fillColor: "#D5FD9A" };
case "_b": return { weight: 0, fillOpacity: 0.7, fillColor: "#FF873D" };
case "Tcym": return { weight: 0, fillOpacity: 0.7, fillColor: "#F0D50E" };
case "Qy2": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFF78" };
case "Ksl": return { weight: 0, fillOpacity: 0.7, fillColor: "#69B9C6" };
case "none": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFFFF" };
case "none": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFFFF" };
case "none": return { weight: 0, fillOpacity: 0.7, fillColor: "#FFFFFF" };
case "|Xpt": return { weight: 0, fillOpacity: 0.7, fillColor: "#A88200" };
case "Qtc": return { weight: 0, fillOpacity: 0.7, fillColor: "#F5EBCD" };
case "Tcu": return { weight: 0, fillOpacity: 0.7, fillColor: "#E0A491" };
case "TXa": return { weight: 0, fillOpacity: 0.7, fillColor: "#F000FF" };
}
}
if ("Symbol" in feature.properties) {
if (feature.properties.Symbol < 53) {
return { fillOpacity: 0, weight: 0.5, opacity: 1, color: "#000" }
} else {
return { fillOpacity: 0, weight: 2, opacity: 1, color: "#000" }
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment