Skip to content

Instantly share code, notes, and snippets.

@jhnklly

jhnklly/index.html

Last active August 29, 2015 14:25
Show Gist options
  • Save jhnklly/3d9d2cd93f53d4e704db to your computer and use it in GitHub Desktop.
Save jhnklly/3d9d2cd93f53d4e704db to your computer and use it in GitHub Desktop.
Download ZIP
better bathy
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
<script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
<script src='http://d3js.org/colorbrewer.v1.min.js' type="text/javascript"></script>
<link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>
<style>
html, body, #myMap{
height: 100%;
width: 100%;
margin: 0; padding: 0;
}
#myMap {
/*background-color: rgb(42,35,35);
*/
width: 100%;
height: 100%;
}
.mapFeatures {
vector-effect: non-scaling-stroke;
/*stroke-width: 1;
*/fill: none;
}
.tile-background {
fill: rgb(42,35,35);
}
.legendDiv{
position: absolute;
bottom: 70px;
width: 1420px;
left: 15px;
height: 100px;
}
.legendDiv svg{
padding: 15px;
}
.bar {
fill: steelblue;
}
.bar:hover{
stroke: red;
}
.axis{
fill: gray;
stroke: none;
font-weight: 200;
}
.axis path{
display: none;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: gray;
stroke: gray;
shape-rendering: crispEdges;
}
#counter { font-family: monospace, sans-serif; background: rgba(255,255,255,0.5); }
.above { position: absolute; z-index: 99; margin: 5px;}
.top { top: 0px; }
.right { right: 0px; }
.bottom { bottom: 0px; }
.left {left: 0px; }
.hoverFeature {
stroke: rgba(68, 167, 228, 1); /*blue*/
stroke-width: 3;
}
.popup {
position: absolute;
left: 20px;
bottom: 80px;
font-family: sans-serif;
font-size: 11px;
color: #666;
/*visibility: hidden;
*/border-radius: 3px;
pointer-events: none;
border: 1px solid #bbb;
padding: 8px;
background-color: rgba(255, 255, 255, .95);
max-height: 500px;
overflow: normal;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
padding: 7px;
}
.detailKey {
background: #eee;
opacity: .8;
text-transform: uppercase;
font-weight: 600;
}
.detailVal {
background: rgba(255,255,255,0.8);
}
</style>
</head>
<body>
<div id="myMap"></div>
<script>
// Counter:
d3.select('body')
.append('div')
.attr('id','counter')
.attr('class','above top left')
var G = {};
G.count_v = 0;
G.count_f = 0;
G.z = 11;
var sf = [
{lon: -122.520, lat: 37.700},
{lon: -122.352, lat: 37.817}
];
var map = mapsense.map("#myMap") //tell it where to go
//.extent(sf)
.center({lat:33.7027, lon:-118.1781})
.zoom(11.5);
map.add(mapsense.hash());
/*var base = mapsense.basemap().apiKey('key-b32446b5948d487cba9c7a1e429e0565');
map.add(base);*/
var staging_earth_url = 'https://{S}-staging-api.mapsense.co/universes/mapsense.earth/{Z}/{X}/{Y}.topojson?s=10&ringSpan=8&density=150';
staging_earth_url += '&api-key=key-282e18173cbd481a9064073196b934ec';
//only one equal in "not equal" staging_earth_url += "&where=layer!='land'";
staging_earth_url += "&where=layer=='land'";
var earth = mapsense.topoJson() //init a topojson layer
.url(mapsense.url(staging_earth_url).hosts(['a', 'b', 'c', 'd']))
.clip(true)
.selection(
function(d){
d.attr("class", "mapFeatures") //use a d3 selection to class each feature
.style("stroke","#bbb")
.style("fill","#ddd")
}
)
;
map.add(earth);
map.on("move", function() {
// get the current zoom
var z = map.zoom();
// show/hide parcels
if (G.z !== map.zoom()) {
G.z = map.zoom();
G.count_v = 0;
G.count_f = 0;
}
});
//tile url
var url = "https://{S}-staging-api.mapsense.co/universes/noaa_jmk/{Z}/{X}/{Y}.topojson";
url += '?api-key=key-b32446b5948d487cba9c7a1e429e0565';
url += '&s=10';
url += '&select=minz,valdco';
url += '&lineSpan=10';
/* url += "&group.m0=minz==0";
url += "&group.m12=minz==12";
url += "&group.m13=minz==13";
url += "&group.m14=minz==14";*/
//url += '&where=minz!=0';
// no: url += '&where=minz<>12';
// From http://staging.mapsense-developer.divshot.io/tileViewer/?tileset=noaa_contours_minz
// https://a-staging-api.mapsense.co/universes/noaa_contours_minz/12/704/1640.topojson?s=10&ringSpan=8&density=150
//create a coloring function
var cb_plus = colorbrewer['YlGnBu'][9];
cb_plus.unshift('#f2ad0a');
cb_plus.unshift('#f2820a');
var colorRamp = d3.scale.linear()
.domain([0,4,8,12,16,20,24,28,32,36,40])
.range(colorbrewer['YlGnBu'][9])
;
//.range(["blue", "green", "purple"]);
var classQuantile = d3.scale.quantile()
.domain([0,40])
.range(d3.range(0,40,1))
//.range(d3.range(0,9,1))
;
var selection_function = (function() {
var whitelist = ['valdco'];
/* The id of the previously hovered-over feature. */
var hoverId = null;
return function(s) {
s.attr("class", "mapFeatures") //use a d3 selection to class each feature
.attr("stroke", function(feature){
G.count_v += feature.geometry.coordinates.length;
G.count_f += 1;
d3.select('#counter')
.html( 'vertices: ' + d3.format("0,000")(G.count_v) + '<br>features: ' + d3.format("0,000")(G.count_f) );
var ret = colorRamp(feature.properties.valdco);
return ret;
})
.attr("stroke-width", function(feature){
v = feature.properties.valdco;
var ret=0.5;
if ( v % 2 == 0 ) ret = 1;
if ( v % 5 == 0 ) ret = 2;
if ( v % 10 == 0 ) ret = 3;
return ret;
})
.attr("class", function(feature){
//console.log(feature.properties);
return "_" + classQuantile(feature.properties.valdco) + " mapFeatures"
})
s.attr("class", function(d) {
var classes = ["mapFeatures"],
props = d.properties;
if (props) {
if (props.valdco) classes.push(props.valdco);
}
if (d.id !== null && d.id == hoverId) {
classes.push("hoverFeature");
}
return classes.join(' ');
})
.on("mouseover", function(d) {
if ( d.properties.minz >= 5 ) {
d3.select(this).classed("selected",true);
}
var text = "";
var value;
text += '<div class="detailCard"><table><tbody>';
if (whitelist.length > 0) {
for (var i = 0; i < whitelist.length; i++) {
key = whitelist[i];
if ( d.properties && d.properties[key] ) {
value = d.properties[key];
value = isFloat(value) ? value.toFixed(4) : value;
text += '<tr><td class="detailKey">' + key + '</td><td class="detailVal">' + value + '</td></tr>';
}
}
} else {
for (var key in d.properties) {
text += '<tr><td class="detailKey">' + key + '</td><td class="detailVal">' + d.properties[key] + '</td></tr>';
}
}
tooltip.html(text);
if (d.id != hoverId) {
hoverId = d.id;
layer.selection( selection_function );
}
return tooltip.style("visibility", "visible");
})
/*.on("mousemove", function(){return tooltip.style("top",(d3.event.pageY-0)+"px").style("left",(d3.event.pageX+20)+"px");})
.on("mouseout", function(d){
d3.select(this).classed("selected",false);
return tooltip.style("visibility", "hidden");
})
*/
;
};
})();
var layer = mapsense.topoJson() //init a topojson layer
.url(mapsense.url(url).hosts(['a', 'b', 'c', 'd'])) //tell it where to look
.clip(true)
.selection(selection_function)
map.add(layer); //add the topojson layer to your map
var tooltip = d3.select('body')
.append("div")
.attr("class","popup");
//create a legend that interacts with the map
svg = d3.select("body")
.append("div")
.attr("class", "legendDiv")
.append("svg")
.style("width", '100%')
svg.append("g").selectAll(".bar")
.data(d3.range(0,40,1))
//.data(d3.range(0,9,1))
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d,i){return i*20;})
.style("fill", function(d){return colorRamp(d)})
.attr("width", 18)
.attr("y", 100)
.attr("height", 30)
.on("mouseover", function(d){
d3.selectAll("._" + d).style("stroke", "red")
})
.on("mouseout", function(d){
d3.selectAll("._" + d).style("stroke", function(){
return colorRamp(d3.select(this).datum().properties.valdco)
})
})
x = d3.scale.linear().domain([0,40]).range([0,800]);
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(10," + 130 + ")")
.call(xAxis)
function isFloat(n){
var r = Number(n) && n%1!==0;
return r;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment