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/f97358a76061148b360b to your computer and use it in GitHub Desktop.
Save jhnklly/f97358a76061148b360b to your computer and use it in GitHub Desktop.
Download ZIP
bathymetry contours
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>
<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; }
</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.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;
}
});
//tile url
var url = "https://{S}-staging-api.mapsense.co/universes/noaa_contours_minz2/{Z}/{X}/{Y}.topojson";
url += '?api-key=key-b32446b5948d487cba9c7a1e429e0565';
url += '&s=10';
url += '&select=minz,valdco';
url += '&&lineSpan=8';
//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 colorRamp = d3.scale.linear()
.domain([0, 20, 40])
.range(["blue", "green", "purple"]);
var classQuantile = d3.scale.quantile()
.domain([0,40])
.range(d3.range(0,40,1))
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(
function(d){
d.attr("class", "mapFeatures") //use a d3 selection to class each feature
.attr("stroke", function(feature){ //color each feature by its elevation
//return "blue";
//console.log(feature.geometry.coordinates);
// feature.arcs is array of arrays of arrays
/*for (var i = 0; i < feature.geometry.coordinates.length; i++) {
console.log(feature.geometry.coordinates[i]);
};
*/
G.count_v += feature.geometry.coordinates.length;
d3.select('#counter')
.html( 'vertex count: ' + d3.format("0,000")(G.count_v) );
return colorRamp(feature.properties.valdco)
})
.attr("stroke-width", function(feature){
v = feature.properties.valdco;
var ret=0.5;
if ( v % 10 == 0 ) ret = 3;
if ( v % 5 == 0 ) ret = 2;
if ( v % 1 == 0 ) ret = 1;
//console.log(ret);
return ret;
})
.attr("class", function(feature){
//console.log(feature.properties);
return "_" + classQuantile(feature.properties.valdco) + " mapFeatures"
})
}
)
map.add(layer); //add the topojson layer to your map
//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))
.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)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment