ng-TimeMap

What is ng-TimeMap

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

• Set the value of latitude and longitude to equal the latitude and longitude of the point you wish your marker to appear at. ng-TimeMap uses EPSG:3857 projection so you can use Google Maps or Open Street Map to get valid coordinates.
• The startDate and endDate fields will accept any date format located on this page.
• The datasource field stores whatever data you to display in the balloon that appears when you click on the marker.
• The image field stores the URL of the marker icon (.png or .jpg only). If not included, the map will default to the openlayers default icon.
• The tag and category fields allow you to sort and group data points on the timeline. You can add as many tags as you wish to a single point by separating each tag by a comma (","). However, markers can only be placed with a single category
• The Title field allows you to set the words which appear on the timeline bar representing the Marker.

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

• Set the value of latitude and longitude to equal the latitude and longitude of the point you wish your layer to appear at. ng-TimeMap uses EPSG:3857 projection so you can use Google Maps or Open Street Map to get valid coordinates.
• The startDate and endDate fields will accept any date format located on this page.
• The datasource stores the URL of a KML or geoJSON file that is rendered on the map for this object.
• The tag and category fields allow you to sort and group data points (markers and players) on the timeline. You can add as many tags as you wish to a single point by separating each tag by a comma (","). However, markers can only be placed with a single category
• The Title field allows you to set the words which appear on the timeline bar representing the Marker.

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
<!-- 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 -->
4. 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
5. 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 -->
6. Below the code you added in the previous step, create a script tag and initialize an empty javascript object.var myApp = {}
7. 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 });
8. 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"
9. 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
10. Open gDriveSelector.js and set the variable CLIENT_ID to your own client id.