mapsense-examples · August 29, 2015 14:26
diff --git a/index.html b/index.html
 <!doctype 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 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>
    /* Sets the map to be full screen with no margin */
      body, html, #myMap{
        height: 100%;
        width: 100%;
        margin: 0;
      }

      .queried {
        fill: orange;
        stroke: orange;
        fill-opacity: 0.5;
      }
    </style>

  </head>
  <body>
    <div id="myMap"></div>
    <script>
      var map = mapsense
        .map("#myMap") // Select an element to add the map to
        .add(mapsense.basemap().apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc").style("sketch"))

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

      // Add params to the url to request only certain features
      // For keys and values see https://developer.mapsense.co/tileViewer/?tileset=mapsense.earth
      lyr_url += "&where=sub_layer=='school'";

      var lyr = mapsense.topoJson()
        .url(mapsense.url(lyr_url).hosts(['a', 'b', 'c', 'd']))
        .clip(true)
        // Pass each feature a selection function
        // Here we give them all the same class
        // and an id based on their name
        .selection(function(s){
          s.attr('class','queried');
          s.attr('id',function(f){
            if (f.properties.name) {
              var name = f.properties.name;
              // replace all spaces with _
              return name.replace(/ /g,'_');
            }

          });
        });

      map.add(lyr);

      map.add(mapsense.hash()); // for bookmarking

    </script>
  </body>
 </html>
	<!doctype 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 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>
	/* Sets the map to be full screen with no margin */
	body, html, #myMap{
	height: 100%;
	width: 100%;
	margin: 0;
	}

	.queried {
	fill: orange;
	stroke: orange;
	fill-opacity: 0.5;
	}
	</style>

	</head>
	<body>
	<div id="myMap"></div>
	<script>
	var map = mapsense
	.map("#myMap") // Select an element to add the map to
	.add(mapsense.basemap().apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc").style("sketch"))

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

	// Add params to the url to request only certain features
	// For keys and values see https://developer.mapsense.co/tileViewer/?tileset=mapsense.earth
	lyr_url += "&where=sub_layer=='school'";

	var lyr = mapsense.topoJson()
	.url(mapsense.url(lyr_url).hosts(['a', 'b', 'c', 'd']))
	.clip(true)
	// Pass each feature a selection function
	// Here we give them all the same class
	// and an id based on their name
	.selection(function(s){
	s.attr('class','queried');
	s.attr('id',function(f){
	if (f.properties.name) {
	var name = f.properties.name;
	// replace all spaces with _
	return name.replace(/ /g,'_');
	}

	});
	});

	map.add(lyr);

	map.add(mapsense.hash()); // for bookmarking

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