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
| // Hat tip Mike Bostock: https://github.com/mbostock/polymaps/blob/master/examples/bounds/bounds.js | |
| function bounds(features) { | |
| var i = -1, | |
| n = features.length, | |
| geometry, | |
| bounds = [{lon: Infinity, lat: Infinity}, {lon: -Infinity, lat: -Infinity}]; | |
| while (++i < n) { | |
| //geometry = features[i].data.geometry; | |
| geometry = features[i].geometry; | |
| boundGeometry[geometry.type](bounds, geometry.coordinates); | |
| } | |
| return bounds; | |
| } | |
| function boundPoint(bounds, coordinate) { | |
| var x = coordinate[0], y = coordinate[1]; | |
| if (x < bounds[0].lon) bounds[0].lon = x; | |
| if (x > bounds[1].lon) bounds[1].lon = x; | |
| if (y < bounds[0].lat) bounds[0].lat = y; | |
| if (y > bounds[1].lat) bounds[1].lat = y; | |
| } | |
| function boundPoints(bounds, coordinates) { | |
| var i = -1, n = coordinates.length; | |
| while (++i < n) boundPoint(bounds, coordinates[i]); | |
| } | |
| function boundMultiPoints(bounds, coordinates) { | |
| var i = -1, n = coordinates.length; | |
| while (++i < n) boundPoints(bounds, coordinates[i]); | |
| } | |
| var boundGeometry = { | |
| Point: boundPoint, | |
| MultiPoint: boundPoints, | |
| LineString: boundPoints, | |
| MultiLineString: boundMultiPoints, | |
| Polygon: function(bounds, coordinates) { | |
| boundPoints(bounds, coordinates[0]); // exterior ring | |
| }, | |
| MultiPolygon: function(bounds, coordinates) { | |
| var i = -1, n = coordinates.length; | |
| while (++i < n) boundPoints(bounds, coordinates[i][0]); | |
| } | |
| }; |
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
| @font-face { | |
| font-family: 'Stalemate'; | |
| font-style: normal; | |
| font-weight: 400; | |
| src: local('Stalemate'), local('Stalemate-Regular'), url(http://fonts.gstatic.com/s/stalemate/v4/ILXfSNYxooD2TPt48NlaP6CWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); | |
| } |
This file has been truncated, but you can view the full file.
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> | |
| <script src="bounds.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; | |
| } | |
| .graticule { stroke: RGBA(153, 180, 193, 1);; } | |
| .marker { | |
| fill: none; | |
| stroke: none; | |
| } | |
| .mapsense-attribution a, | |
| .mapsense-attribution { | |
| background: none; | |
| color: #999; | |
| line-height: 1em; | |
| } | |
| .oldfont { font: bold 30px Stalemate; } | |
| #compass { | |
| background-image: url(compass_jmk.svg), none; | |
| background-repeat: no-repeat; | |
| position: absolute; | |
| bottom: 15px; | |
| left: 15px; | |
| width: 122px; | |
| height: 158px; | |
| } | |
| circle { fill: none; stroke: none; } | |
| #wind { | |
| background-image: url(wind_aeolus70.png), none; | |
| background-repeat: no-repeat; | |
| position: absolute; | |
| top: 15px; | |
| left: 15px; | |
| width: 70px; | |
| height: 70px; | |
| -webkit-transform: rotate(30deg); | |
| -moz-transform: rotate(30deg); | |
| -ms-transform: rotate(30deg); | |
| -o-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| .mapsense-simple.tile-background { | |
| fill: RGBA(203, 230, 243, 0.75); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="myMap"></div> | |
| <div id="pane"></div> | |
| <!-- | |
| <div id="test"></div> | |
| <div id="seadragon"></div> | |
| --> | |
| <div id="wind"></div> | |
| <div id="compass"></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> | |
| <pattern id="dragon_pattern" x="0" y="0" patternUnits="userSpaceOnUse" height="100" width="100"> | |
| <image x="50" y="50" height="100" width="100"xlink:href="seadragon2.png"></image> | |
| </pattern> | |
| </defs> | |
| </svg> | |
| </body> | |
| <script> | |
| var map = mapsense.map("#myMap"); | |
| var G = {}; // Global object for our variables | |
| G.key = "key-2d5eacd8b924489c8ed5e8418bd883bc"; | |
| d3.json('ne110_graticules10.geojson', function(data) { | |
| G.graticule = mapsense.geoJson() | |
| .features(data.features) | |
| .selection(function(d){ | |
| d.attr("class", "graticule"); | |
| }) | |
| ; | |
| map.add(G.graticule); | |
| G.basemap = mapsense.basemap() | |
| .apiKey(G.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(G.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('class','') | |
| .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(G.basemap); | |
| // A separate file and layer for the start/finish | |
| // we'll give them stylin' labels | |
| d3.json('start_finish.geojson', function(data) { | |
| G.start_finish = mapsense.geoJson() | |
| .features(data.features) | |
| .selection(function(s){ | |
| s.attr("r", "3") | |
| .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"; | |
| }); | |
| }) | |
| .scale("fixed"); | |
| map.add(G.start_finish); | |
| }); | |
| // Route is from https://www.raceacrossamerica.org/raam | |
| d3.json('raamdens.geojson', function(data) { | |
| G.route = mapsense.geoJson() | |
| .features(data.features) | |
| .selection(function(d){ | |
| d.attr("class", "route"); | |
| }) | |
| ; | |
| map.add(G.route); | |
| G.route_coordinates = data.features[0].geometry.coordinates; | |
| // HatTip! https://www.mapbox.com/mapbox.js/example/v1.0.0/animate-marker-along-line/ | |
| G.j = 0; | |
| G.point = markLatLon(0,0); // placeholder; we'll update with route coordinates | |
| G.pt_layer = mapsense.geoJson() | |
| .scale("fixed") | |
| .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); | |
| // Zoom to the extent of the data | |
| map.extent(bounds(data.features)).zoomBy(-0.4); | |
| // Start the recursive move function | |
| updatePosition(); | |
| }); | |
| // Thar be dragons | |
| G.seadragon = mapsense.geoJson() | |
| .features([markLatLon(36.5, -73)]) | |
| .selection(function(s){ | |
| s.attr("class", 'sd'); | |
| d3.select(s.node().parentNode).append("image") | |
| .attr("xlink:href", "seadragon2.png") | |
| .attr("transform",s.attr("transform")) | |
| .attr("x", "-50") | |
| .attr("y", "-50") | |
| .attr("width", "100") | |
| .attr("height", "100"); | |
| s.attr("r", "50"); | |
| }) | |
| .scale("fixed"); | |
| map.add(G.seadragon); | |
| // Update the attribution |
View raw
(Sorry about that, but we can’t show files that are this big right now.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment