Skip to content

Home

Jump to bottom Edit New page
Karl Kim edited this page May 6, 2015 · 8 revisions

Foraging-Map Setup Guide

1. Branch Specification

  1. master branch is for Typescript project. Visual Studio project file is uploaded together. To use Typescript version, install Visual Studio 2013 (Community version is possible), and install Typescript through http://www.typescriptlang.org/. Also you might want to install Web Essentials through http://vswebessentials.com/.
  2. JavaScript branch is not available for now. You have to use typescript to edit code.

2. Server Setup

  1. You can choose either using an external server or setting up a laptop as a local server.
  2. When you choose using a laptop as a local server, you might want to check https://www.apachefriends.org/. It provides automatic setup of Apache/MySQL/PHP. These three programs that you need to run a laptop as a server.
  3. Once you finish installing Apache/MySQL/PHP, check which directory is your web root directory. We will call this directory as [HOST]. The default [HOST] location in Windows environment is *C:\xampp\htdocs* .
  4. Enable Wifi-Hotspot of a laptop. (I discourage using router since most of router has firewall, so if you don't setup router separately, sensor cannot send any signal into a laptop server.)
  5. Check ip address of a laptop server. In Windows environment, open command (cmd) and type ipconfig. Find IPv4 adress under wireless adapter Wi-Fi section. That will be your host address, and you need to assign host address into a sensor so that the sensor can find the server. ex> If the IPv4 is 123.213.36.47, then you might have to pass this kind of address to sensor: http://123.213.36.47/foraging/core/php/createBend.php?sid=BS001&value=50 (sid is sensor id, and value is sensor value)
  6. Check https://github.com/PublicDesignWorkshop/Foraging-Sensor for more information about setting sensor.

3. Program Setup

  1. Download or clone master branch. You can see [DIR]/foragingmap/ folder which has 'index.html' file and other folders, such as 'content', 'core', 'favicons', etc. This is your root folder of application.
  2. Go to [DIR]/foragingmap/core/php/ folder, and open 'database.php' file with text editor, or Visual Studio. There are four variables; '$host', '$username', '$password', '$db_name'. Usually php server blocks cross domain, you may not need to change '$host' variable. However, you need to change other variables into the server information that you have. For '$db_name', you can put the database name that you already have, or put a new one. Database creation code will generate automatically if there is no database in your server.
  3. Upload [DIR]/foragingmap/ folders into your server. You can change the name of root directory, but keep the structure of directory. For example, do not move index.html file do different location, since it uses relative address.
  4. type this in your browser address box. [HOST]/foragingmap/core/php/createdatabase.php You will see the message that database and tables are created. If you get an error message, check again the 'database.php' and make sure you put the right server information. (Sometimes, server doesn't let certain user create new database.)
  5. After you setup database, enter [HOST]/foragingmap in your browser address box, and check the map and data will be shown correctly.
  6. make sure change the permission of [HOST]/foragingmap/content/picture folder into 777, unless the picture file will not be uploaded.
  7. When the basic setup is done, I seriously recommend you to delete 'createdatabase.php', and 'foragingmap.sql' under [HOST]/foragingmap/core/php/ folder. Since those files can manipulate server data easily, it's better idea to remove from your server.

4. Program Structure

Mr. Mappy Class Diagram

5. Useful Reference

  1. http://backbonejs.org/ - Ajax communication between client and server performed through backbone.js structure.
  2. http://wiki.openstreetmap.org/wiki/Tile_servers - I use OpenStreepMap, and there are several tile maps that you can use. To change tile map, find the tile map server from the link and change 'tileMapAddress' value in [DIR]/core/json/setting.json file.
  3. https://github.com/makinacorpus/Leaflet.TextPath - I use TextPath plug-in for leaflet to render arrow path for showing donation flows.
  4. http://leafletjs.com/ - Leaflet (version 0.7.3) (I used version 0.7.3 even though version 0.8-dev is more stable in mobile environment since TextPath plug-in only works in 0.7.3 for now. So think carefully if you decided to change the version of leaflet.)
Add a custom footer
Add a custom sidebar
Clone this wiki locally