Last active
August 29, 2015 14:26
-
-
Save mapsense-examples/1956620a07ee8c4441a0 to your computer and use it in GitHub Desktop.
inner + outer svg filters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"/> | |
| <link href='http://fonts.googleapis.com/css?family=Stalemate' rel='stylesheet' type='text/css'> | |
| <style> | |
| html, body, #myMap, #pane { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| overflow: hidden; | |
| font-size: 16px; | |
| font-family: Helvetica, Arial, sans-serif, 'Droid Sans'; | |
| color: #666; | |
| position: absolute; | |
| } | |
| #pane { | |
| background: url(noise.png); | |
| pointer-events: none; | |
| } | |
| .route { | |
| fill: none; | |
| stroke: #755; | |
| stroke-opacity: 1; | |
| stroke-width: 2; | |
| stroke-dasharray: 5,6; | |
| stroke-linejoin: round; | |
| } | |
| .marker { | |
| fill: none; | |
| stroke: none; | |
| } | |
| .mapsense-attribution { background: none; } | |
| .oldfont { font: bold 30px Stalemate; } | |
| #compass { | |
| background-image: url(compass4.svg), none; | |
| background-repeat: no-repeat; | |
| position: absolute; | |
| bottom: 30px; | |
| left: 30px; | |
| width: 77px; | |
| height: 88px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="myMap"></div> | |
| <div id="pane"></div> | |
| <div id="compass"></div> | |
| <svg> | |
| <defs id="the_defs"> | |
| <!-- <pattern id="image_pattern" x="0" y="0" patternUnits="userSpaceOnUse" height="30" width="30"> | |
| <image x="0" y="0" height="30" width="30" xlink:href="bike.png"></image> | |
| </pattern> --> | |
| <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 map = mapsense.map("#myMap"); | |
| var G = {}; | |
| var grats, route, geom; | |
| /* d3.json('ne110_graticules10.geojson', function(data) { | |
| grats = mapsense.geoJson() | |
| .features(data.features) | |
| .selection(function(d){ | |
| d.attr("class", "graticule"); | |
| }) | |
| ; | |
| map.add(grats); | |
| });*/ | |
| 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') | |
| }); | |
| map.add(basemap); | |
| d3.json('start_finish.geojson', function(data) { | |
| G.start_finish = mapsense.geoJson() | |
| .features(data.features) | |
| .selection(function(s){ | |
| s.attr("class", function(d){ | |
| var grp = d3.select(s.node().parentNode).append("g") | |
| .attr("width","30") | |
| .attr("height","30") | |
| .attr("transform",d3.select(this).attr("transform")); | |
| grp.append("text") | |
| .data([d]) | |
| .attr("x", "-0.1em") | |
| .attr("y", "0.5em") | |
| .attr("class", "oldfont") | |
| .attr("text-anchor", "middle") | |
| .text(function(f){ | |
| return f.properties.name | |
| }) | |
| ; | |
| return "point"; | |
| }); | |
| s.attr("r", "3") | |
| ; | |
| }) | |
| .scale("fixed"); | |
| map.add(G.start_finish); | |
| }); | |
| G.pt_layer = mapsense.geoJson() | |
| .scale("fixed"); | |
| d3.json('raamdens.geojson', function(data) { | |
| route = mapsense.geoJson() | |
| .features(data.features) | |
| .selection(function(d){ | |
| d.attr("class", "route"); | |
| }) | |
| ; | |
| map.add(route); | |
| geom = data.features[0].geometry; | |
| // HatTip! https://www.mapbox.com/mapbox.js/example/v1.0.0/animate-marker-along-line/ | |
| G.j = 0; | |
| G.point = markLatLon(0,0); // a geojson features array | |
| G.pt_layer.features([G.point]) | |
| .selection(function(s){ | |
| s.attr('class','marker'); | |
| s.attr("r", "15"); | |
| var grp = d3.select(s.node().parentNode).append("g") | |
| .attr("width","30") | |
| .attr("height","30") | |
| .attr("transform",s.attr("transform")); | |
| grp.append("image") | |
| .attr("xlink:href", "bike.png") | |
| .attr("x", "-10") | |
| .attr("y", "-25") | |
| .attr("width", "30") | |
| .attr("height", "30"); | |
| }); | |
| map.add(G.pt_layer); | |
| tick(); | |
| }); | |
| map.add(mapsense.hash()); | |
| /* | |
| var the_defs = d3.select('#the_defs'); | |
| var defs = d3.select('.mapsense-map').append(the_defs.node()); | |
| */ | |
| function tick() { | |
| //console.log(G.j, geom.coordinates.length); | |
| // Set the marker to be at the same point as one | |
| // of the segments or the line. | |
| G.point.geometry.coordinates[0] = geom.coordinates[G.j][0]; | |
| G.point.geometry.coordinates[1] = geom.coordinates[G.j][1]; | |
| G.pt_layer.features([G.point]); | |
| // Move to the next point of the line | |
| // until `j` reaches the length of the array. | |
| if (++G.j < geom.coordinates.length) setTimeout(tick, 50); | |
| } | |
| function markLatLon(lat,lon,name){ | |
| name = name || ""; | |
| var feature = { | |
| type: "Feature", | |
| geometry: {type: "Point", "coordinates": [ +lon, +lat ]}, | |
| }; | |
| return feature; | |
| } | |
| </script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| //fill: none; | |
| } | |
| .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