mapsense-examples · August 29, 2015 14:26
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>
    <!--
    <script src="mapsense.js" charset="utf-8"></script>
    <link type="text/css"  href="simple_basemap.css" rel="stylesheet"/>
    <link type="text/css"  href="simple.css" rel="stylesheet"/>
    -->
    <link type="text/css"  href="mapsense.css" rel="stylesheet"/>
    <link type="text/css"  href="local.css" rel="stylesheet"/>

    <style>

    </style>
 </head>
 <body>

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

 <div class="wrapper">

    <div id="results" class="ui top right">
        <div id="coordinates"></div>

        <div id="info-A">
        </div>

        <div id="info-B">
        </div>

        <div id="info-C">
        </div>
    </div>

    <div class="title">
        <div class="title-text">
            <div class="h1sim">Buffer by distance</div>
            <p class=""></p>
        </div>
    </div>

    <div id="control" class="clickselect">
    </div>


    <div class="bottom left">
        <label>
            <input id="labels_control" type="checkbox"> Labels
        </label>
    </div>

 </div>

 <script>


 var G = {}; // A global object to store variables
 G.key = 'key-2d5eacd8b924489c8ed5e8418bd883bc';
 G.simplify = '&ringSpan=10&lineSpan=10&s=10';
 G.home = [ // we'll set the map extent to these bounds
    {lon: -125, lat: -60},
    {lon: 160, lat: 75}
 ];
 //G.basemap = {'style': 'sketch', 'blayer': null };
 G.basemap = {'style': 'simple', 'blayer': null };
 G.params = {};

 gj_fc_template = {
  "type": "FeatureCollection",
  "features": [
  ]
 };

 G.layers = {
    'base': { 'url': '', 'default': false},

    'overlay_a': {
        'url': 'https://{S}-api.mapsense.co/universes/mapsense.planet_osm_points/{Z}/{X}/{Y}.topoJson?api-key=' + G.key + '&select=name',
        'where': "&where=name=='"+G.input_A+"'",
        //'params': '&density=20',
        'params': G.simplify,
        'class': 'overlay_a',
        'default': true
    },
    'overlay_b': {
        'url': 'https://{S}-api.mapsense.co/universes/mapsense.planet_osm_points/{Z}/{X}/{Y}.topoJson?api-key=' + G.key + '&select=name',
        'where': "&where=name=='"+G.input_A+"'",
        //'params': '&density=20',
        'params': G.simplify,
        'class': 'overlay_b',
        'default': true
    },
    'labels': { 'url': 'http://stamen-tiles-{S}.a.ssl.fastly.net/toner-labels/{Z}/{X}/{Y}.png', 'default': false }
 };

 window.onload = function(){
    initSelect();
    initMap(); // initialize the map
 }


 // Add a div to display info mouseover info
 var mouseinfo = d3.select('body')
    .append("div")
    .attr("class","mouseinfo");

 function initMap() {
    map = mapsense.map("#myMap"); // init the map
    map.tileSize({x:256,y:256});
    //map.extent(G.home);

    if (G.basemap) {
        G.basemap.blayer = mapsense.basemap().apiKey(G.key).style(G.basemap.style)
        G.basemap.blayer.selection();

        map.add(G.basemap.blayer);
    }


    // change map interaction so users can see the map update when they scroll through the selector fields
    map.interact(false);
    map.add(mapsense.drag());
    map.add(mapsense.wheel());
    map.add(mapsense.dblclick());
    map.add(mapsense.touch());
    map.add(mapsense.hash());

    mapsense.compass().map(map); //enable shift zoom
    d3.select('.compass').attr('style','display: none;') // but hide the compass graphic



    G.layers['overlay_b'].lyr = mapsense.topoJson()
        .url(
            mapsense.url(
                G.layers['overlay_a'].url + G.layers['overlay_a'].where + G.layers['overlay_a'].params
            )
            .hosts(['a', 'b', 'c', 'd'])
        )
        .clip(false)
        .scale('fixed')
        .selection(function(s){
            s.attr('class','output');
        })
        ;

    map.add(G.layers['overlay_b'].lyr);


    G.layers['overlay_a'].lyr = mapsense.topoJson()
        .url(
            mapsense.url(
                G.layers['overlay_a'].url + G.layers['overlay_a'].where + G.layers['overlay_a'].params
            )
            .hosts(['a', 'b', 'c', 'd'])
        )
        .clip(false)
        .scale('fixed')
        .selection(function(s){
            s.attr('class','overlay_a');
            updateRadius('.overlay_a');
        })
        ;

    map.add(G.layers['overlay_a'].lyr);

    G.layers.labels.lyr = mapsense.image()
        .url(mapsense.url(G.layers.labels.url)
        .hosts(["a", "b", "c", "d"]))
        ;

    map.add(G.layers.labels.lyr.visible(false).id("labels_layer"));

    map.on("move", function() {
        updateRadius('.overlay_a');
    });

    d3.select('#labels_control').on('click',function(){ toggleLabels(); });
 }

 function updateRadius(selector) {
    var z = map.zoom();
    var center = map.center();

    var dist =  d3.select('#Distance').property('value');

    var units =  d3.select('#units').property('value');

    switch (units) {
        //case 'meters': dist = +dist * 1000;
        case 'km': {
            dist = dist * 1000;
            //console.log(dist);
            break;
        }
        case 'miles': {
            dist = dist * 1609;
            break;
            //console.log(dist);
        }
    }

    /*
    Convert distance to pixels
    Function of screen resolution, latitude, zoom level, curvature of earth
    */
    var bbox = d3.select('.mapsense-map').node().getBBox();

    var pxx = map.size()['x'];
    var pxy = map.size()['y'];
    var px_diag = Math.sqrt(pxx*pxx + pxy*pxy);

    var dist_diag = haversine_distance([map.extent()[0].lon, map.extent()[0].lat],[map.extent()[1].lon, map.extent()[1].lat],'meters');

    var meters_per_pixel = dist_diag / px_diag;

    d3.selectAll(selector).attr('r', dist/meters_per_pixel);
 }

 function haversine_distance(coordinates1, coordinates2, units) {
  /*var coordinates1 = point1.geometry.coordinates;
  var coordinates2 = point2.geometry.coordinates;
  */
  var dLat = toRad(coordinates2[1] - coordinates1[1]);
  var dLon = toRad(coordinates2[0] - coordinates1[0]);
  var lat1 = toRad(coordinates1[1]);
  var lat2 = toRad(coordinates2[1]);
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

  var R;
  switch(units) {
    case 'miles':
      R = 3960;
      break;
    case 'kilometers':
    case 'kilometres':
      R = 6373;
      break;
    case 'meters':
    case 'metres':
      R = 6372800;
      break;
    case 'degrees':
      R = 57.2957795;
      break;
    case 'radians':
      R = 1;
      break;
    case undefined:
      R = 6373;
      break;
    default:
      throw new Error('unknown option given to "units"');
  }

  var distance = R * c;
  return distance;
 };

 function toRad(degree) {
  return degree * Math.PI / 180;
 }

 function initSelect() {
    // add a input element to the page
    var inputs = [
        {'label':'Query', 'default':"amenity=='library'"},
        {'label':'Distance', 'default': 0.5}
    ];

    d3.select('#control')
        .selectAll('input')
        .data(inputs)
        .enter()
            .append('label')
                .attr('class','input-label')
                .append('input')
                    .attr('class','inputs')
                    .attr('id',function(d) { return d.label; })
                    .property('value',function(d) { return d.default; } )


    d3.selectAll('.input-label')
        .append('text')
        .text(function(d) { return d['label']; })
            .append('br')

    var dropdown = d3.select('#control').append('select')
        .attr('id','units')
        .attr('class','C inputs')
        .selectAll('option')
        .data(['miles','km','meters'])
        .enter()
            .append('option')
            .property('value',function(d) { return d; })
            .text(function(d) {
                return d;
            });
        ;

    d3.select('#control').append('br');

    d3.select('#control').append('a')
        .attr('id','enter')
        .attr('class','button')
        .text('Search')
        ;


    // When the user selects an option, update the class for those features
    //d3.selectAll('.selector').on('change.query', updateQuery);
    d3.selectAll('#enter').on('click', updateQuery);
 }

 function updateQuery() {

    // update the query
    //var new_where = "&where=amenity=='" + d3.select('#selector_a').node().value + "' OR amenity=='" + d3.select('#selector_b').node().value + "'";
    var valu_A = d3.select('#Query').property('value');
    var new_where = "&where=" + valu_A; // + "'";
    var new_url = G.layers['overlay_a'].url + new_where + G.layers['overlay_a'].params;

    // clear the previous results
    //G.layers.output.gj.features = []
    //G.layers.output.lyr.features([]);

    // update the layer
    G.layers['overlay_a'].lyr
        .url(
            mapsense.url(new_url).hosts(['a','b','c','d'])
        )
    ;

    G.layers['overlay_b'].lyr
        .url(
            mapsense.url(new_url).hosts(['a','b','c','d'])
        )
        ;
    updateRadius('.overlay_a');
 }

 function toggleLabels() {
    var checkit = d3.select('#labels_control').property('checked');

    if (checkit) {
        G.layers.labels.lyr.visible(true);
        d3.select("#labels_layer").attr("style","opacity: 0.35;");
        var credit = d3.select('.mapsense-attribution').html();
        credit += ' <a target="_blank" href="http://stamen.com">©Stamen Design</a>';
        d3.select('.mapsense-attribution').html(credit);
    } else {
        G.layers.labels.lyr.visible(false)

        var credit = '<a target="_blank" href="https://developer.mapsense.co/tileViewer/?tileset=mapsense.earth">©Mapsense ©OpenStreetMap</a>';
        d3.select('.mapsense-attribution').html(credit);
    }
 }

 function markLatLon(lat,lon,name){
    name = name || "";
    var feature = {
        type: "Feature",
        geometry: {type: "Point", "coordinates": [ +lon, +lat ]},
    };
    return feature;
 }

 </script>

 </body>
 </html>
diff --git a/local.css b/local.css


 html, body, #myMap {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font: 11px 'Droid Sans', sans-serif;
    color: #777;
 }

 body {font-size: 12px; }

 .ui, .mouseinfo {
    font: 12px monospace !important;
    color: black;
 }


 .float-left { float: left; }
 .float-right { float: right; }

 .top { position: absolute; top: 0; }
 .right { position: absolute; right: 0; }
 .bottom { position: absolute; bottom: 0; }
 .left { position: absolute; left: 0; }

 .bold { font-weight: bold; }

 circle {
    vector-effect: non-scaling-stroke;
    fill-opacity: 0.35;
 }

 .wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99;
    margin: 0;
    clear: both;
 }

 .ui {
    /*position: absolute;
    */
    overflow: auto;
    max-width: 280px;
    max-height: 100%;
    background: rgba(255,255,255,1);
 }
 .outline {
    outline: 1px solid #aaa;
 }

 .title {
    text-align: left;
    padding: 10px 2px 2px 20px;
    background: rgba(255,255,255,0.75);
    pointer-events: all;
 }
 .title-text {
    width: calc(100% - 280px);
    color: #3c4662;
    max-width: 600px;
 }
 .title-text p {
    text-align: left;
    vertical-align: top;
 }

 #control,
 .control {
    padding: 10px;
    /*margin-left: 10px;
    */
    font-size: 1.1em;
 }

 .inputs {
    margin: 2px 1px;
 }

 .h1sim {
    font-size: 1.9em;
    font-weight: bold;
 }

 #selector {
    font: 20px 'Droid Sans', sans-serif;
 }

 #info-B, #info-A {
    background: rgba(255,255,255,0.8);
    overflow: auto;
    display: inline-block;
    max-height: 100%;
    pointer-events: all;

    overflow: auto;
 }

 .mouseinfo {
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    max-width: 300px;
    /*font: 20px 'Droid Sans', sans-serif;*/
 }

 table {
    border-collapse: collapse;

 }
 table, th, td {
    border: 1px solid #eee;
    padding: 2px;
    padding-left: 10px;
    padding-right: 10px

 }

 .detailKey {
    background: #eee;
    color: #666;
    opacity: .8;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 400;

 }
 .detailVal {
    background: rgba(255,255,255,0.8);
    text-align: left;
 }

 .point {
    fill: rgba(255,0,0, 0.6);
    stroke: rgba(255,0,0, 1);
    /*stroke: rgba(68, 167, 228, 1); blue
    */
    stroke-width: 2;
 }
 .clickselect {
    pointer-events: all;
 }

 .mapsense-attribution a {
    color: #999;
 }
 .mapsense-attribution {
    color: #999;
    background: rgba(255,255,255,0.5);
    padding: 7px;
 }

 label {
    pointer-events: all;
 }

 #labels_control {
    pointer-events: all;
    padding: 3px;
 }

 .output {
    fill: green;
    fill-opacity: 0.3;
    stroke: green;
 }

 .overlay_a {
    fill: #A14BD0;
    fill-opacity: 0.3;
    stroke: none;
 }


 /*.land {
    stroke: rgba(68, 167, 228, 0.5);
 }
 */
 .selector {
    display: inline-block;
    padding: 1px 2px;
    border: 1px solid #777;
    font: 14px bold 'Droid Sans', sans-serif;
    line-height: 1em;
    color: #777;
    height: 16px;
    width: 50px;
 }

 a.button {
    display: inline-block;
    padding: 1px 2px;
    border: 1px solid #777;
    font: 14px bold 'Droid Sans', sans-serif;
    line-height: 1em;
    color: #777;
    height: 16px;
    min-width: 50px;
    vertical-align: top;
    /*margin-left: 4px;
    */text-align: center;
    cursor: pointer;

 }

 a.button:hover {
    border: 1px solid #000;
    color: #000;
 }
diff --git a/mapsense.css b/mapsense.css
 .mapsense-attribution {
  background-color: rgba(0, 0, 0, 0.5);
  color: #ccc;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
  font-size: 11px;
  font-family: sans-serif;
  line-height: 5px;
  text-decoration: none;
 }
 .mapsense-attribution a {
  color: #ccc;
  text-decoration: none;
 }
 .compass .back {
  fill: #eee;
  fill-opacity: .8;
 }
 .compass .fore {
  stroke: #999;
  stroke-width: 1.5px;
 }
 .compass rect.back.fore {
  fill: #999;
  fill-opacity: .3;
  stroke: #eee;
  stroke-width: 1px;
  shape-rendering: crispEdges;
 }
 .compass .direction {
  fill: none;
 }
 .compass .chevron {
  fill: none;
  stroke: #999;
  stroke-width: 5px;
 }
 .compass .zoom .chevron {
  stroke-width: 4px;
 }
 .compass .active .chevron,
 .compass .chevron.active {
  stroke: #fff;
 }
 .compass.active .active .direction {
  fill: #999;
 }
 path {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
 }
 /* zoom-dependent styling for roads & admins */
 /* general rules */
 path._undefined.none {
  fill: none;
 }
 path.landuse.other {
  fill: none;
  stroke: none;
 }
 .park {
  opacity: .3;
 }
 .water_line {
  opacity: .5;
  fill: none;
 }
 .runway {
  opacity: .7;
 }
 .rail_major,
 .rail_minor {
  stroke-dasharray: 4, 3;
 }
 .roads,
 .admin {
  fill: none;
 }
 .disputed_border,
 .state_border {
  stroke-dasharray: 8, 3;
 }
 /* admins */
 .country_border {
  stroke-width: 2;
 }
 .admin._3,
 .admin._2,
 .admin._1 {
  stroke-width: 1;
 }
 .admin._4 {
  stroke-width: 1.5;
 }
 .state_border._2 {
  stroke-width: .3;
 }
 .state_border._3,
 .state_border._4 {
  stroke-width: .5;
 }
 .state_border._8,
 .state_border._9,
 .state_border._10,
 .state_border._11 {
  stroke-width: 1.5;
  opacity: .75;
 }
 .state_border._12,
 .state_border._13,
 .state_border._14,
 .state_border._15,
 .state_border._16,
 .state_border._17 {
  stroke-width: 2;
  stroke-dasharray: 10, 4;
  opacity: .75;
 }
 /* roads */
 .ne_10m_roads._3 {
  stroke-width: 0.5;
 }
 .ne_10m_roads._4,
 .ne_10m_roads._5 {
  stroke-width: 0.75;
 }
 .ne_10m_roads._6 {
  opacity: 0.75;
 }
 .motorway._6 {
  stroke-width: .75;
 }
 .motorway._7,
 .ne_10m_roads._7 {
  stroke-width: 1;
 }
 .arterial_major._7 {
  stroke-width: .5;
 }
 /* zoom 8 */
 .ne_10m_roads._8 {
  stroke-width: 1.25;
  opacity: 0.75;
 }
 .motorway._8 {
  stroke-width: 1.25;
  opacity: 0.75;
 }
 .arterial_major._8 {
  stroke-width: .5;
  opacity: .75;
 }
 .arterial_minor._8 {
  stroke-width: 0.5;
  opacity: .5;
 }
 /* zoom 9 */
 .motorway._9 {
  stroke-width: 1.5;
 }
 .arterial_major._9 {
  stroke-width: .75;
 }
 .arterial_minor._9 {
  stroke-width: 0.5;
  opacity: .5;
 }
 /* zoom 10 */
 .motorway._10 {
  stroke-width: 1.75;
 }
 .arterial_major._10 {
  stroke-width: 1.25;
 }
 .arterial_minor._10 {
  stroke-width: 1;
 }
 .road_med._10 {
  stroke-width: .75;
 }
 /* zoom 11 */
 .motorway._11 {
  stroke-width: 3;
 }
 .arterial_major._11,
 .runway._11 {
  stroke-width: 1.75;
 }
 .arterial_minor._11 {
  stroke-width: 1.25;
 }
 .road_med._11 {
  stroke-width: 1;
 }
 .road_minor._11 {
  stroke-width: .5;
 }
 /* zoom 12 */
 .motorway._12 {
  stroke-width: 3.5;
 }
 .arterial_major._12,
 .runway._12 {
  stroke-width: 2;
 }
 .arterial_minor._12 {
  stroke-width: 1.5;
 }
 .road_med._12 {
  stroke-width: 1;
 }
 .road_minor._12 {
  stroke-width: .75;
 }
 /* zoom 13 */
 .motorway._13 {
  stroke-width: 5;
 }
 .arterial_major._13,
 .runway._13 {
  stroke-width: 3.5;
 }
 .arterial_minor._13 {
  stroke-width: 2.5;
 }
 .road_med._13 {
  stroke-width: 2;
 }
 .road_minor._13 {
  stroke-width: 1.5;
 }
 .path._13,
 .water_line._13 {
  stroke-width: 0.3;
 }
 /* zoom 14 */
 .motorway._14 {
  stroke-width: 6.5;
 }
 .arterial_major._14,
 .runway._14 {
  stroke-width: 4.75;
 }
 .arterial_minor._14 {
  stroke-width: 4.25;
 }
 .road_med._14 {
  stroke-width: 3.75;
 }
 .road_minor._14 {
  stroke-width: 2.5;
 }
 .rail_minor._14 {
  stroke-width: 1;
 }
 .rail_major._14 {
  stroke-width: 1.5;
 }
 .path._14,
 .water_line._14 {
  stroke-width: 0.75;
 }
 /* zoom 15 */
 .motorway._15 {
  stroke-width: 8.5;
 }
 .arterial_major._15,
 .runway._15 {
  stroke-width: 7;
 }
 .arterial_minor._15 {
  stroke-width: 6;
 }
 .road_med._15 {
  stroke-width: 5;
 }
 .road_minor._15 {
  stroke-width: 4;
 }
 .rail_minor._15 {
  stroke-width: 1.5;
 }
 .rail_major._15 {
  stroke-width: 1.5;
 }
 .path._15,
 .water_line._15 {
  stroke-width: 1;
 }
 /* zoom 16 */
 .motorway._16 {
  stroke-width: 12;
 }
 .arterial_major._16,
 .runway._16 {
  stroke-width: 9;
 }
 .arterial_minor._16 {
  stroke-width: 8;
 }
 .road_med._16 {
  stroke-width: 7;
 }
 .road_minor._16 {
  stroke-width: 6;
 }
 .rail_minor._16 {
  stroke-width: 1.5;
 }
 .rail_major._16 {
  stroke-width: 2;
 }
 .path._16,
 .water_line._16 {
  stroke-width: 2;
 }
 /* zoom 17 */
 .motorway._17 {
  stroke-width: 15;
 }
 .arterial_major._17,
 .runway._17 {
  stroke-width: 10;
 }
 .arterial_minor._17 {
  stroke-width: 9;
 }
 .road_med._17 {
  stroke-width: 8;
 }
 .road_minor._17 {
  stroke-width: 8;
 }
 .rail_minor._17 {
  stroke-width: 3;
  stroke-dasharray: 7, 6;
 }
 .rail_major._17 {
  stroke-width: 4;
  stroke-dasharray: 7, 6;
 }
 .path._17,
 .water_line._17 {
  stroke-width: 5;
 }
 /* zoom 18 */
 .motorway._18 {
  stroke-width: 16;
 }
 .arterial_major._18,
 .runway._18 {
  stroke-width: 10;
 }
 .arterial_minor._18 {
  stroke-width: 10;
 }
 .road_med._18 {
  stroke-width: 9;
 }
 .road_minor._18 {
  stroke-width: 8;
 }
 .rail_minor._18 {
  stroke-width: 3;
  stroke-dasharray: 7, 6;
 }
 .rail_major._18 {
  stroke-width: 4;
  stroke-dasharray: 7, 6;
 }
 .path._18,
 .water_line._18 {
  stroke-width: 5;
 }
 .mapsense-blackprint.labels {
  font-size: 18;
  fill: #999;
  font-weight: 200;
  text-transform: uppercase;
  stroke-width: .3;
  /*stroke: grey;*/
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-blackprint.tile-background {
  fill: #141414;
 }
 .mapsense-blackprint.land {
  fill: #000000;
  stroke: #bdbcbc;
  stroke-width: 1;
 }
 .mapsense-blackprint.agriculture {
  display: none;
 }
 .mapsense-blackprint.water_polygon {
  fill: #141414;
 }
 .mapsense-blackprint.water_line {
  stroke: #323232;
  stroke-width: 1;
  opacity: .3;
  fill: none;
 }
 .mapsense-blackprint.park {
  fill: rgba(15, 15, 15, 0.3);
  stroke: none;
 }
 .mapsense-blackprint.building {
  fill: none;
  stroke: #505050;
  stroke-width: .52;
 }
 .mapsense-blackprint.school {
  fill: #0f0f0f;
  stroke: none;
 }
 .mapsense-blackprint.other {
  stroke: #323232;
 }
 .mapsense-blackprint.urban {
  fill: none;
  stroke: none;
 }
 .mapsense-blackprint.roads {
  stroke: #222;
 }
 .mapsense-blackprint.motorway,
 .mapsense-blackprint.ne_10m_roads {
  stroke: #333;
 }
 .mapsense-blackprint.country_border,
 .mapsense-blackprint.disputed_border {
  stroke: grey;
  stroke-dasharray: 3 3;
  stroke-width: 1;
  fill: none;
 }
 .mapsense-blackprint.state_border {
  stroke: grey;
  stroke-dasharray: 3 3;
  fill: none;
 }
 .mapsense-dark.labels {
  font-size: 14;
  fill: #777;
  font-weight: 600;
  text-transform: uppercase;
  stroke-width: .3;
  /*stroke: grey;*/
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-dark.tile-background {
  fill: #3a4250;
 }
 .mapsense-dark.land {
  fill: #161619;
 }
 .mapsense-dark.agriculture {
  display: none;
 }
 .mapsense-dark.country_border,
 .mapsense-dark.disputed_border {
  stroke: #777;
 }
 .mapsense-dark.state_border {
  stroke: #777;
 }
 .mapsense-dark.water_polygon {
  fill: #3a4250;
  stroke: none;
 }
 .mapsense-dark.water_line {
  stroke: #516283;
  stroke-width: 1;
  fill: none;
 }
 .mapsense-dark.park {
  fill: #268061;
 }
 .mapsense-dark.building {
  fill: #222;
  stroke: black;
 }
 .mapsense-dark.school {
  fill: #35161e;
 }
 .mapsense-dark.other {
  fill: rgba(76, 69, 67, 0.15);
  stroke: black;
 }
 .mapsense-dark.urban {
  fill: #000000;
  stroke: none;
 }
 .mapsense-dark.ne_10m_roads {
  stroke: #7c5c2c;
 }
 .mapsense-dark.motorway {
  stroke: #7c5c2c;
 }
 .mapsense-dark.arterial_major {
  stroke: #4a472a;
 }
 .mapsense-dark.arterial_minor {
  stroke: #3c3c3c;
 }
 .mapsense-dark.road_med {
  stroke: #3c3c3c;
 }
 .mapsense-dark.road_minor {
  stroke: #323232;
 }
 .mapsense-dark.rail_major {
  stroke: #323228;
  fill: none;
 }
 .mapsense-dark.rail_minor {
  stroke: #323228;
  fill: none;
 }
 .mapsense-dark.runway {
  stroke: #333;
 }
 .mapsense-dark.path {
  stroke: #323228;
 }
 .mapsense-grayscale.labels {
  font-size: 14;
  fill: #777;
  font-weight: 600;
  text-transform: uppercase;
  stroke-width: .3;
  /*stroke: grey;*/
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-grayscale.tile-background {
  fill: #aaa9af;
 }
 .mapsense-grayscale.land {
  fill: #e8e5e5;
  stroke: none;
 }
 .mapsense-grayscale.water_polygon {
  fill: #aaa9af;
 }
 .mapsense-grayscale.water_line {
  stroke: gray;
  stroke-width: 1;
 }
 .mapsense-grayscale.park {
  fill: #cad4ca;
 }
 .mapsense-grayscale.building {
  fill: #f0f0f0;
 }
 .mapsense-grayscale.school {
  fill: #dcdcdc;
  stroke: none;
 }
 .mapsense-grayscale.other {
  fill: #cbcbcb;
  stroke: none;
 }
 .mapsense-grayscale.urban {
  fill: none;
  stroke: none;
 }
 .mapsense-grayscale.ne_10m_roads {
  stroke: #ccc;
 }
 .mapsense-grayscale.motorway {
  stroke: #CCC;
 }
 .mapsense-grayscale.arterial_major {
  stroke: #d2d2d2;
 }
 .mapsense-grayscale.arterial_minor {
  stroke: #d7d7d7;
 }
 .mapsense-grayscale.road_med {
  stroke: #DDD;
 }
 .mapsense-grayscale.road_minor {
  stroke: #DDD;
 }
 .mapsense-grayscale.rail_major {
  stroke: lightgray;
 }
 .mapsense-grayscale.rail_minor {
  stroke: lightgray;
 }
 .mapsense-grayscale.runway {
  stroke: #f2efef;
 }
 .mapsense-grayscale.path {
  stroke: #DDD;
 }
 .mapsense-grayscale.country_border,
 .mapsense-grayscale.disputed_border {
  stroke: #BBB;
 }
 .mapsense-grayscale.state_border {
  stroke: #bbb;
 }
 .mapsense-light.labels {
  font-size: 14;
  fill: #777;
  font-weight: 600;
  text-transform: uppercase;
  stroke-width: .3;
  /*stroke: grey;*/
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-light.tile-background {
  fill: #ffffff;
 }
 .mapsense-light.land {
  fill: #ddddda;
  stroke: none;
 }
 .mapsense-light.water_polygon {
  fill: #ffffff;
  stroke: none;
 }
 .mapsense-light.country_border,
 .mapsense-light.disputed_border {
  stroke: #aaa;
 }
 .mapsense-light.state_border {
  stroke: #aaa;
 }
 .mapsense-light.water_line {
  stroke: #c8d0df;
 }
 .mapsense-light.park {
  fill: #caceb9;
  stroke: none;
 }
 .mapsense-light.building {
  fill: #d7d6d1;
 }
 .mapsense-light.school {
  fill: #eadddb;
  stroke: none;
 }
 .mapsense-light.other {
  fill: none;
  stroke: none;
 }
 .mapsense-light.urban {
  fill: rgba(177, 135, 74, 0.07);
  stroke: none;
 }
 .mapsense-light.ne_10m_roads {
  stroke: #ededed;
 }
 .mapsense-light.motorway {
  stroke: #f6f4f3;
 }
 .mapsense-light.arterial_major {
  stroke: #f4f4ef;
 }
 .mapsense-light.arterial_minor {
  stroke: #f1eded;
 }
 .mapsense-light.road_med {
  stroke: #f6f3f3;
 }
 .mapsense-light.road_minor {
  stroke: #faf8f8;
 }
 .mapsense-light.rail_major {
  stroke: #cccccc;
 }
 .mapsense-light.rail_minor {
  stroke: #cccccc;
 }
 .mapsense-light.runway {
  stroke: #ccc;
 }
 .mapsense-light.path {
  stroke: #ccc;
 }
 .mapsense-parchment.labels {
  font-size: 14;
  fill: #777;
  font-weight: 600;
  text-transform: uppercase;
  stroke-width: .3;
  /*stroke: grey;*/
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-parchment.tile-background {
  fill: #b8bdc1;
 }
 .mapsense-parchment.land {
  fill: #e3d6c5;
  stroke: #976f60;
  stroke-width: 1;
 }
 .mapsense-parchment.water_polygon {
  fill: #b8bdc1;
  stroke: #976f60;
  stroke-width: .5;
 }
 .mapsense-parchment.water_line {
  stroke: #b8bdc1;
 }
 .mapsense-parchment.park {
  fill: #cbbca6;
 }
 .mapsense-parchment.building {
  fill: #d4c9ba;
 }
 .mapsense-parchment.school {
  fill: rgba(90, 46, 5, 0.12);
  stroke: none;
 }
 .mapsense-parchment.other {
  fill: #e3d6c5;
  stroke: none;
 }
 .mapsense-parchment.urban {
  fill: rgba(255, 255, 255, 0.3);
  stroke: none;
 }
 .mapsense-parchment.ne_10m_roads {
  stroke: #aea295;
 }
 .mapsense-parchment.motorway {
  stroke: #aea295;
 }
 .mapsense-parchment.arterial_major {
  stroke: #d5c5b7;
 }
 .mapsense-parchment.arterial_minor {
  stroke: #cab7aa;
 }
 .mapsense-parchment.road_med {
  stroke: #d8c8bb;
 }
 .mapsense-parchment.road_minor {
  stroke: #d8c8bb;
 }
 .mapsense-parchment.rail_major {
  stroke: #bda897;
 }
 .mapsense-parchment.rail_minor {
  stroke: #bda897;
 }
 .mapsense-parchment.runway {
  stroke: #ede5d5;
 }
 .mapsense-parchment.path {
  stroke: #ede5d5;
 }
 .mapsense-parchment.country_border,
 .mapsense-parchment.disputed_border {
  stroke: #976f60;
 }
 .mapsense-parchment.state_border {
  stroke: #976f60;
 }
 .mapsense-sketch.labels {
  font-size: 14;
  fill: #777;
  font-weight: 600;
  text-transform: uppercase;
  stroke-width: .3;
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-sketch.tile-background {
  fill: #f0f0f0;
 }
 .mapsense-sketch.land {
  fill: #ffffff;
  stroke: #bdbcbc;
  stroke-width: 1;
 }
 .mapsense-sketch.water_polygon {
  fill: #f0f0f0;
  stroke: #bdbcbc;
  stroke-width: .5;
 }
 .mapsense-sketch.water_line {
  stroke: #cccaca;
 }
 .mapsense-sketch.park {
  fill: none;
  stroke-width: .55;
  stroke: #dad8d8;
 }
 .mapsense-sketch.building {
  fill: none;
  stroke: #d4d4d4;
  stroke-width: .52;
 }
 .mapsense-sketch.school {
  fill: none;
  stroke: #dadada;
 }
 .mapsense-sketch.urban {
  fill: none;
  stroke: none;
 }
 .mapsense-sketch.ne_10m_roads {
  stroke: #eee;
 }
 .mapsense-sketch.motorway {
  stroke: #ddd;
 }
 .mapsense-sketch.arterial_major {
  stroke: #eee;
 }
 .mapsense-sketch.arterial_minor {
  stroke: #eee;
 }
 .mapsense-sketch.road_med {
  stroke: #eee;
 }
 .mapsense-sketch.road_minor {
  stroke: #f5f5f5;
 }
 .mapsense-sketch.rail_major {
  stroke: #ddd;
 }
 .mapsense-sketch.rail_minor {
  stroke: #ddd;
 }
 .mapsense-sketch.runway {
  stroke: #ddd;
 }
 .mapsense-sketch.path {
  stroke: #f5f5f5;
 }
 .mapsense-sketch.country_border,
 .mapsense-sketch.disputed_border {
  stroke: #ccc;
 }
 .mapsense-sketch.state_border {
  stroke: #ccc;
 }
 .mapsense-tron.labels {
  font-size: 14;
  fill: #888;
  font-weight: 600;
  text-transform: uppercase;
  stroke-width: .3;
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-tron.tile-background {
  fill: #000000;
 }
 .mapsense-tron.land {
  fill: #172c3a;
  stroke: none;
 }
 .mapsense-tron.water_polygon {
  stroke: none;
  fill: black;
 }
 .mapsense-tron.country_border,
 .mapsense-tron.disputed_border {
  stroke: #666;
 }
 .mapsense-tron.state_border {
  stroke: #666;
 }
 .mapsense-tron.water_line {
  stroke: #111119;
 }
 .mapsense-tron.park {
  fill: #060a10;
 }
 .mapsense-tron.building {
  fill: #07212a;
  stroke: none;
 }
 .mapsense-tron.school {
  fill: #162532;
  stroke: none;
 }
 .mapsense-tron.other {
  fill: #11242d;
  stroke: none;
 }
 .mapsense-tron.urban {
  fill: none;
  stroke: none;
 }
 .mapsense-tron.ne_10m_roads {
  stroke: #36606f;
 }
 .mapsense-tron.motorway {
  stroke: #36606f;
 }
 .mapsense-tron.arterial_major {
  stroke: #295563;
 }
 .mapsense-tron.arterial_minor {
  stroke: #295563;
 }
 .mapsense-tron.road_med {
  stroke: #2b3e49;
 }
 .mapsense-tron.road_minor {
  stroke: #1b333a;
 }
 .mapsense-tron.rail_major {
  stroke: #1b333a;
 }
 .mapsense-tron.rail_minor {
  stroke: #1b333a;
 }
 .mapsense-tron.runway {
  stroke: #1e414c;
 }
 .mapsense-tron.path {
  stroke: #1b333a;
 }
 .mapsense-vintage.labels {
  font-size: 16;
  fill: #4c83b2;
  font-weight: 400;
  text-transform: uppercase;
  stroke-width: .3;
  stroke: grey;
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-vintage.tile-background {
  fill: #87c8ca;
 }
 .mapsense-vintage.land {
  fill: #fffaf2;
 }
 .mapsense-vintage.water_polygon {
  fill: #87c8ca;
 }
 .mapsense-vintage.country_border,
 .mapsense-vintage.disputed_border {
  stroke: #aaa;
 }
 .mapsense-vintage.state_border {
  stroke: #aaa;
 }
 .mapsense-vintage.water_line {
  stroke: #b5e2e4;
 }
 .mapsense-vintage.park {
  fill: #c6f3bd;
  stroke: none;
 }
 .mapsense-vintage.building {
  fill: #f9ece2;
  stroke: none;
 }
 .mapsense-vintage.school {
  fill: #f0eced;
  stroke: none;
 }
 .mapsense-vintage.urban {
  fill: rgba(243, 210, 191, 0.19);
  stroke: none;
 }
 .mapsense-vintage.ne_10m_roads {
  stroke: #ffb67e;
 }
 .mapsense-vintage.motorway {
  stroke: #f6bd86;
 }
 .mapsense-vintage.arterial_major {
  stroke: #c2d7df;
 }
 .mapsense-vintage.arterial_minor {
  stroke: #cfdddb;
 }
 .mapsense-vintage.road_med {
  stroke: #dae9ea;
 }
 .mapsense-vintage.road_minor {
  stroke: #ededed;
 }
 .mapsense-vintage.rail_major {
  stroke: #c7c4c4;
 }
 .mapsense-vintage.rail_minor {
  stroke: #c7c4c4;
 }
 .mapsense-vintage.runway {
  stroke: #e1dede;
 }
 .mapsense-vintage.path {
  stroke: #e1dede;
 }
 .mapsense-simple.labels {
  font-size: 14;
  fill: #777;
  font-weight: 600;
  text-transform: uppercase;
  stroke-width: .3;
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-simple.tile-background {
  fill: #CBE6F3;
 }
 .mapsense-simple.land {
  fill: #ffffff;
  stroke: #a2d3f2;
  stroke-width: 1;
 }
 .mapsense-simple.water_polygon {
  fill: #CBE6F3;
  stroke: #b6d3e0;
  stroke-width: 0.5px;
 }
 .mapsense-simple.water_line {
  stroke: #a2d3f2;
 }
 .mapsense-simple.park {
  fill: none;
  stroke-width: 0;
  stroke: #dad8d8;
 }
 .mapsense-simple.landuse {
  fill: none;
  stroke: none;
 }
 .mapsense-simple.building {
  fill: none;
  stroke: #d4d4d4;
  stroke-width: .52;
 }
 .mapsense-simple.school {
  fill: none;
  stroke: none;
 }
 .mapsense-simple.other {
  fill: none;
  stroke: none;
 }
 .mapsense-simple.urban {
  fill: none;
  stroke: none;
 }
 .mapsense-simple.ne_10m_roads {
  stroke: #eee;
 }
 .mapsense-simple.motorway {
  stroke: #ddd;
 }
 .mapsense-simple.arterial_major {
  stroke: #eee;
 }
 .mapsense-simple.arterial_minor {
  stroke: #eee;
 }
 .mapsense-simple.road_med {
  stroke: #eee;
 }
 .mapsense-simple.road_minor {
  stroke: #f5f5f5;
 }
 .mapsense-simple.rail_major {
  stroke: #ddd;
 }
 .mapsense-simple.rail_minor {
  stroke: #ddd;
 }
 .mapsense-simple.runway {
  stroke: #ddd;
 }
 .mapsense-simple.path {
  stroke: #f5f5f5;
 }
 .mapsense-simple.country_border,
 .mapsense-simple.disputed_border {
  stroke: #ccc;
 }
 .mapsense-simple.state_border {
  stroke: #ccc;
 }
 .mapsense-simple.ne_10m_roads._3 {
  stroke-width: 0.5;
  stroke: none;
 }
 .mapsense-simple.ne_10m_roads._4,
 .mapsense-simple.ne_10m_roads._5 {
  stroke-width: 0.75;
  stroke: none;
 }
 .mapsense-simple.ne_10m_roads._6 {
  opacity: 0.75;
  stroke: none;
 }
 svg.mapsense-map {
  width: 100%;
  height: 100%;
 }
diff --git a/simple.css b/simple.css
 .mapsense-simple.labels {
  font-size: 14;
  fill: #777;
  font-weight: 600;
  text-transform: uppercase;
  stroke-width: .3;
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-simple.tile-background {
  fill: #CBE6F3;
 }
 .mapsense-simple.land {
  fill: #ffffff;
  stroke: #a2d3f2;
  stroke-width: 1;
 }
 .mapsense-simple.water_polygon {
  fill: #CBE6F3;
  stroke: #b6d3e0;
  stroke-width: 0.5px;
 }
 .mapsense-simple.water_line {
  stroke: #a2d3f2;
 }
 .mapsense-simple.park {
  fill: none;
  stroke-width: 0;
  stroke: #dad8d8;
 }
 .mapsense-simple.landuse {
  fill: none;
  stroke: none;
 }
 .mapsense-simple.building {
  fill: none;
  stroke: #d4d4d4;
  stroke-width: .52;
 }
 .mapsense-simple.school {
  fill: none;
  stroke: none;
 }
 .mapsense-simple.other {
  fill: none;
  stroke: none;
 }
 .mapsense-simple.urban {
  fill: none;
  stroke: none;
 }
 .mapsense-simple.ne_10m_roads {
  stroke: #eee;
 }
 .mapsense-simple.motorway {
  stroke: #ddd;
 }
 .mapsense-simple.arterial_major {
  stroke: #eee;
 }
 .mapsense-simple.arterial_minor {
  stroke: #eee;
 }
 .mapsense-simple.road_med {
  stroke: #eee;
 }
 .mapsense-simple.road_minor {
  stroke: #f5f5f5;
 }
 .mapsense-simple.rail_major {
  stroke: #ddd;
 }
 .mapsense-simple.rail_minor {
  stroke: #ddd;
 }
 .mapsense-simple.runway {
  stroke: #ddd;
 }
 .mapsense-simple.path {
  stroke: #f5f5f5;
 }
 .mapsense-simple.country_border,
 .mapsense-simple.disputed_border {
  stroke: #ccc;
 }
 .mapsense-simple.state_border {
  stroke: #ccc;
 }
 .mapsense-simple.ne_10m_roads._3 {
  stroke-width: 0.5;
  stroke: none;
 }
 .mapsense-simple.ne_10m_roads._4,
 .mapsense-simple.ne_10m_roads._5 {
  stroke-width: 0.75;
  stroke: none;
 }
 .mapsense-simple.ne_10m_roads._6 {
  opacity: 0.75;
  stroke: none;
 }
diff --git a/simple_basemap.css b/simple_basemap.css
 .mapsense-simple.labels {
  font-size: 16;
  fill: #4c83b2;
  font-weight: 400;
  text-transform: uppercase;
  stroke-width: .3;
  stroke: grey;
  font-stretch: expanded;
  letter-spacing: 1.5;
  font-family: "Josefin Sans";
 }
 .mapsense-simple.tile-background {
  fill: #CBE6F3;
 }
 .mapsense-simple.land {
  /*fill: #fffaf2;*/
  fill: #fcfcfc;
  stroke: rgb(162, 211, 242);
 }
 .mapsense-simple.water_polygon {
  fill: #CBE6F3;
  stroke: #b6d3e0;
  /*paint-order: stroke;
  */
  stroke-width: 0.5px;
 }
 .mapsense-simple.country_border,
 .mapsense-simple.disputed_border {
  stroke: #aaa;
 }
 .mapsense-simple.state_border {
  stroke: #aaa;
 }
 .mapsense-simple.water_line {
  stroke: #CBE6F3;
 }
 .mapsense-simple.park {
  fill: #c6f3bd;
  stroke: none;
 }
 .mapsense-simple.building {
  fill: #f9ece2;
  stroke: none;
 }
 .mapsense-simple.school {
  fill: #f0eced;
  stroke: none;
 }
 .mapsense-simple.urban {
  fill: rgba(243, 210, 191, 0.19);
  stroke: none;
 }


 .mapsense-simple._0.roads,
 .mapsense-simple._1.roads,
 .mapsense-simple._2.roads,
 .mapsense-simple._3.roads,
 .mapsense-simple._4.roads,
 .mapsense-simple._5.roads,
 .mapsense-simple._6.roads,
 {
  stroke: none;
 }

 .mapsense-simple.ne_10m_roads {
  stroke: #ddd;
 }
 .mapsense-simple.motorway {
  stroke: #ddd;
 }
 .mapsense-simple.arterial_major {
  stroke: #ddd;
 }
 .mapsense-simple.arterial_minor {
  stroke: #cfdddb;
 }
 .mapsense-simple.road_med {
  stroke: #dae9ea;
 }
 .mapsense-simple.road_minor {
  stroke: #ededed;
 }
 .mapsense-simple.rail_major {
  stroke: #c7c4c4;
 }
 .mapsense-simple.rail_minor {
  stroke: #c7c4c4;
 }
 .mapsense-simple.runway {
  stroke: #e1dede;
 }
 .mapsense-simple.path {
  stroke: #e1dede;
 }
	<!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>
	<!--
	<script src="mapsense.js" charset="utf-8"></script>
	<link type="text/css" href="simple_basemap.css" rel="stylesheet"/>
	<link type="text/css" href="simple.css" rel="stylesheet"/>
	-->
	<link type="text/css" href="mapsense.css" rel="stylesheet"/>
	<link type="text/css" href="local.css" rel="stylesheet"/>

	<style>

	</style>
	</head>
	<body>

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

	<div class="wrapper">

	<div id="results" class="ui top right">
	<div id="coordinates"></div>

	<div id="info-A">
	</div>

	<div id="info-B">
	</div>

	<div id="info-C">
	</div>
	</div>

	<div class="title">
	<div class="title-text">
	<div class="h1sim">Buffer by distance</div>
	<p class=""></p>
	</div>
	</div>

	<div id="control" class="clickselect">
	</div>


	<div class="bottom left">
	<label>
	<input id="labels_control" type="checkbox"> Labels
	</label>
	</div>

	</div>

	<script>


	var G = {}; // A global object to store variables
	G.key = 'key-2d5eacd8b924489c8ed5e8418bd883bc';
	G.simplify = '&ringSpan=10&lineSpan=10&s=10';
	G.home = [ // we'll set the map extent to these bounds
	{lon: -125, lat: -60},
	{lon: 160, lat: 75}
	];
	//G.basemap = {'style': 'sketch', 'blayer': null };
	G.basemap = {'style': 'simple', 'blayer': null };
	G.params = {};

	gj_fc_template = {
	"type": "FeatureCollection",
	"features": [
	]
	};

	G.layers = {
	'base': { 'url': '', 'default': false},

	'overlay_a': {
	'url': 'https://{S}-api.mapsense.co/universes/mapsense.planet_osm_points/{Z}/{X}/{Y}.topoJson?api-key=' + G.key + '&select=name',
	'where': "&where=name=='"+G.input_A+"'",
	//'params': '&density=20',
	'params': G.simplify,
	'class': 'overlay_a',
	'default': true
	},
	'overlay_b': {
	'url': 'https://{S}-api.mapsense.co/universes/mapsense.planet_osm_points/{Z}/{X}/{Y}.topoJson?api-key=' + G.key + '&select=name',
	'where': "&where=name=='"+G.input_A+"'",
	//'params': '&density=20',
	'params': G.simplify,
	'class': 'overlay_b',
	'default': true
	},
	'labels': { 'url': 'http://stamen-tiles-{S}.a.ssl.fastly.net/toner-labels/{Z}/{X}/{Y}.png', 'default': false }
	};

	window.onload = function(){
	initSelect();
	initMap(); // initialize the map
	}


	// Add a div to display info mouseover info
	var mouseinfo = d3.select('body')
	.append("div")
	.attr("class","mouseinfo");

	function initMap() {
	map = mapsense.map("#myMap"); // init the map
	map.tileSize({x:256,y:256});
	//map.extent(G.home);

	if (G.basemap) {
	G.basemap.blayer = mapsense.basemap().apiKey(G.key).style(G.basemap.style)
	G.basemap.blayer.selection();

	map.add(G.basemap.blayer);
	}


	// change map interaction so users can see the map update when they scroll through the selector fields
	map.interact(false);
	map.add(mapsense.drag());
	map.add(mapsense.wheel());
	map.add(mapsense.dblclick());
	map.add(mapsense.touch());
	map.add(mapsense.hash());

	mapsense.compass().map(map); //enable shift zoom
	d3.select('.compass').attr('style','display: none;') // but hide the compass graphic



	G.layers['overlay_b'].lyr = mapsense.topoJson()
	.url(
	mapsense.url(
	G.layers['overlay_a'].url + G.layers['overlay_a'].where + G.layers['overlay_a'].params
	)
	.hosts(['a', 'b', 'c', 'd'])
	)
	.clip(false)
	.scale('fixed')
	.selection(function(s){
	s.attr('class','output');
	})
	;

	map.add(G.layers['overlay_b'].lyr);


	G.layers['overlay_a'].lyr = mapsense.topoJson()
	.url(
	mapsense.url(
	G.layers['overlay_a'].url + G.layers['overlay_a'].where + G.layers['overlay_a'].params
	)
	.hosts(['a', 'b', 'c', 'd'])
	)
	.clip(false)
	.scale('fixed')
	.selection(function(s){
	s.attr('class','overlay_a');
	updateRadius('.overlay_a');
	})
	;

	map.add(G.layers['overlay_a'].lyr);

	G.layers.labels.lyr = mapsense.image()
	.url(mapsense.url(G.layers.labels.url)
	.hosts(["a", "b", "c", "d"]))
	;

	map.add(G.layers.labels.lyr.visible(false).id("labels_layer"));

	map.on("move", function() {
	updateRadius('.overlay_a');
	});

	d3.select('#labels_control').on('click',function(){ toggleLabels(); });
	}

	function updateRadius(selector) {
	var z = map.zoom();
	var center = map.center();

	var dist = d3.select('#Distance').property('value');

	var units = d3.select('#units').property('value');

	switch (units) {
	//case 'meters': dist = +dist * 1000;
	case 'km': {
	dist = dist * 1000;
	//console.log(dist);
	break;
	}
	case 'miles': {
	dist = dist * 1609;
	break;
	//console.log(dist);
	}
	}

	/*
	Convert distance to pixels
	Function of screen resolution, latitude, zoom level, curvature of earth
	*/
	var bbox = d3.select('.mapsense-map').node().getBBox();

	var pxx = map.size()['x'];
	var pxy = map.size()['y'];
	var px_diag = Math.sqrt(pxxpxx + pxypxy);

	var dist_diag = haversine_distance([map.extent()[0].lon, map.extent()[0].lat],[map.extent()[1].lon, map.extent()[1].lat],'meters');

	var meters_per_pixel = dist_diag / px_diag;

	d3.selectAll(selector).attr('r', dist/meters_per_pixel);
	}

	function haversine_distance(coordinates1, coordinates2, units) {
	/*var coordinates1 = point1.geometry.coordinates;
	var coordinates2 = point2.geometry.coordinates;
	*/
	var dLat = toRad(coordinates2[1] - coordinates1[1]);
	var dLon = toRad(coordinates2[0] - coordinates1[0]);
	var lat1 = toRad(coordinates1[1]);
	var lat2 = toRad(coordinates2[1]);
	var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
	Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

	var R;
	switch(units) {
	case 'miles':
	R = 3960;
	break;
	case 'kilometers':
	case 'kilometres':
	R = 6373;
	break;
	case 'meters':
	case 'metres':
	R = 6372800;
	break;
	case 'degrees':
	R = 57.2957795;
	break;
	case 'radians':
	R = 1;
	break;
	case undefined:
	R = 6373;
	break;
	default:
	throw new Error('unknown option given to "units"');
	}

	var distance = R * c;
	return distance;
	};

	function toRad(degree) {
	return degree * Math.PI / 180;
	}

	function initSelect() {
	// add a input element to the page
	var inputs = [
	{'label':'Query', 'default':"amenity=='library'"},
	{'label':'Distance', 'default': 0.5}
	];

	d3.select('#control')
	.selectAll('input')
	.data(inputs)
	.enter()
	.append('label')
	.attr('class','input-label')
	.append('input')
	.attr('class','inputs')
	.attr('id',function(d) { return d.label; })
	.property('value',function(d) { return d.default; } )


	d3.selectAll('.input-label')
	.append('text')
	.text(function(d) { return d['label']; })
	.append('br')

	var dropdown = d3.select('#control').append('select')
	.attr('id','units')
	.attr('class','C inputs')
	.selectAll('option')
	.data(['miles','km','meters'])
	.enter()
	.append('option')
	.property('value',function(d) { return d; })
	.text(function(d) {
	return d;
	});
	;

	d3.select('#control').append('br');

	d3.select('#control').append('a')
	.attr('id','enter')
	.attr('class','button')
	.text('Search')
	;


	// When the user selects an option, update the class for those features
	//d3.selectAll('.selector').on('change.query', updateQuery);
	d3.selectAll('#enter').on('click', updateQuery);
	}

	function updateQuery() {

	// update the query
	//var new_where = "&where=amenity=='" + d3.select('#selector_a').node().value + "' OR amenity=='" + d3.select('#selector_b').node().value + "'";
	var valu_A = d3.select('#Query').property('value');
	var new_where = "&where=" + valu_A; // + "'";
	var new_url = G.layers['overlay_a'].url + new_where + G.layers['overlay_a'].params;

	// clear the previous results
	//G.layers.output.gj.features = []
	//G.layers.output.lyr.features([]);

	// update the layer
	G.layers['overlay_a'].lyr
	.url(
	mapsense.url(new_url).hosts(['a','b','c','d'])
	)
	;

	G.layers['overlay_b'].lyr
	.url(
	mapsense.url(new_url).hosts(['a','b','c','d'])
	)
	;
	updateRadius('.overlay_a');
	}

	function toggleLabels() {
	var checkit = d3.select('#labels_control').property('checked');

	if (checkit) {
	G.layers.labels.lyr.visible(true);
	d3.select("#labels_layer").attr("style","opacity: 0.35;");
	var credit = d3.select('.mapsense-attribution').html();
	credit += ' <a target="_blank" href="http://stamen.com">©Stamen Design</a>';
	d3.select('.mapsense-attribution').html(credit);
	} else {
	G.layers.labels.lyr.visible(false)

	var credit = '<a target="_blank" href="https://developer.mapsense.co/tileViewer/?tileset=mapsense.earth">©Mapsense ©OpenStreetMap</a>';
	d3.select('.mapsense-attribution').html(credit);
	}
	}

	function markLatLon(lat,lon,name){
	name = name \|\| "";
	var feature = {
	type: "Feature",
	geometry: {type: "Point", "coordinates": [ +lon, +lat ]},
	};
	return feature;
	}

	</script>

	</body>
	</html>


	html, body, #myMap {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	font: 11px 'Droid Sans', sans-serif;
	color: #777;
	}

	body {font-size: 12px; }

	.ui, .mouseinfo {
	font: 12px monospace !important;
	color: black;
	}


	.float-left { float: left; }
	.float-right { float: right; }

	.top { position: absolute; top: 0; }
	.right { position: absolute; right: 0; }
	.bottom { position: absolute; bottom: 0; }
	.left { position: absolute; left: 0; }

	.bold { font-weight: bold; }

	circle {
	vector-effect: non-scaling-stroke;
	fill-opacity: 0.35;
	}

	.wrapper {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 99;
	margin: 0;
	clear: both;
	}

	.ui {
	/*position: absolute;
	*/
	overflow: auto;
	max-width: 280px;
	max-height: 100%;
	background: rgba(255,255,255,1);
	}
	.outline {
	outline: 1px solid #aaa;
	}

	.title {
	text-align: left;
	padding: 10px 2px 2px 20px;
	background: rgba(255,255,255,0.75);
	pointer-events: all;
	}
	.title-text {
	width: calc(100% - 280px);
	color: #3c4662;
	max-width: 600px;
	}
	.title-text p {
	text-align: left;
	vertical-align: top;
	}

	#control,
	.control {
	padding: 10px;
	/*margin-left: 10px;
	*/
	font-size: 1.1em;
	}

	.inputs {
	margin: 2px 1px;
	}

	.h1sim {
	font-size: 1.9em;
	font-weight: bold;
	}

	#selector {
	font: 20px 'Droid Sans', sans-serif;
	}

	#info-B, #info-A {
	background: rgba(255,255,255,0.8);
	overflow: auto;
	display: inline-block;
	max-height: 100%;
	pointer-events: all;

	overflow: auto;
	}

	.mouseinfo {
	position: absolute;
	bottom: 0;
	left: 0;
	pointer-events: none;
	max-width: 300px;
	/font: 20px 'Droid Sans', sans-serif;/
	}

	table {
	border-collapse: collapse;

	}
	table, th, td {
	border: 1px solid #eee;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px

	}

	.detailKey {
	background: #eee;
	color: #666;
	opacity: .8;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 400;

	}
	.detailVal {
	background: rgba(255,255,255,0.8);
	text-align: left;
	}

	.point {
	fill: rgba(255,0,0, 0.6);
	stroke: rgba(255,0,0, 1);
	/*stroke: rgba(68, 167, 228, 1); blue
	*/
	stroke-width: 2;
	}
	.clickselect {
	pointer-events: all;
	}

	.mapsense-attribution a {
	color: #999;
	}
	.mapsense-attribution {
	color: #999;
	background: rgba(255,255,255,0.5);
	padding: 7px;
	}

	label {
	pointer-events: all;
	}

	#labels_control {
	pointer-events: all;
	padding: 3px;
	}

	.output {
	fill: green;
	fill-opacity: 0.3;
	stroke: green;
	}

	.overlay_a {
	fill: #A14BD0;
	fill-opacity: 0.3;
	stroke: none;
	}


	/*.land {
	stroke: rgba(68, 167, 228, 0.5);
	}
	*/
	.selector {
	display: inline-block;
	padding: 1px 2px;
	border: 1px solid #777;
	font: 14px bold 'Droid Sans', sans-serif;
	line-height: 1em;
	color: #777;
	height: 16px;
	width: 50px;
	}

	a.button {
	display: inline-block;
	padding: 1px 2px;
	border: 1px solid #777;
	font: 14px bold 'Droid Sans', sans-serif;
	line-height: 1em;
	color: #777;
	height: 16px;
	min-width: 50px;
	vertical-align: top;
	/*margin-left: 4px;
	*/text-align: center;
	cursor: pointer;

	}

	a.button:hover {
	border: 1px solid #000;
	color: #000;
	}
	.mapsense-attribution {
	background-color: rgba(0, 0, 0, 0.5);
	color: #ccc;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 10px;
	font-size: 11px;
	font-family: sans-serif;
	line-height: 5px;
	text-decoration: none;
	}
	.mapsense-attribution a {
	color: #ccc;
	text-decoration: none;
	}
	.compass .back {
	fill: #eee;
	fill-opacity: .8;
	}
	.compass .fore {
	stroke: #999;
	stroke-width: 1.5px;
	}
	.compass rect.back.fore {
	fill: #999;
	fill-opacity: .3;
	stroke: #eee;
	stroke-width: 1px;
	shape-rendering: crispEdges;
	}
	.compass .direction {
	fill: none;
	}
	.compass .chevron {
	fill: none;
	stroke: #999;
	stroke-width: 5px;
	}
	.compass .zoom .chevron {
	stroke-width: 4px;
	}
	.compass .active .chevron,
	.compass .chevron.active {
	stroke: #fff;
	}
	.compass.active .active .direction {
	fill: #999;
	}
	path {
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	stroke-linecap: round;
	}
	/* zoom-dependent styling for roads & admins */
	/* general rules */
	path._undefined.none {
	fill: none;
	}
	path.landuse.other {
	fill: none;
	stroke: none;
	}
	.park {
	opacity: .3;
	}
	.water_line {
	opacity: .5;
	fill: none;
	}
	.runway {
	opacity: .7;
	}
	.rail_major,
	.rail_minor {
	stroke-dasharray: 4, 3;
	}
	.roads,
	.admin {
	fill: none;
	}
	.disputed_border,
	.state_border {
	stroke-dasharray: 8, 3;
	}
	/* admins */
	.country_border {
	stroke-width: 2;
	}
	.admin._3,
	.admin._2,
	.admin._1 {
	stroke-width: 1;
	}
	.admin._4 {
	stroke-width: 1.5;
	}
	.state_border._2 {
	stroke-width: .3;
	}
	.state_border._3,
	.state_border._4 {
	stroke-width: .5;
	}
	.state_border._8,
	.state_border._9,
	.state_border._10,
	.state_border._11 {
	stroke-width: 1.5;
	opacity: .75;
	}
	.state_border._12,
	.state_border._13,
	.state_border._14,
	.state_border._15,
	.state_border._16,
	.state_border._17 {
	stroke-width: 2;
	stroke-dasharray: 10, 4;
	opacity: .75;
	}
	/* roads */
	.ne_10m_roads._3 {
	stroke-width: 0.5;
	}
	.ne_10m_roads._4,
	.ne_10m_roads._5 {
	stroke-width: 0.75;
	}
	.ne_10m_roads._6 {
	opacity: 0.75;
	}
	.motorway._6 {
	stroke-width: .75;
	}
	.motorway._7,
	.ne_10m_roads._7 {
	stroke-width: 1;
	}
	.arterial_major._7 {
	stroke-width: .5;
	}
	/* zoom 8 */
	.ne_10m_roads._8 {
	stroke-width: 1.25;
	opacity: 0.75;
	}
	.motorway._8 {
	stroke-width: 1.25;
	opacity: 0.75;
	}
	.arterial_major._8 {
	stroke-width: .5;
	opacity: .75;
	}
	.arterial_minor._8 {
	stroke-width: 0.5;
	opacity: .5;
	}
	/* zoom 9 */
	.motorway._9 {
	stroke-width: 1.5;
	}
	.arterial_major._9 {
	stroke-width: .75;
	}
	.arterial_minor._9 {
	stroke-width: 0.5;
	opacity: .5;
	}
	/* zoom 10 */
	.motorway._10 {
	stroke-width: 1.75;
	}
	.arterial_major._10 {
	stroke-width: 1.25;
	}
	.arterial_minor._10 {
	stroke-width: 1;
	}
	.road_med._10 {
	stroke-width: .75;
	}
	/* zoom 11 */
	.motorway._11 {
	stroke-width: 3;
	}
	.arterial_major._11,
	.runway._11 {
	stroke-width: 1.75;
	}
	.arterial_minor._11 {
	stroke-width: 1.25;
	}
	.road_med._11 {
	stroke-width: 1;
	}
	.road_minor._11 {
	stroke-width: .5;
	}
	/* zoom 12 */
	.motorway._12 {
	stroke-width: 3.5;
	}
	.arterial_major._12,
	.runway._12 {
	stroke-width: 2;
	}
	.arterial_minor._12 {
	stroke-width: 1.5;
	}
	.road_med._12 {
	stroke-width: 1;
	}
	.road_minor._12 {
	stroke-width: .75;
	}
	/* zoom 13 */
	.motorway._13 {
	stroke-width: 5;
	}
	.arterial_major._13,
	.runway._13 {
	stroke-width: 3.5;
	}
	.arterial_minor._13 {
	stroke-width: 2.5;
	}
	.road_med._13 {
	stroke-width: 2;
	}
	.road_minor._13 {
	stroke-width: 1.5;
	}
	.path._13,
	.water_line._13 {
	stroke-width: 0.3;
	}
	/* zoom 14 */
	.motorway._14 {
	stroke-width: 6.5;
	}
	.arterial_major._14,
	.runway._14 {
	stroke-width: 4.75;
	}
	.arterial_minor._14 {
	stroke-width: 4.25;
	}
	.road_med._14 {
	stroke-width: 3.75;
	}
	.road_minor._14 {
	stroke-width: 2.5;
	}
	.rail_minor._14 {
	stroke-width: 1;
	}
	.rail_major._14 {
	stroke-width: 1.5;
	}
	.path._14,
	.water_line._14 {
	stroke-width: 0.75;
	}
	/* zoom 15 */
	.motorway._15 {
	stroke-width: 8.5;
	}
	.arterial_major._15,
	.runway._15 {
	stroke-width: 7;
	}
	.arterial_minor._15 {
	stroke-width: 6;
	}
	.road_med._15 {
	stroke-width: 5;
	}
	.road_minor._15 {
	stroke-width: 4;
	}
	.rail_minor._15 {
	stroke-width: 1.5;
	}
	.rail_major._15 {
	stroke-width: 1.5;
	}
	.path._15,
	.water_line._15 {
	stroke-width: 1;
	}
	/* zoom 16 */
	.motorway._16 {
	stroke-width: 12;
	}
	.arterial_major._16,
	.runway._16 {
	stroke-width: 9;
	}
	.arterial_minor._16 {
	stroke-width: 8;
	}
	.road_med._16 {
	stroke-width: 7;
	}
	.road_minor._16 {
	stroke-width: 6;
	}
	.rail_minor._16 {
	stroke-width: 1.5;
	}
	.rail_major._16 {
	stroke-width: 2;
	}
	.path._16,
	.water_line._16 {
	stroke-width: 2;
	}
	/* zoom 17 */
	.motorway._17 {
	stroke-width: 15;
	}
	.arterial_major._17,
	.runway._17 {
	stroke-width: 10;
	}
	.arterial_minor._17 {
	stroke-width: 9;
	}
	.road_med._17 {
	stroke-width: 8;
	}
	.road_minor._17 {
	stroke-width: 8;
	}
	.rail_minor._17 {
	stroke-width: 3;
	stroke-dasharray: 7, 6;
	}
	.rail_major._17 {
	stroke-width: 4;
	stroke-dasharray: 7, 6;
	}
	.path._17,
	.water_line._17 {
	stroke-width: 5;
	}
	/* zoom 18 */
	.motorway._18 {
	stroke-width: 16;
	}
	.arterial_major._18,
	.runway._18 {
	stroke-width: 10;
	}
	.arterial_minor._18 {
	stroke-width: 10;
	}
	.road_med._18 {
	stroke-width: 9;
	}
	.road_minor._18 {
	stroke-width: 8;
	}
	.rail_minor._18 {
	stroke-width: 3;
	stroke-dasharray: 7, 6;
	}
	.rail_major._18 {
	stroke-width: 4;
	stroke-dasharray: 7, 6;
	}
	.path._18,
	.water_line._18 {
	stroke-width: 5;
	}
	.mapsense-blackprint.labels {
	font-size: 18;
	fill: #999;
	font-weight: 200;
	text-transform: uppercase;
	stroke-width: .3;
	/stroke: grey;/
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-blackprint.tile-background {
	fill: #141414;
	}
	.mapsense-blackprint.land {
	fill: #000000;
	stroke: #bdbcbc;
	stroke-width: 1;
	}
	.mapsense-blackprint.agriculture {
	display: none;
	}
	.mapsense-blackprint.water_polygon {
	fill: #141414;
	}
	.mapsense-blackprint.water_line {
	stroke: #323232;
	stroke-width: 1;
	opacity: .3;
	fill: none;
	}
	.mapsense-blackprint.park {
	fill: rgba(15, 15, 15, 0.3);
	stroke: none;
	}
	.mapsense-blackprint.building {
	fill: none;
	stroke: #505050;
	stroke-width: .52;
	}
	.mapsense-blackprint.school {
	fill: #0f0f0f;
	stroke: none;
	}
	.mapsense-blackprint.other {
	stroke: #323232;
	}
	.mapsense-blackprint.urban {
	fill: none;
	stroke: none;
	}
	.mapsense-blackprint.roads {
	stroke: #222;
	}
	.mapsense-blackprint.motorway,
	.mapsense-blackprint.ne_10m_roads {
	stroke: #333;
	}
	.mapsense-blackprint.country_border,
	.mapsense-blackprint.disputed_border {
	stroke: grey;
	stroke-dasharray: 3 3;
	stroke-width: 1;
	fill: none;
	}
	.mapsense-blackprint.state_border {
	stroke: grey;
	stroke-dasharray: 3 3;
	fill: none;
	}
	.mapsense-dark.labels {
	font-size: 14;
	fill: #777;
	font-weight: 600;
	text-transform: uppercase;
	stroke-width: .3;
	/stroke: grey;/
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-dark.tile-background {
	fill: #3a4250;
	}
	.mapsense-dark.land {
	fill: #161619;
	}
	.mapsense-dark.agriculture {
	display: none;
	}
	.mapsense-dark.country_border,
	.mapsense-dark.disputed_border {
	stroke: #777;
	}
	.mapsense-dark.state_border {
	stroke: #777;
	}
	.mapsense-dark.water_polygon {
	fill: #3a4250;
	stroke: none;
	}
	.mapsense-dark.water_line {
	stroke: #516283;
	stroke-width: 1;
	fill: none;
	}
	.mapsense-dark.park {
	fill: #268061;
	}
	.mapsense-dark.building {
	fill: #222;
	stroke: black;
	}
	.mapsense-dark.school {
	fill: #35161e;
	}
	.mapsense-dark.other {
	fill: rgba(76, 69, 67, 0.15);
	stroke: black;
	}
	.mapsense-dark.urban {
	fill: #000000;
	stroke: none;
	}
	.mapsense-dark.ne_10m_roads {
	stroke: #7c5c2c;
	}
	.mapsense-dark.motorway {
	stroke: #7c5c2c;
	}
	.mapsense-dark.arterial_major {
	stroke: #4a472a;
	}
	.mapsense-dark.arterial_minor {
	stroke: #3c3c3c;
	}
	.mapsense-dark.road_med {
	stroke: #3c3c3c;
	}
	.mapsense-dark.road_minor {
	stroke: #323232;
	}
	.mapsense-dark.rail_major {
	stroke: #323228;
	fill: none;
	}
	.mapsense-dark.rail_minor {
	stroke: #323228;
	fill: none;
	}
	.mapsense-dark.runway {
	stroke: #333;
	}
	.mapsense-dark.path {
	stroke: #323228;
	}
	.mapsense-grayscale.labels {
	font-size: 14;
	fill: #777;
	font-weight: 600;
	text-transform: uppercase;
	stroke-width: .3;
	/stroke: grey;/
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-grayscale.tile-background {
	fill: #aaa9af;
	}
	.mapsense-grayscale.land {
	fill: #e8e5e5;
	stroke: none;
	}
	.mapsense-grayscale.water_polygon {
	fill: #aaa9af;
	}
	.mapsense-grayscale.water_line {
	stroke: gray;
	stroke-width: 1;
	}
	.mapsense-grayscale.park {
	fill: #cad4ca;
	}
	.mapsense-grayscale.building {
	fill: #f0f0f0;
	}
	.mapsense-grayscale.school {
	fill: #dcdcdc;
	stroke: none;
	}
	.mapsense-grayscale.other {
	fill: #cbcbcb;
	stroke: none;
	}
	.mapsense-grayscale.urban {
	fill: none;
	stroke: none;
	}
	.mapsense-grayscale.ne_10m_roads {
	stroke: #ccc;
	}
	.mapsense-grayscale.motorway {
	stroke: #CCC;
	}
	.mapsense-grayscale.arterial_major {
	stroke: #d2d2d2;
	}
	.mapsense-grayscale.arterial_minor {
	stroke: #d7d7d7;
	}
	.mapsense-grayscale.road_med {
	stroke: #DDD;
	}
	.mapsense-grayscale.road_minor {
	stroke: #DDD;
	}
	.mapsense-grayscale.rail_major {
	stroke: lightgray;
	}
	.mapsense-grayscale.rail_minor {
	stroke: lightgray;
	}
	.mapsense-grayscale.runway {
	stroke: #f2efef;
	}
	.mapsense-grayscale.path {
	stroke: #DDD;
	}
	.mapsense-grayscale.country_border,
	.mapsense-grayscale.disputed_border {
	stroke: #BBB;
	}
	.mapsense-grayscale.state_border {
	stroke: #bbb;
	}
	.mapsense-light.labels {
	font-size: 14;
	fill: #777;
	font-weight: 600;
	text-transform: uppercase;
	stroke-width: .3;
	/stroke: grey;/
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-light.tile-background {
	fill: #ffffff;
	}
	.mapsense-light.land {
	fill: #ddddda;
	stroke: none;
	}
	.mapsense-light.water_polygon {
	fill: #ffffff;
	stroke: none;
	}
	.mapsense-light.country_border,
	.mapsense-light.disputed_border {
	stroke: #aaa;
	}
	.mapsense-light.state_border {
	stroke: #aaa;
	}
	.mapsense-light.water_line {
	stroke: #c8d0df;
	}
	.mapsense-light.park {
	fill: #caceb9;
	stroke: none;
	}
	.mapsense-light.building {
	fill: #d7d6d1;
	}
	.mapsense-light.school {
	fill: #eadddb;
	stroke: none;
	}
	.mapsense-light.other {
	fill: none;
	stroke: none;
	}
	.mapsense-light.urban {
	fill: rgba(177, 135, 74, 0.07);
	stroke: none;
	}
	.mapsense-light.ne_10m_roads {
	stroke: #ededed;
	}
	.mapsense-light.motorway {
	stroke: #f6f4f3;
	}
	.mapsense-light.arterial_major {
	stroke: #f4f4ef;
	}
	.mapsense-light.arterial_minor {
	stroke: #f1eded;
	}
	.mapsense-light.road_med {
	stroke: #f6f3f3;
	}
	.mapsense-light.road_minor {
	stroke: #faf8f8;
	}
	.mapsense-light.rail_major {
	stroke: #cccccc;
	}
	.mapsense-light.rail_minor {
	stroke: #cccccc;
	}
	.mapsense-light.runway {
	stroke: #ccc;
	}
	.mapsense-light.path {
	stroke: #ccc;
	}
	.mapsense-parchment.labels {
	font-size: 14;
	fill: #777;
	font-weight: 600;
	text-transform: uppercase;
	stroke-width: .3;
	/stroke: grey;/
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-parchment.tile-background {
	fill: #b8bdc1;
	}
	.mapsense-parchment.land {
	fill: #e3d6c5;
	stroke: #976f60;
	stroke-width: 1;
	}
	.mapsense-parchment.water_polygon {
	fill: #b8bdc1;
	stroke: #976f60;
	stroke-width: .5;
	}
	.mapsense-parchment.water_line {
	stroke: #b8bdc1;
	}
	.mapsense-parchment.park {
	fill: #cbbca6;
	}
	.mapsense-parchment.building {
	fill: #d4c9ba;
	}
	.mapsense-parchment.school {
	fill: rgba(90, 46, 5, 0.12);
	stroke: none;
	}
	.mapsense-parchment.other {
	fill: #e3d6c5;
	stroke: none;
	}
	.mapsense-parchment.urban {
	fill: rgba(255, 255, 255, 0.3);
	stroke: none;
	}
	.mapsense-parchment.ne_10m_roads {
	stroke: #aea295;
	}
	.mapsense-parchment.motorway {
	stroke: #aea295;
	}
	.mapsense-parchment.arterial_major {
	stroke: #d5c5b7;
	}
	.mapsense-parchment.arterial_minor {
	stroke: #cab7aa;
	}
	.mapsense-parchment.road_med {
	stroke: #d8c8bb;
	}
	.mapsense-parchment.road_minor {
	stroke: #d8c8bb;
	}
	.mapsense-parchment.rail_major {
	stroke: #bda897;
	}
	.mapsense-parchment.rail_minor {
	stroke: #bda897;
	}
	.mapsense-parchment.runway {
	stroke: #ede5d5;
	}
	.mapsense-parchment.path {
	stroke: #ede5d5;
	}
	.mapsense-parchment.country_border,
	.mapsense-parchment.disputed_border {
	stroke: #976f60;
	}
	.mapsense-parchment.state_border {
	stroke: #976f60;
	}
	.mapsense-sketch.labels {
	font-size: 14;
	fill: #777;
	font-weight: 600;
	text-transform: uppercase;
	stroke-width: .3;
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-sketch.tile-background {
	fill: #f0f0f0;
	}
	.mapsense-sketch.land {
	fill: #ffffff;
	stroke: #bdbcbc;
	stroke-width: 1;
	}
	.mapsense-sketch.water_polygon {
	fill: #f0f0f0;
	stroke: #bdbcbc;
	stroke-width: .5;
	}
	.mapsense-sketch.water_line {
	stroke: #cccaca;
	}
	.mapsense-sketch.park {
	fill: none;
	stroke-width: .55;
	stroke: #dad8d8;
	}
	.mapsense-sketch.building {
	fill: none;
	stroke: #d4d4d4;
	stroke-width: .52;
	}
	.mapsense-sketch.school {
	fill: none;
	stroke: #dadada;
	}
	.mapsense-sketch.urban {
	fill: none;
	stroke: none;
	}
	.mapsense-sketch.ne_10m_roads {
	stroke: #eee;
	}
	.mapsense-sketch.motorway {
	stroke: #ddd;
	}
	.mapsense-sketch.arterial_major {
	stroke: #eee;
	}
	.mapsense-sketch.arterial_minor {
	stroke: #eee;
	}
	.mapsense-sketch.road_med {
	stroke: #eee;
	}
	.mapsense-sketch.road_minor {
	stroke: #f5f5f5;
	}
	.mapsense-sketch.rail_major {
	stroke: #ddd;
	}
	.mapsense-sketch.rail_minor {
	stroke: #ddd;
	}
	.mapsense-sketch.runway {
	stroke: #ddd;
	}
	.mapsense-sketch.path {
	stroke: #f5f5f5;
	}
	.mapsense-sketch.country_border,
	.mapsense-sketch.disputed_border {
	stroke: #ccc;
	}
	.mapsense-sketch.state_border {
	stroke: #ccc;
	}
	.mapsense-tron.labels {
	font-size: 14;
	fill: #888;
	font-weight: 600;
	text-transform: uppercase;
	stroke-width: .3;
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-tron.tile-background {
	fill: #000000;
	}
	.mapsense-tron.land {
	fill: #172c3a;
	stroke: none;
	}
	.mapsense-tron.water_polygon {
	stroke: none;
	fill: black;
	}
	.mapsense-tron.country_border,
	.mapsense-tron.disputed_border {
	stroke: #666;
	}
	.mapsense-tron.state_border {
	stroke: #666;
	}
	.mapsense-tron.water_line {
	stroke: #111119;
	}
	.mapsense-tron.park {
	fill: #060a10;
	}
	.mapsense-tron.building {
	fill: #07212a;
	stroke: none;
	}
	.mapsense-tron.school {
	fill: #162532;
	stroke: none;
	}
	.mapsense-tron.other {
	fill: #11242d;
	stroke: none;
	}
	.mapsense-tron.urban {
	fill: none;
	stroke: none;
	}
	.mapsense-tron.ne_10m_roads {
	stroke: #36606f;
	}
	.mapsense-tron.motorway {
	stroke: #36606f;
	}
	.mapsense-tron.arterial_major {
	stroke: #295563;
	}
	.mapsense-tron.arterial_minor {
	stroke: #295563;
	}
	.mapsense-tron.road_med {
	stroke: #2b3e49;
	}
	.mapsense-tron.road_minor {
	stroke: #1b333a;
	}
	.mapsense-tron.rail_major {
	stroke: #1b333a;
	}
	.mapsense-tron.rail_minor {
	stroke: #1b333a;
	}
	.mapsense-tron.runway {
	stroke: #1e414c;
	}
	.mapsense-tron.path {
	stroke: #1b333a;
	}
	.mapsense-vintage.labels {
	font-size: 16;
	fill: #4c83b2;
	font-weight: 400;
	text-transform: uppercase;
	stroke-width: .3;
	stroke: grey;
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-vintage.tile-background {
	fill: #87c8ca;
	}
	.mapsense-vintage.land {
	fill: #fffaf2;
	}
	.mapsense-vintage.water_polygon {
	fill: #87c8ca;
	}
	.mapsense-vintage.country_border,
	.mapsense-vintage.disputed_border {
	stroke: #aaa;
	}
	.mapsense-vintage.state_border {
	stroke: #aaa;
	}
	.mapsense-vintage.water_line {
	stroke: #b5e2e4;
	}
	.mapsense-vintage.park {
	fill: #c6f3bd;
	stroke: none;
	}
	.mapsense-vintage.building {
	fill: #f9ece2;
	stroke: none;
	}
	.mapsense-vintage.school {
	fill: #f0eced;
	stroke: none;
	}
	.mapsense-vintage.urban {
	fill: rgba(243, 210, 191, 0.19);
	stroke: none;
	}
	.mapsense-vintage.ne_10m_roads {
	stroke: #ffb67e;
	}
	.mapsense-vintage.motorway {
	stroke: #f6bd86;
	}
	.mapsense-vintage.arterial_major {
	stroke: #c2d7df;
	}
	.mapsense-vintage.arterial_minor {
	stroke: #cfdddb;
	}
	.mapsense-vintage.road_med {
	stroke: #dae9ea;
	}
	.mapsense-vintage.road_minor {
	stroke: #ededed;
	}
	.mapsense-vintage.rail_major {
	stroke: #c7c4c4;
	}
	.mapsense-vintage.rail_minor {
	stroke: #c7c4c4;
	}
	.mapsense-vintage.runway {
	stroke: #e1dede;
	}
	.mapsense-vintage.path {
	stroke: #e1dede;
	}
	.mapsense-simple.labels {
	font-size: 14;
	fill: #777;
	font-weight: 600;
	text-transform: uppercase;
	stroke-width: .3;
	font-stretch: expanded;
	letter-spacing: 1.5;
	font-family: "Josefin Sans";
	}
	.mapsense-simple.tile-background {
	fill: #CBE6F3;
	}
	.mapsense-simple.land {
	fill: #ffffff;
	stroke: #a2d3f2;
	stroke-width: 1;
	}
	.mapsense-simple.water_polygon {
	fill: #CBE6F3;
	stroke: #b6d3e0;
	stroke-width: 0.5px;
	}
	.mapsense-simple.water_line {
	stroke: #a2d3f2;
	}
	.mapsense-simple.park {
	fill: none;
	stroke-width: 0;
	stroke: #dad8d8;
	}
	.mapsense-simple.landuse {
	fill: none;
	stroke: none;
	}
	.mapsense-simple.building {
	fill: none;
	stroke: #d4d4d4;
	stroke-width: .52;
	}
	.mapsense-simple.school {
	fill: none;
	stroke: none;
	}
	.mapsense-simple.other {
	fill: none;
	stroke: none;
	}
	.mapsense-simple.urban {
	fill: none;
	stroke: none;
	}
	.mapsense-simple.ne_10m_roads {
	stroke: #eee;
	}
	.mapsense-simple.motorway {
	stroke: #ddd;
	}
	.mapsense-simple.arterial_major {
	stroke: #eee;
	}
	.mapsense-simple.arterial_minor {
	stroke: #eee;
	}
	.mapsense-simple.road_med {
	stroke: #eee;
	}
	.mapsense-simple.road_minor {
	stroke: #f5f5f5;
	}
	.mapsense-simple.rail_major {
	stroke: #ddd;
	}
	.mapsense-simple.rail_minor {
	stroke: #ddd;
	}
	.mapsense-simple.runway {
	stroke: #ddd;
	}
	.mapsense-simple.path {
	stroke: #f5f5f5;
	}
	.mapsense-simple.country_border,
	.mapsense-simple.disputed_border {
	stroke: #ccc;
	}
	.mapsense-simple.state_border {
	stroke: #ccc;
	}
	.mapsense-simple.ne_10m_roads._3 {
	stroke-width: 0.5;
	stroke: none;
	}
	.mapsense-simple.ne_10m_roads._4,
	.mapsense-simple.ne_10m_roads._5 {
	stroke-width: 0.75;
	stroke: none;
	}
	.mapsense-simple.ne_10m_roads._6 {
	opacity: 0.75;
	stroke: none;
	}
	svg.mapsense-map {
	width: 100%;
	height: 100%;
	}