adding graticule code in setProjection and plugin

adding graticule example adding CSS to style block removing pointer events from graticulte
markmarkoh · Aug 27, 2014 · f467b67 · f467b67
1 parent fc95c13
commit f467b67
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 1 deletion.
diff --git a/src/examples/graticule.html b/src/examples/graticule.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<body>
+ <script src="http://d3js.org/d3.v3.min.js"></script>
+ <script src="http://d3js.org/topojson.v1.min.js"></script>
+ <!-- I recommend you host this file on your own, since this will change without warning -->
+ <script src="/src/rel/datamaps.world.js?v=1"></script>
+ <h2>Datamaps</h2>
+ <div id="container1" style="position: relative; width: 500px; height: 600px;"></div>
+
+ <script>
+ //basic map config with custom fills, mercator projection
+ var map = new Datamap({
+ scope: 'world',
+ element: document.getElementById('container1'),
+ projection: 'orthographic',
+ fills: {
+ defaultFill: 'rgba(0,0,0,0.7)',
+ lt50: 'rgba(0,244,244,0.9)',
+ gt50: 'red'
+ },
+ projectionConfig: {
+ rotation: [97,-30]
+ },
+ data: {
+ '071': {fillKey: 'lt50' },
+ '001': {fillKey: 'gt50' } 
+ }
+ });
+
+ map.graticule();
+
+
+ </script>
+</body>
diff --git a/src/js/datamaps.js b/src/js/datamaps.js
@@ -27,6 +27,9 @@
  highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
  highlightBorderWidth: 2
  },
+ projectionConfig: {
+ rotation: [97, 0]
+ },
  bubblesConfig: {
  borderWidth: 2,
  borderColor: '#FFFFFF',
@@ -66,6 +69,8 @@
  var width = options.width || element.offsetWidth;
  var height = options.height || element.offsetHeight;
  var projection, path;
+ var svg = this.svg;
+
  if ( options && typeof options.scope === 'undefined') {
  options.scope = 'world';
  }
@@ -81,6 +86,23 @@
  .translate([width / 2, height / (options.projection === "mercator" ? 1.45 : 1.8)]);
  }
 
+ if ( options.projection === 'orthographic' ) {
+
+ svg.append("defs").append("path")
+ .datum({type: "Sphere"})
+ .attr("id", "sphere")
+ .attr("d", path);
+
+ svg.append("use")
+ .attr("class", "stroke")
+ .attr("xlink:href", "#sphere");
+
+ svg.append("use")
+ .attr("class", "fill")
+ .attr("xlink:href", "#sphere");
+ projection.scale(250).clipAngle(90).rotate(options.projectionConfig.rotation)
+ }
+
  path = d3.geo.path()
  .projection( projection );
 
@@ -90,7 +112,7 @@
  function addStyleBlock() {
  if ( d3.select('.datamaps-style-block').empty() ) {
  d3.select('head').append('style').attr('class', 'datamaps-style-block')
- .html('.datamap .labels {pointer-events: none;} .datamap path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; } .hoverinfo hr {border:1px dotted #CCC; }');
+ .html('.datamap path.datamaps-graticule { fill: none; stroke: #777; stroke-width: 0.5px; stroke-opacity: .5; pointer-events: none; } .datamap .labels {pointer-events: none;} .datamap path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; } .hoverinfo hr {border:1px dotted #CCC; }');
  }
  }
 
@@ -228,6 +250,14 @@
  .html(html);
  }
 
+ function addGraticule ( layer, options ) {
+ var graticule = d3.geo.graticule();
+ this.svg.insert("path", '.datamaps-subunits')
+ .datum(graticule)
+ .attr("class", "datamaps-graticule")
+ .attr("d", this.path); 
+ }
+
  function handleArcs (layer, data, options) {
  var self = this,
  svg = this.svg;
@@ -464,6 +494,7 @@
  //set options for global use
  this.options = defaults(options, defaultOptions);
  this.options.geographyConfig = defaults(options.geographyConfig, defaultOptions.geographyConfig);
+ this.options.projectionConfig = defaults(options.projectionConfig, defaultOptions.projectionConfig);
  this.options.bubblesConfig = defaults(options.bubblesConfig, defaultOptions.bubblesConfig);
  this.options.arcConfig = defaults(options.arcConfig, defaultOptions.arcConfig);
 
@@ -477,6 +508,7 @@
  this.addPlugin('legend', addLegend);
  this.addPlugin('arc', handleArcs);
  this.addPlugin('labels', handleLabels);
+ this.addPlugin('graticule', addGraticule);
 
  //append style block with basic hoverover styles
  if ( ! this.options.disableDefaultStyles ) {