thenmap-js

Simple Javascript library for accessing the Thenmap API. This script will fetch data for one date at a time. If you want to create sliders, showing different dates in one visualization, we strongly recommend you to rather fetch all borders in one request.

Getting started

Start by preparing your Google Spreadsheet with data. The spreadsheet should contain a list of the entities that you want to color. The country is entity in the id column and the fill color in the color column. Thenmap.js accepts any CSS color syntax (e.g. #99cccc, purple or rgb(0, 231, 99))

We use ISO 3166 codes for modern nations and subdivisions, where available. Use these sample datasets for reference to get correct shape ids.

Publish the dataset by clicking File > Publish to the web and Start publishing.

Get the id of the Google spreadsheet from the url and add Thenmap.js to you website with the following code snippet:

    <div id="map"></div>

    <script src="thenmap.js"></script>
    <script>
    var settings = {
      dataKey: "0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE",
      dataset: "world-2",
      date: "1949"
    }
    Thenmap.init("map", settings);
    </script>

Thenmap takes the following settings:

See the API documentation for more details on the settings.

See the examples folder and the demo page for examples.

CDN, download and building

The Javascript is hosted on Amazon. To include it from there:

<script src="https://drvkoaf101245.cloudfront.net/thenmap-1.0.6.min.js"></script>

...or you can simply download it from there.

To clone this repo and build the script yourself:

npm install -g grunt-cli
git clone https://github.com/rotsee/thenmap-js.git
cd thenmap-js
npm install
grunt

The latest thenmap-x.x.x.min.js file is now in the build folder.

License

This code includes Tabletop.js, copyright (c) 2012-2013 Jonathan Soma, and released under MIT license.

Everything else is copyright 2018 J++ Stockholm, and released under MIT license.

In short: Feel free to use the code as you want.

Changelog

• 2.2.2

  • Iron out bugs in colour method

• 2.2.0

  • Add colour method to recolour map

• 2.1.0

  • Upgrade Tabletop.js to 1.5.4
  • Add data option to pass coloring data directly
  • Rename dataset to map, add deprecation notice.

• 2.0.0

  • Use v2 of the Thenmap API. Some maps may look different, see this blog post on what's new.
  • Default dataset is now world-2 (nations of the world).

• 1.0.6

  • Remove parts of the debug mode that were ironically buggy.

• 1.0.5

  • Styling fixes
  • Really make hover effect work in Chrome

• 1.0.4

  • Use only one API module, making both back- and frontend a bit faster
  • Make hover effect work in Chrome

• 1.0.3

  • The data module of the API had a major flaw. That is now fixed, but at the cost of breaking backwards compability.

• 1.0.2

  • Replace depracated API parameter names
  • Resize container element on start
  • Hover effect
  • Minor code fixes

• 1.0.1

  • Fix bug where a path would miss a title

• 1.0.0

  • First version