Skip to content

Instantly share code, notes, and snippets.

@mapsense-examples

mapsense-examples/README.mkd

Last active August 29, 2015 14:15
Show Gist options
  • Save mapsense-examples/58521fb48c68027c7b96 to your computer and use it in GitHub Desktop.
Save mapsense-examples/58521fb48c68027c7b96 to your computer and use it in GitHub Desktop.
Download ZIP
Make it Pretty
Raw
README.mkd

##Styling a map ###Default Styles Mapsense.css includes a number of pre-made styles for Mapsense basemaps. By default, .basemap() will apply the "light" style. To use another mapsense.css style, add its name as a parameter eg:

.style("vintage")

###Custom Styles To use your own styles like in this example, include a link to your stylesheet and append

.style(false)

Basemap classes feature by sublayer and zoom levels, which can then be styled with standard CSS. You can quickly generate CSS for your basemaps with the Mapsense Styler, or you can create your own as you see fit. Analytics

Raw
index.html
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
<script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
<!-- mapsense.css contains named map styles you can specify in the .style() tag, and css for other common map components -->
<link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>
<!-- link your own stylesheet and set .style(false) to create custom css-based map styles -->
<link type="text/css" href="mystyle.css" rel="stylesheet"/>
<style>
/* this block of css makes the map full-screen, without margin or scrollbars */
body, html, #myMap{
height: 100%;
width: 100%;
margin: 0px;
overflow: "hidden";
}
</style>
</head>
<body>
<div id="myMap"></div>
<script>
var map = mapsense
.map("#myMap") // add the map element to your div
.add(mapsense.basemap().apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc").style(false)) //ignore mapsense.css basemap styles
</script>
</body>
</html>
Raw
mystyle.css
/* This map style was created with http://styler.mapsense.co */
/* Style Template: default */
.land {
fill: #3682a3;
stroke: none;
}
.park {
fill: #317593;
stroke: none;
}
.school {
fill: #3b8fb3;
stroke: none;
}
.building {
fill: #317593;
stroke: none;
}
.urban {
fill: #439bc1;
stroke: none;
}
.admin {
fill: none;
stroke: #265b72;
}
.tile-background {
fill: #264272;
stroke: none;
}
.water_polygon {
fill: #264272;
stroke: none;
}
.water_line {
fill: none;
stroke: #2a497d;
}
.road_med,
.road_minor {
fill: none;
stroke: #3ab0ac;
}
.motorway,
.ne_10m_roads {
fill: none;
stroke: #6acecb;
}
.arterial_major,
.arterial_minor {
fill: none;
stroke: #43c1bd;
}
.rail_minor,
.rail_major {
fill: none;
stroke: #3dbab6;
}
.runway {
fill: none;
stroke: #30938f;
}
.path {
fill: none;
stroke: #2d8986;
}
path._undefined,
path.landuse.other {
fill: none;
stroke: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment