Map & Globe

Pan and zoom in the map on the left to rotate the globe.

Click and drag the globe to pan on the map.

An example that shows a Chiasm plugin based on Leaflet.js alongside a Chiasm globe plugin based on the D3 example This is a Globe.

The Chiasm plugins demonstrated here are

layout A plugin for nested box layout of arbitrary components.
links A plugin for data binding. This links the pan and zoom between the globe and the map.
leaflet A Leaflet-based geographic map component.
globe A D3 black and white globe renderer that uses HTML5 Canvas.

See also these awesome derivatives:

Map & Globe with Rectangle by @tyrasd
visualizing map distortion by @enjalot

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Map & Globe</title>

<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.min.js"></script>

<script src="https://curran.github.io/model/cdn/model-v0.2.4.js"></script>

<script src="https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.0.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.1.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js"></script>

<script src="globe.js"></script>
    <script src="chiasm-leaflet.js"></script>

<style>

body {
        background-color: black;
      }

/* Make the container fill the page using CSS. */
      #chiasm-container {
        position: fixed;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
      }
    </style>

</head>
  <body>
    <div id="chiasm-container"></div>

var chiasm = Chiasm();

chiasm.plugins.layout = ChiasmLayout;
      chiasm.plugins.links = ChiasmLinks;
      chiasm.plugins.globe = Globe;
      chiasm.plugins.leaflet = ChiasmLeaflet;

chiasm.setConfig({
        "layout": {
          "plugin": "layout",
          "state": {
            "containerSelector": "#chiasm-container",
            "layout": {
              "orientation": "horizontal",
              "children": [
                "leafletMap",
                "d3Globe",
              ]
            }
          }
        },
        "leafletMap": {
          "plugin": "leaflet",
          "state": {
            "center": [-4.592, 39.859],
            "zoom": 5
          }
        },
        "d3Globe": {
          "plugin": "globe"
        },
        "links": {
          "plugin": "links",
          "state": {
            "bindings": [
              "leafletMap.zoom -> d3Globe.zoom",
              "leafletMap.center <-> d3Globe.center"
            ]
          }
        }
      });
    
    </script>
  </body>
</html>

Modified http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js to a secure url

Modified http://curran.github.io/model/cdn/model-v0.2.4.js to a secure url

Modified http://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js to a secure url

Modified http://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.0.js to a secure url

Modified http://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.1.js to a secure url

Modified http://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js

https://curran.github.io/model/cdn/model-v0.2.4.js

https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js

https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.0.js

https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.1.js

https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js