mapsense-examples/index.html

## readme.mkd

      
    Raw
  

              readme.mkd
            
          
    One of the advantages of working with vector data is that it is available in the client and easy to manipulate on the fly.  This tutorial demonstrates how to add an interactive legend that changes the color of the map data as the user mouses over the range of elevations.


## 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: 420px;
    left: 15px;
    height: 100px;
}
.legendDiv svg{
    padding: 15px;
}
.bar {
    fill: steelblue;
}
.bar:hover{
    stroke: red;
}
.axis{
    fill: white;
    stroke: none;
    font-weight: 200;
}
.axis path{
    display: none;
}
.axis text {
      font: 10px sans-serif;
}
.axis path,
.axis line {
    fill: white;
    stroke: white;
    shape-rendering: crispEdges;
}
</style>

</head>
<body>

    <div id="myMap"></div>

<script>

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)


    //tile url
    var url = "https://{S}-api.mapsense.co/explore/api/universes/mapsense.sf_contours/{Z}/{X}/{Y}.topojson?api-key=key-2d5eacd8b924489c8ed5e8418bd883bc";

    //create a coloring function
    var colorRamp = d3.scale.linear()
      .domain([0, 200, 800])
      .range(["green", "yellow", "white"]);

    var classQuantile = d3.scale.quantile()
        .domain([0,1000])
        .range(d3.range(0,800,50))

    var layer = mapsense.topoJson() //init a topojson layer
        .url(mapsense.url(url).hosts(['a', 'b', 'c', 'd'])) //tell it where to look
        .selection(
            function(d){
                d.attr("class", "mapFeatures") //use a d3 selection to class each feature
                .style("stroke", function(feature){ //color each feature by its elevation
                    return colorRamp(feature.properties.elevation)
                })
                .attr("class", function(feature){
                    return "_" + classQuantile(feature.properties.elevation) + " 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,800,50))
      .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.elevation)

        })
      })

    x = d3.scale.linear().range([0,300]).domain([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>
	<!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: 420px;
	left: 15px;
	height: 100px;
	}
	.legendDiv svg{
	padding: 15px;
	}
	.bar {
	fill: steelblue;
	}
	.bar:hover{
	stroke: red;
	}
	.axis{
	fill: white;
	stroke: none;
	font-weight: 200;
	}
	.axis path{
	display: none;
	}
	.axis text {
	font: 10px sans-serif;
	}
	.axis path,
	.axis line {
	fill: white;
	stroke: white;
	shape-rendering: crispEdges;
	}
	</style>

	</head>
	<body>

	<div id="myMap"></div>

	<script>

	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)


	//tile url
	var url = "https://{S}-api.mapsense.co/explore/api/universes/mapsense.sf_contours/{Z}/{X}/{Y}.topojson?api-key=key-2d5eacd8b924489c8ed5e8418bd883bc";

	//create a coloring function
	var colorRamp = d3.scale.linear()
	.domain([0, 200, 800])
	.range(["green", "yellow", "white"]);

	var classQuantile = d3.scale.quantile()
	.domain([0,1000])
	.range(d3.range(0,800,50))

	var layer = mapsense.topoJson() //init a topojson layer
	.url(mapsense.url(url).hosts(['a', 'b', 'c', 'd'])) //tell it where to look
	.selection(
	function(d){
	d.attr("class", "mapFeatures") //use a d3 selection to class each feature
	.style("stroke", function(feature){ //color each feature by its elevation
	return colorRamp(feature.properties.elevation)
	})
	.attr("class", function(feature){
	return "_" + classQuantile(feature.properties.elevation) + " 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,800,50))
	.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.elevation)

	})
	})

	x = d3.scale.linear().range([0,300]).domain([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>