Skip to content

Instantly share code, notes, and snippets.

@mapsense-examples

mapsense-examples/index.html

Last active August 29, 2015 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mapsense-examples/7e26df897ccaef46e4a3 to your computer and use it in GitHub Desktop.
Save mapsense-examples/7e26df897ccaef46e4a3 to your computer and use it in GitHub Desktop.
Download ZIP
point buffers
Raw
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>
Raw
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;
}
Raw
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%;
}
Raw
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;
}
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment