Skip to content

Instantly share code, notes, and snippets.

@mapsense-examples

mapsense-examples/arc.js

Last active August 29, 2015 14:26
Show Gist options
  • Save mapsense-examples/1956620a07ee8c4441a0 to your computer and use it in GitHub Desktop.
Save mapsense-examples/1956620a07ee8c4441a0 to your computer and use it in GitHub Desktop.
Download ZIP
inner + outer svg filters
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>
<link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>
<link type="text/css" href="simple.css" rel="stylesheet"/>
<style>
html, body, #myMap {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
font-size: 16px;
font-family: Helvetica, Arial, sans-serif, 'Droid Sans';
color: #666;
}
</style>
</head>
<body>
<div id="myMap"></div>
<svg>
<defs id="the_defs">
<filter id="gblur">
<!-- outer glow (blue) -->
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="mask"></feColorMatrix>
<feMorphology in="mask" radius="1" operator="dilate" result="mask"></feMorphology>
<feColorMatrix in="mask" type="matrix" values="0 0 0 0.26 0 0 0 0 0.65 0 0 0 0 0.89 0 0 0 0 500 0" result="r0"></feColorMatrix>
<feGaussianBlur in="r0" stdDeviation="4" result="r1"></feGaussianBlur>
<feComposite operator="out" in="r1" in2="mask" result="comp"></feComposite>
<feMerge result="oglow">
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="r1"></feMergeNode>
</feMerge>
<!-- inner glow (brown) -->
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 500 0" result="mask"></feColorMatrix>
<feMorphology in="mask" radius="1" operator="erode" result="r1"></feMorphology>
<feGaussianBlur in="r1" stdDeviation="4" result="r2"></feGaussianBlur>
<feColorMatrix in="r2" type="matrix" values="1 0 0 0 0.58 0 1 0 0 0.36 0 0 1 0 0.106 0 0 0 -1 1" result="r3"></feColorMatrix>
<feComposite operator="in" in="r3" in2="mask" result="comp"></feComposite>
<feMerge result="myglow">
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="comp"></feMergeNode>
</feMerge>
<feMerge result="the_gblur">
<feMergeNode in="oglow"></feMergeNode>
<feMergeNode in="myglow"></feMergeNode>
</feMerge>
</filter>
</defs>
</svg>
</body>
<script type="text/javascript">
var key = "key-2d5eacd8b924489c8ed5e8418bd883bc";
var basemap = mapsense.basemap()
.apiKey(key)
.style('simple')
// basemap's selection function from mapsense.js
// plus add blur class to land
// and change paint-order: stroke
.selection(function(s) {
var style = 'simple';
var styleClass = style ? "mapsense-" + style : "";
var zoomClass = "_" + Math.floor(basemap.map().zoom());
s.attr("class", function(feature) {
var classes = [ styleClass, zoomClass ];
if (feature.properties) {
if (feature.properties.layer)
classes.push(feature.properties.layer);
if (feature.properties.layer == 'land' && !feature.properties.sub_layer) {
classes = [ zoomClass, 'fadeland' ];
if (!feature.properties.sub_layer) {
//s.attr('filter','url(#gblur)')
s.attr('class','')
//.attr('filter','url(#gblur)')
.attr('stroke','blue')
.attr('stroke-width','4')
.attr('paint-order', 'stroke')
;
return classes.join(" ");
}
}
if (feature.properties.sub_layer)
classes.push(feature.properties.sub_layer);
}
return classes.join(" ");
});
d3.selectAll('.fadeland')
.attr('filter','url(#gblur)')
.attr('class','')
.attr('stroke','rgba(68, 167, 228, 1)')
.attr('fill','#F5F0ED')
.attr('stroke-width','1')
.attr('paint-order', 'stroke')
});
var map = mapsense
.map("#myMap")
//.add(basebase)
.add(basemap)
;
map.add(mapsense.hash());
var the_defs = d3.select('#the_defs');
var defs = d3.select('.mapsense-map').append(the_defs.node());
</script>
</html>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment