What is ng-TimeMap

ng-TimeMap is a tool for visualizing information from a Google Drive Spreadsheet simultaneously on an online map and timeline. Only features in the visible range of the timeline are displayed on the map, allowing the view to get asense of how time affects a set geographic data.

Creating a Spreadsheet for ng-TimeMap

  1. Build a new Google Spreadsheet using the template. You'll need to copy the template to your own Google Drive account by clicking the "Use this template" button.

  2. Next, go to your Google Drive account and open the new Spreadsheet. Click on the File menu and select “Publish to the Web.
  3. In the next window, click the blue "publish" button.
  4. Now, go to an instance of ng-TimeMap (either your own or one of our mirrors below) and use the dropdown menu at the top of the page to select your spreadsheet. You should see a view similar to the one below:
  5. That's it! You are ready to go!
    Remember: Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.

Adding Data to Your Spreadsheet

There are two types of feature that can be added to TimeMaps: Markers and Layers. To add a Marker, simply create a new row in your spreadsheet and type in row labeled "type" to marker. To add a layer, simply type layer instead of marker in the row column labeled "type".
Adding a Marker Adding a Layer

GeoJson.io is a great (AND FREE) tool for building layers for ng-TimeMap However, you can use any tool that creates valid KML or GeoJSON files to generate layer data for ng-TimeMap

Using ng-TimeMap in your own application

  1. Download the latest build of ng-TimeMap from Github
  2. Copy the contence of the "public" directory from the Github download to your application.
  3. In your project HTML file, place the following block of code within the head tags
  4. <!-- begin ng-timemap includes --> <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.css" type="text/css"> <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <!-- Optional theme --> <!-- Latest compiled and minified JavaScript --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link href="./plugins/css/multi-select.css" media="screen" rel="stylesheet" type="text/css"> <script type="text/javascript" src="//code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script><link rel="stylesheet" type="text/css" href="//:code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css"/> <!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/css/bootstrap-select.min.css"><!-- Latest compiled and minified JavaScript --><script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- end ng-timemap includes -->
  5. Next, create two divs within the body. One of these divs will be for the timeline component and other will contain the map component. Give these divs each a descriptive name
  6. Now, place the following block of code within the body of your document. <!-- Begin JS includes --> <script src="./plugins/js/jquery.multi-select.js" type="text/javascript"></script> <script src="./js/classes/gDriveSelector.js"></script> <script src="./js/classes/gDriveLoader.js"></script> <script src="./js/lib/overloads.js"></script> <script src="./js/classes/ui.js"></script> <script src="./js/classes/marker.js"></script> <script src="./js/classes/geojsonlayer.js"></script> <script src="./js/classes/makerset.js"></script> <script src="./js/classes/remotelayer.js"></script> <script src="./js/classes/timeline.js"></script> <script src="./js/classes/map.js"></script> <script src="./js/timemap.js"></script> <!-- End JS includes -->
  7. Below the code you added in the previous step, create a script tag and initialize an empty javascript object.var myApp = {}
  8. Now that we have created a namespace for our app, we can construct a timemap instance. Fill in the bold sections of the code below and copy it into your app. var = timeMapInstance = new timemap(Name of js object from previous step, { 'map': 'Idof map div here', 'timeline': 'Id of timeline div here', 'debug': false });
  9. If you wish to include a Google Drive Spreadsheet as the data source, add the following parameter to the timemap instance constructor 'key': "My Google Drive Key Here"
  10. If you wish to use a javascript array containing predefined map objects as your data source, add the following parameter to the timemap instance constructor 'data': my JS array
  11. Open gDriveSelector.js and set the variable CLIENT_ID to your own client id.