mapsense-examples · August 29, 2015 14:21
diff --git a/index.html b/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;
        font-family: sans-serif;
    }
    
    path {
      vector-effect: non-scaling-stroke;
      stroke-linejoin: round;
      stroke-linecap: round;
      stroke: #777;
      fill: none;
    }    
 #map-group {
    width: 900px;
    height: 600px;
    position: relative;
 }

 .map {outline: 1px solid #bbb;}

 .us48 {
    width: 100%;
    height: 100%;
 }

 .ak {
    width: 280px;
    height: 200px;
    position: absolute;
    bottom: 10px;
    left: 10px;
 }

 .hi {
    width: calc(1.62*60px);
    height: 60px;
    position: absolute;
    bottom: 10px;
    left: calc(20px + 290px);
 }

 #ak .mapsense-attribution.light, 
 #hi .mapsense-attribution.light {
    display: none; /*because there's attribution on the main map*/
 }

 .mapsense-light.land {
    stroke: #aaa; /*otherwise hawaii/islands are hard to see*/
 }
 </style>

 </head>
 <body>

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

 <script>

    // Demo to show US map with insets for Alaska and Hawaii
    // We'll make 3 separate maps so we can position and scale them as desired
    // We'll create an object with config options for each map, so we can loop through
    var MAPS = {};
    MAPS.us48 = {
        'identifier': 'us48',
        'where': "name!='Alaska'",
        'extent': [ // reverse of NESW
            {lon: -124.85 - 10, lat: 24.40 - 5}, // west, south; minus recenter hack
            {lon: -66.88 + 2, lat: 49.38} // east, north
        ],
        'map': null
    };
    MAPS.ak = {
        'identifier': 'ak',
        'where': "name=='Alaska'",
        'extent': [ // TIP: draw bbox in www.geojson.io
            {lon: -178, lat: 51.5},
            {lon: -127.5, lat: 71.6}
        ],
        'map': null
    };
    MAPS.hi = {
        'identifier': 'hi',
        'where': "name=='Hawaii'",
        'extent': [ 
            {lon: -161.1, lat: 18.4},
            {lon: -154.0, lat: 22.6}
        ],
        'map': null
    };

    var url = "https://{S}-tiles.mapsense.co/mapsense.demographics/tile/{Z}/{X}/{Y}.topojson?key=key-a6e5eb71915e464798b60b30e1e52524";

    var LAYERS = {};
    LAYERS.basemap = { 
        'title': 'Basemap',
        'url': url
    };
    
    /*
    If we have data to overlay, config it here:
    LAYERS.overlay = { 
        'title': 'Basemap',
        'url': "https://{S}-tiles.mapsense.co/mapsense.demographics/tile/{Z}/{X}/{Y}.topojson?key=key-a6e5eb71915e464798b60b30e1e52524&where=sub_layer=='county'"
    };
    */

    for (var map_key in MAPS) {
        d3.select('#myMap').append('div')
            .attr('class', 'map ' + MAPS[map_key]['identifier'])
            .attr('id', MAPS[map_key]['identifier']);

        MAPS[map_key]['map'] = mapsense.map('#'+MAPS[map_key]['identifier'])
            .add(
                mapsense.basemap()
                    .apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc")
            )
            .extent( MAPS[map_key]['extent'] )
            .interact(false)
    }

 </script>
 </body>
 </html>
diff --git a/trackingcode.mkd b/trackingcode.mkd
	<!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;
	font-family: sans-serif;
	}

	path {
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke: #777;
	fill: none;
	}
	#map-group {
	width: 900px;
	height: 600px;
	position: relative;
	}

	.map {outline: 1px solid #bbb;}

	.us48 {
	width: 100%;
	height: 100%;
	}

	.ak {
	width: 280px;
	height: 200px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	}

	.hi {
	width: calc(1.62*60px);
	height: 60px;
	position: absolute;
	bottom: 10px;
	left: calc(20px + 290px);
	}

	#ak .mapsense-attribution.light,
	#hi .mapsense-attribution.light {
	display: none; /because there's attribution on the main map/
	}

	.mapsense-light.land {
	stroke: #aaa; /otherwise hawaii/islands are hard to see/
	}
	</style>

	</head>
	<body>

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

	<script>

	// Demo to show US map with insets for Alaska and Hawaii
	// We'll make 3 separate maps so we can position and scale them as desired
	// We'll create an object with config options for each map, so we can loop through
	var MAPS = {};
	MAPS.us48 = {
	'identifier': 'us48',
	'where': "name!='Alaska'",
	'extent': [ // reverse of NESW
	{lon: -124.85 - 10, lat: 24.40 - 5}, // west, south; minus recenter hack
	{lon: -66.88 + 2, lat: 49.38} // east, north
	],
	'map': null
	};
	MAPS.ak = {
	'identifier': 'ak',
	'where': "name=='Alaska'",
	'extent': [ // TIP: draw bbox in www.geojson.io
	{lon: -178, lat: 51.5},
	{lon: -127.5, lat: 71.6}
	],
	'map': null
	};
	MAPS.hi = {
	'identifier': 'hi',
	'where': "name=='Hawaii'",
	'extent': [
	{lon: -161.1, lat: 18.4},
	{lon: -154.0, lat: 22.6}
	],
	'map': null
	};

	var url = "https://{S}-tiles.mapsense.co/mapsense.demographics/tile/{Z}/{X}/{Y}.topojson?key=key-a6e5eb71915e464798b60b30e1e52524";

	var LAYERS = {};
	LAYERS.basemap = {
	'title': 'Basemap',
	'url': url
	};

	/*
	If we have data to overlay, config it here:
	LAYERS.overlay = {
	'title': 'Basemap',
	'url': "https://{S}-tiles.mapsense.co/mapsense.demographics/tile/{Z}/{X}/{Y}.topojson?key=key-a6e5eb71915e464798b60b30e1e52524&where=sub_layer=='county'"
	};
	*/

	for (var map_key in MAPS) {
	d3.select('#myMap').append('div')
	.attr('class', 'map ' + MAPS[map_key]['identifier'])
	.attr('id', MAPS[map_key]['identifier']);

	MAPS[map_key]['map'] = mapsense.map('#'+MAPS[map_key]['identifier'])
	.add(
	mapsense.basemap()
	.apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc")
	)
	.extent( MAPS[map_key]['extent'] )
	.interact(false)
	}

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