jhnklly/index.html

## index.html
<html>
    <head>
        <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 type="text/javascript" src="http://developer.mapsense.co/mapsense.js" charset="utf-8"></script>

        <style>
            body {
                background-color: #ddd;
            }
            .map {
                background-color: transparent;
                width: 100%;
                height: 100%;
            }
            .mapFeatures {
                vector-effect: non-scaling-stroke;
                stroke: grey;
                fill : none;
            }
            .mapFeaturesBuffer {
                stroke-width: 20px;
                stroke: none;
                fill: none;
            }
            .tile-background {
                fill: none;
            }

            .popup {
              position: relative;
              text-align: center;
              /*width: 300px;
              height: 50px;*/
              padding: 10px;
              font: 16px sans-serif;
              border: solid 2px #555;
              border-radius: 3px;
              pointer-events: none;
              background-color: rgba(255,255,255,0.75);
            }


        </style>
    </head>

    <body>
        <script>
            //create your containing svg
            var svg = d3.select('body').append('svg')

            var map = mapsense.map() // init the map
                .container(svg.node()) //tell it where to go
                .add(mapsense.interact()) //add interaction
                .center({lon: -122.4, lat: 37.75}) // SF bay area
                //.center({lon: -96, lat: 37.7}) // USA
                .zoom(11); //set a zoom

            //tile url
            var url = "http://{S}-tiles.mapsense.co/mapsense.earth/tile/{Z}/{X}/{Y}.topojson";
            //var url = "https://{S}-tiles.mapsense.co/mapsense.demographics/tile/{Z}/{X}/{Y}.topojson?key=key-a6e5eb71915e464798b60b30e1e52524&where=layer=='state'";

            var layer = mapsense.topoJson() //init a topojson layer
                .url(mapsense.url(url).hosts(['a', 'b', 'c', 'd'])) //tell it where to look
                .selection(
                    function(element){
                        element.attr("class", function(feature){
                            var classes = ['mapFeatures'];
                            if (feature.properties){
                                props = [feature.properties];
                                if (feature.properties.layer)
                                    classes.push(feature.properties.layer);
                                    layer_arr = [feature.properties.layer];
                                if (feature.properties.sub_layer)
                                    classes.push(feature.properties.sub_layer)
                            }
                            return classes.join(' ');
                        });

                        element.on("mousemove", function(){
                            //d3.select(this).attr("style", "stroke: #0f0") ;
                        });

                        element.on("mouseover", function(d){
                            d3.select(this).attr("style", "stroke: #0f0; stroke-width: 10px;") ;
                            var text = "";
                            // text = d.properties.name || d.properties.layer || 'empty';
                            for (var key in d.properties) {
                                text += '<br>' + key + ': ' + d.properties[key];
                            }
                            //tooltip.text(text);
                            tooltip.html(text);
                            return tooltip.style("visibility", "visible");
                        })
                        .on("mousemove", function(){return tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
                        .on("mouseout", function(d){
                            d3.select(this).attr("style", "stroke: #000; stroke-width: 1px;") ;
                            return tooltip.style("visibility", "hidden");
                        });

                    }
                );

            map.add(layer); //add the topojson layer to your map


            var tooltip = d3.select('body')
            .append("div")
            .attr("class","popup")
            .style("position", "absolute")
            .style("visibility", "hidden");

        </script>
    </body>
</html>
	<html>
	<head>
	<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 type="text/javascript" src="http://developer.mapsense.co/mapsense.js" charset="utf-8"></script>

	<style>
	body {
	background-color: #ddd;
	}
	.map {
	background-color: transparent;
	width: 100%;
	height: 100%;
	}
	.mapFeatures {
	vector-effect: non-scaling-stroke;
	stroke: grey;
	fill : none;
	}
	.mapFeaturesBuffer {
	stroke-width: 20px;
	stroke: none;
	fill: none;
	}
	.tile-background {
	fill: none;
	}

	.popup {
	position: relative;
	text-align: center;
	/*width: 300px;
	height: 50px;*/
	padding: 10px;
	font: 16px sans-serif;
	border: solid 2px #555;
	border-radius: 3px;
	pointer-events: none;
	background-color: rgba(255,255,255,0.75);
	}


	</style>
	</head>

	<body>
	<script>
	//create your containing svg
	var svg = d3.select('body').append('svg')

	var map = mapsense.map() // init the map
	.container(svg.node()) //tell it where to go
	.add(mapsense.interact()) //add interaction
	.center({lon: -122.4, lat: 37.75}) // SF bay area
	//.center({lon: -96, lat: 37.7}) // USA
	.zoom(11); //set a zoom

	//tile url
	var url = "http://{S}-tiles.mapsense.co/mapsense.earth/tile/{Z}/{X}/{Y}.topojson";
	//var url = "https://{S}-tiles.mapsense.co/mapsense.demographics/tile/{Z}/{X}/{Y}.topojson?key=key-a6e5eb71915e464798b60b30e1e52524&where=layer=='state'";

	var layer = mapsense.topoJson() //init a topojson layer
	.url(mapsense.url(url).hosts(['a', 'b', 'c', 'd'])) //tell it where to look
	.selection(
	function(element){
	element.attr("class", function(feature){
	var classes = ['mapFeatures'];
	if (feature.properties){
	props = [feature.properties];
	if (feature.properties.layer)
	classes.push(feature.properties.layer);
	layer_arr = [feature.properties.layer];
	if (feature.properties.sub_layer)
	classes.push(feature.properties.sub_layer)
	}
	return classes.join(' ');
	});

	element.on("mousemove", function(){
	//d3.select(this).attr("style", "stroke: #0f0") ;
	});

	element.on("mouseover", function(d){
	d3.select(this).attr("style", "stroke: #0f0; stroke-width: 10px;") ;
	var text = "";
	// text = d.properties.name \|\| d.properties.layer \|\| 'empty';
	for (var key in d.properties) {
	text += '<br>' + key + ': ' + d.properties[key];
	}
	//tooltip.text(text);
	tooltip.html(text);
	return tooltip.style("visibility", "visible");
	})
	.on("mousemove", function(){return tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
	.on("mouseout", function(d){
	d3.select(this).attr("style", "stroke: #000; stroke-width: 1px;") ;
	return tooltip.style("visibility", "hidden");
	});

	}
	);

	map.add(layer); //add the topojson layer to your map


	var tooltip = d3.select('body')
	.append("div")
	.attr("class","popup")
	.style("position", "absolute")
	.style("visibility", "hidden");

	</script>
	</body>
	</html>