Web_based Mapping

An Interactive, Multi-user Approach to Travel Mapping Make self-defined choices; Get the optimized route.

Senior Architect

Artist

Place Data Whom you are interested in

Get the route

User Data

Local

Senior Planner

Vertfied

Data Presentation

Query

Post 90’s

Public

Decision Making

USER

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

1. Abstraction

Content 1.

Abstraction

2.

Objectives

3.

Approach

4.

Data

5.

Rout Oprimizaiton

6.

Appendix

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

1. Abstraction

1. Abstraction As more and more people, especially the young generation, start doing self-assist travel and try to make travel decisions based on the experiences of others, especially those they are following, there is a need to invent a toolkit to help them make travel decisions based on social-network data.

This project is to create a web-based application that helps users to find out the particular places they want to visit, by different categories of places and by different groups of people. The app also provides route recommendation when users have provided places selection and time. We will use place information of San Francisco gathered from Facebook as an example and present the result on the App using Google-map-API for geocoding, visualization and route optimization, html for web design, php for data query, MySQL for data management. The visualized results include geocoded places with signs of category and popularity. The app also allows users to rate the places, thus updating the database.

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

2. Objectives

2. Objectives The major objectives of this project include: •

Enable users to identify the popular traveling spots by user types (un-

finished) and place types; •

Visualize the popularity of spots according to users’ reviews;

•

Enable traveling spots selection;

•

Enable route optimization (unfinished);

•

Establish datasets of places, datasets of reviews and datasets of users

(unfinished).

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

3. Approach

3. Approach The structure and process of the application works as follows: through the web page, the user select the category of places he/she wants to see. Then the html of the web page calls the php file to query the datasets for the required information in url format. And then the data is visualized on the web page through html. The user could turn on different categories of attractions/ food/retail/hotel and see the popularity of the places, and decide where he/ she wants to go. The he/she make an route optimization by setting the starting point, the ending point, and the go-through points.

Input information Decision Making

User Information Presentation

Travel Companion Website (Mobil App) User Interface

Query; Input (unfinished) (html)

Database

Data Visualization, Optimized Route Presentation Return result 1. User Interface Design 2. Application Structure and Algorithm Design

(php) (MySQL, server, datasets)

(html, javascript, css)

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

4. Data

4. Data 4.1 Data Source The ideal source would be from some popular travel website in China like http://www.qyer.com/ and Baidu map http://map.baidu.com/, where we could obtain collective information from China. However for some for some technical problems in data mining we decided to use the data of San Francisco, downloaded from http://minimaxir.com/2014/04/san-francisco/, where a software engineer Max Woolf gathered from Facebook through its Places product. This data file includes information of place id, name, categories, latitude and longitude, checkin_count, as is shown below.

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

4. Data

4. Data 4.2 Data Preparation I reclassified the category into four categories: Attractions, Food, Retail, Hotel, and rename the “category” as “label”. Then construct the data in MySQL. User Information is still lacking.

(This is an old picture, as my server is not recovered, I cannot update with a new one with the right columns.)

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

4. Data

4. Data 4.3 Data Search We use a php file to query from the dataset “sftravel” that we constructed in MySQL, then we return the result into an url through coding in the html. The code is as follows (‘my category’ is the value of the checked box we made for the four categories): var mycategory = checkedValue[i];

<input type=”checkbox” id=”chk1” name=”Attractions” value=”1” onclick = “show();”>Attractions<br>

searchUrl = ‘getxml.php?lat=’ + results[0].geometry.location. lat().toString() + ‘&lng=’ + results[0].geometry.location. lng().toString();

searchUrl = searchUrl + ‘&category=’ + mycategory + ‘&radius=’ + document.getElementById(‘radiusSelect’).value

<input type=”checkbox” id=”chk2” name=”Food” value=”2” onclick = “show();”>Food<br> <input type=”checkbox” id=”chk3” name=”Retail” value=”3” onclick = “show();”>Retail<br> <input type=”checkbox” id=”chk4” name=”Hotel” value=”4” onclick = “show();”>Hotel

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

4. Data

4. Data 4.3 Data Visualization - Geo-locating After we have got the result place data, we’ll geolocate them using google map API which is initialized firse like this : geocoder = new google.maps.Geocoder();

And the address of these places were located with markers on the map: var address = document.getElementById(‘addressInput’).value; geocoder.geocode({‘address’:address}, searchCallBack);}

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

4. Data

4. Data 4.3 Data Visualization - Marker Variation with check_in number and Category

To showing the popularity of each places, we use the checkin_count as an indicator. The higher the checkin_count, the larger the marker. For each category, I classified the data into four categories and assign different sizes of markers according to the checkin_count value. Data is processed and plotted through R studio to make the appropriate classification criteria. Also we assign different mark colors for different categories

> summary(dat_attraction$checkin_count) Min. 1st Qu. Median Mean 3rd Qu. Max. 1.0 27.5 180.5 10030.0 1146.0 1043000.0 > summary(dat_food$checkin_count) Min. 1st Qu. Median Mean 3rd Qu. Max. 1.0 279.5 1986.0 5393.0 6701.0 86880.0 > summary(dat_retail$checkin_count) Min. 1st Qu. Median Mean 3rd Qu. Max. 1.00 12.25 55.50 1926.00 212.80 152600.00 > summary(dat_hotel$checkin_count) Min. 1st Qu. Median Mean 3rd Qu. Max. 2.0 765.2 2952.0 10250.0 9587.0 93580.0

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

4. Data

4. Data 4.4 Data Visualization - Results We can also overlap different categories of places to here to see a mixture of uses in several places and make interesting decisions of travel places chosen like going to the attraction where there are some popular food or popular retail.

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

5. Route Optimizaiton

Starting Point Ending Point Go-through Point

5. Route Optimization (to be continued) For route optimization, we will have a starting point, an ending point and several points to pass through. The exact algorithm for routh optimization would take a long time (wikipedia); the Heuristic and approximation algorithms are faster, but are approximation; ArcGIS network Analyst has the tool to create a route network layer, but we have to provide an analysis network which is created from a given street network file first. I will use google map API - Waypoints in directions, but the go-through points are limited to 7 points.

(Reference sample: Google Map API, at most 9 points Waypoints in directions https://developers.google.com/maps/ documentation/javascript/examples/directions-waypoints â&#x20AC;&#x153; optimizeWaypoints: true;â&#x20AC;?)

Yingjia Xu | Advanced Topics in GIS Spring 2015

An Interactive, Multi-user Approach to Travel Mapping

6. Appendix

6. Appendix (Part of the Script) !DOCTYPE html> <html lang=”en”> <script type=”text/javascript”>

// <![CDATA[

// #### Yingjia Xu

var map;

var markersArray = [];

var searchUrl;

var markers = [];

var AddressMarker;

var checkedValue =[];

function initialize() {

AddressMarker = new google.maps.Marker();

var latlng = new google.maps.LatLng(37.78, -122.42); var mapOptions = { zoom:9, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};

map = new google.maps.Map(document.getElementById(‘map’), mapOptions);

geocoder = new google.maps.Geocoder();

markers = new google.maps.Marker();

document.body.onkeypress = function(e){// a listener for the ‘enter’ key if((e||event).keyCode==13){ searchAddress();

//do something here... }

}// end function(e)

}// end func

function searchAddress(){ clearMarkers();

var address = document.getElementById(‘addressInput’).value;

geocoder.geocode({‘address’:address}, searchCallBack); }

//show the categories chosen

function show(){ checkedValue = []; if (document.getElementById(‘chk1’).checked){

alert(‘Hi’);// change it to present the icons checkedValue.push(document.getElementById(‘chk1’).value); } if (document.getElementById(‘chk2’).checked){ alert(‘Hi’);//present the icons checkedValue.push(document.getElementById(‘chk2’).value); } if (document.getElementById(‘chk3’).checked){ checkedValue.push(document.getElementById(‘chk3’).value); } if (document.getElementById(‘chk4’).checked){ checkedValue.push(document.getElementById(‘chk4’).value); } searchAddress(); }

//clear the markers

Yingjia Xu | Advanced Topics in GIS Spring 2015