React Map Component

A variation of this map. The SwissMap component gets passed a url property with which it attempts to load the map data. When the loading callback fires it updates its state and gets re-rendered. Reload the page if the loading fails (the URL has a 30 % chance to be invalid).

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 12px Helvetica, sans-serif;
  position: relative;
  width: 960px;
  height: 500px;
}

.message {
  position: relative;
  text-align: center;
  top: 50%;
  margin: -15px auto 0 auto;
  line-height: 30px;
  width: 500px;
}

.message--error {
  color: red;
}

.country {
  fill: #222;
}

.canton-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
}
 
.municipality-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: .3;
}
 
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://fb.me/react-0.9.0.min.js"></script>
<script>

var ch = this.state.data,
        country = topojson.feature(ch, ch.objects.country),
        municipalityBoundaries = topojson.mesh(ch, ch.objects.municipalities, function(a, b) { return a !== b; }),
        cantonBoundaries = topojson.mesh(ch, ch.objects.cantons, function(a, b) { return a !== b; });

var path = d3.geo.path()
      .projection(null);

return React.DOM.svg({width: this.props.width, height: this.props.height},
      React.DOM.path({
        className: 'country', 
        d: path(country)
      }),
      React.DOM.path({
        className: 'municipality-boundaries', 
        d: path(municipalityBoundaries)
      }),
      React.DOM.path({
        className: 'canton-boundaries', 
        d: path(cantonBoundaries)
      })
    );
  }
});
 
React.renderComponent(
  SwissMap({
    url: Math.random() > 0.3 ? 'ch.json' : 'not-there.json',
    width: 960,
    height: 500
  }),
  document.body
);
 
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://fb.me/react-0.9.0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://fb.me/react-0.9.0.min.js