In Swiftmap, you can add a graticule with one line of code.
Last active
April 30, 2018 22:52
-
-
Save HarryStevens/30daa8a31d0d444aceb55a58adedf7c8 to your computer and use it in GitHub Desktop.
Swiftmap Graticule
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
| license: mit |
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> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100vh; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <!-- Use d3-request to load a TopoJSON file. --> | |
| <script src="https://d3js.org/d3-collection.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-dispatch.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-dsv.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-request.v1.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/swiftmap.min.js"></script> | |
| <script> | |
| d3.json("countries.json", ready); | |
| function ready (error, data){ | |
| var map = swiftmap.map("#map") | |
| .graticule([18, 18]) | |
| .projection("equirectangular") | |
| .layerPolygons(data) | |
| .fit() | |
| .drawPolygons(); | |
| var colors = ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f"]; | |
| map.layers[0].polygons | |
| .transition().duration(2000) | |
| .style("fill", (d, i) => colors[i % colors.length] ); | |
| window.onresize = () => map.resize(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment