Simple Javascript library for accessing the Thenmap API.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
examples
js
src
.bowerrc
.gitignore
Gruntfile.js
LICENSE
README.md
bower.json
package-lock.json
package.json

README.md

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:

  • width
  • height
  • language
  • dataKey
  • dataset
  • date
  • projection
  • callback

dataKey is the id of the Google spreadsheet. callback is a function that will be called when the map is fully rendered (but not necessarily colored yet). width and height will determine the size and viewbox of the SVG.

dataset is one of the id's listed at thenmap-api.herokuapp.com/doc/v2, e.g. se-7 for Swedish municipalities. The default is world-2, nations of the world.

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.0.0

    • Use v2 of the Thenmap API. Some maps may look different, see this blog post on what's new.
    • Default dataset is not 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