Installation guide

ManualsBrandsEclipse ManualsComputer equipmentMobile Mousw

Tutorial for Course of Web and Mobile GIS

Autumn 2012

Rui Zhu

School of Architecture and the Built Environment

Royal Institute of Technology-KTH

Stockholm, Sweden

September 2012

Lab 1

Design a Dynamic Map

Page 2

Lab 2

Create Web Maps with Google Mapping Tools

Page 9

Lab 3 & 4

Open Source Solution: OpenLayers + GeoServer + PostGIS

Page 11

Lab 5

ArcGIS Server

Page 17

Lab 6

ESRI Mobile Solutions

Page 21

Lab 7

Locate Your Current Position with Android Built-in GPS

Page 25

Lab 8

Combination of a Dynamic Website and an Android app

Page 32

Help File

Web and Mobile GIS Developing Environment Solution

Page 44

Summary of content (59 pages)

PAGE 1
Tutorial for Course of Web and Mobile GIS Autumn 2012 Rui Zhu School of Architecture and the Built Environment Royal Institute of Technology-KTH Stockholm, Sweden September 2012 Lab 1 Lab 2 Lab 3 & 4 Lab 5 Lab 6 Lab 7 Lab 8 Help File Design a Dynamic Map Create Web Maps with Google Mapping Tools Open Source Solution: OpenLayers + GeoServer + PostGIS ArcGIS Server ESRI Mobile Solutions Locate Your Current Position with Android Built-in GPS Combination of a Dynamic Website and an Android app Web and Mobile
PAGE 2
AG2417 Web and Mobile GIS Autumn 2012 Rui Zhu and Gyözö Gidófalvi Lab 1: Design a Dynamic Map Due Sep 7 1. Task The aim of this lab is to gain basic concept of web map, and get basic skills of building maps based on ArcGIS API. The lab assumes that you are a new beginner with no knowledge of HTML and CSS. After a short study of some tutorials, following a simple example you will create an image based static map in Eclipse with HTML and CSS.
PAGE 3
Now create a root folder of images under WebContent, copy kth.png and kth_rgb.jpg into images, and refresh the project. Then write the following lines of html between the and tags.

Kungliga Tekniska Högskolan – KTH
PAGE 4
As a last step, to edit the appearance of text, write the following code into the style.css file and change the only
element to
in the index.html to link the CSS selector #layout{…} in the style.css file. In CSS, selectors are patterns used to select the element(s) you want to style (http://www.w3schools.com/cssref/css_selectors.asp).
PAGE 5
//Add the world street map layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/ services/World_Street_Map/MapServer"); map.addLayer(basemap); dojo.connect(map, 'onLoad', function(theMap) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); } dojo.
PAGE 6
through standard map navigation controls. Another simple way to make a static map more interactive is by linking information to different areas of the map image. This can be done manually, but that is very time consuming and difficult. Alternatively, one can use a freeware program, e.g., Handy Image Mapper (Install the setup of Heady Image Mapper.exe on computer, which is in the Lab 1 folder.) which provided a convenient user interface for this task.
PAGE 7
Do similar thing to at least 4 other interesting buildings. These buildings will be linked to the website of a school occupying the buildings. For instance, L-building can be link to ABE school. You must go to www.kth.se to find the information of schools and buildings. Once you are finished entering the links, you can generate the HTML code by clicking Place on Clipboard. Then, just simply paste the generated HTML code into your HTML file. Have a look at the generated code.
PAGE 8
PAGE 9
AG2417 Web and Mobile GIS Autumn 2012 Rui Zhu and Gyözö Gidófalvi Lab 2: Create Web Maps with Google Mapping Tools Due Sep 11 4. Task The task of this lab is to create web maps using the Google mapping tools. This lab is divided to two parts. In each part you need to go through the tutorial that is given in each section and do the task. The tools, which you are going to use here, are Google map and Google earth. 5. Create Web Maps 5.1. Creating Your Own Google Account.
PAGE 10
c. Path: Add a path in the map. 6.2. Google Maps JavaScript API V3. There are three Google official web pages that you can reference as tutorials. 1. https://developers.google.com/maps/articles/ 2. https://developers.google.com/maps/documentation/javascript/ 3. https://developers.google.com/maps/documentation/javascript/services#Directions a. Hello World. Create a Google map around Stockholm area and set the zoom level to 12 according to http://code.google.com/apis/maps/documentation/v3/introduction.html.
PAGE 11
AG2417 Web and Mobile GIS Autumn 2012 Rui Zhu and Gyözö Gidófalvi Lab 3&4: Open Source Solution: OpenLayers + GeoServer + PostGIS Due Sep 18 8. Task In this exercise you will learn some of the most popular open source (server-side and client-side) web mapping technologies. The series solution of OpenLayers + GeoServer + PostGIS will give you a great start to build sophisticated WebGIS applications.
PAGE 12
and moving). Throughout the exercise you will make modifications to your VM, i.e., you will configure settings and services, and in your project you will potentially install new software on it. As your modifications are saved in the files that are associated with the VM, to make your modifications persistent, it is important that you always work on the same VM.
PAGE 13
Figure 2. Name and Namespace URI of a New Workspace 10.3. Create a New Store Click Stores (in the Data set), then click Add new Stores. You will see Vector Data Sources and Raster Data Sources, respectively. Specifically, we use Shapefile and PostGIS as vector data sources quite often. In this lab, we choose PostGIS as data source (you can get familiar with the PostGIS environment), fill in inputs as it is shown in Table 2, and accept other default values. Table 2.
PAGE 14
11. GeoServer with OpenLayers “OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference -- OpenLayers is Free Software, developed for and by the Open Source software community.” (Reference: http://openlayers.org/)  1. 2.  1.
PAGE 15
to the map: // Initialize WMS layer from our local GeoServer buildings = new OpenLayers.Layer.WMS( "Medford Buildings", "/geoserver/wms", { layers: 'medford:buildings', 'format':'image/png'}, {'reproject': true}); // Add WMS layer to our map map.addLayers([buildings]); NOW, IT IS YOUR TAKS! Task Description 1 Add tax lots, streets, and zoning layers to your map. Add your code as well as screen shots in your report. 2 Add Controls such as mouse position, layer switcher and scales to the map.
PAGE 16
Figure 3. Structure of PostgreSQL 9.0 Tips: You may use Quantum GIS or shp2sql for importing shapefile into the database in the future. 13. Report Put some screenshots in every important step in your report, and give some corresponding explanations with codes. Submit your report not later than Sep 18 in Blida.
PAGE 17
AG2417 Web and Mobile GIS Autumn 2012 Rui Zhu and Gyözö Gidófalvi Lab 5: ArcGIS Server Due Sep 25 14. Guides and Help Virtual Machine for ArcGIS Server will be used in this lab. Use the username of DELETE ME and password of 123456 to login to the VM. Use ESRI documentation as a main source; remember Google is your friend; ask TA for help if nothing works. 15. Create a Static Map 15.1.
PAGE 18
16. Add More Functionality to Your Map Search ArcGIS server help for Geocoding and ArcGIS desktop help for Geocoding tutorial to learn about geocoding. Working with Atlanta or NorthDakota_CassCounty do the following: 16.1. Create a Map Document in ArcMap  Add cassroadss.shp and cassparcels.shp  Symbolize them as you like  Save the map document as yourname_parcelmap.mxd (Do not forget the relative path) 16.2.
PAGE 19
17. Geoprocessing service This lab section works with the data in folder Sweden. 17.1.
PAGE 20
 Save and close model  Save your map document as yournameSweden.mxd 4.3. Test the Model  Double-click on your tool in the ArcToolbox window and test it works properly 4.4. Add the Model as Tool Layer of the Map Document  Drag the model from ArcToolbox to the top of the table of contents  You will see swe_cnty_Clip.shp as the results of your test in previous step. Pick up the red color outline for this layer and then turn it off  Save your map document again 4.5.
PAGE 21
AG2417 Web and Mobile GIS Autumn 2012 Rui Zhu and Gyözö Gidófalvi Lab 6: ESRI Mobile Solutions Due Oct 2 20. Task In this lab you will learn some of the most popular ESRI mobile solutions. The first section introduces concept of ArcGIS application for mobiles, and installation steps of ArcGIS for Android. The second section illustrates how to display the map created by ArcGIS API for JavaScript in the Lab 1 based on Android browser. The third section focuses on ArcGIS Runtime SDK for Android.
PAGE 22
Do NOT download it from Amazon unless you have a payment address in USA, which is required in the last step for downloading (even though ArcGIS for mobile is free). While the optional method to download it from Amazon is given as follows.  In Amazon, you have to login to continue.  Getting Started with the Amazon Appstore https://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000626391 In the link, there is a detail description video and installation instructions that you can follow.
PAGE 23
If you come across the warning that Port 8080 is already in use, type services.msc in Run and click OK. Right click Apache Tomcat 7.0 to stop the service in the Services, as it is shown in the figures below. Then re-try this producer.  Now you will see the Stockholm map (ArcGIS API for JavaScript Map) in Eclipse. Copy the link http://localhost:8080/Lab1/Stockholm.html and try to display the map in the IE web browser. Have two screen shots for maps in Eclipse and in IE, respectively.
PAGE 24
 Type cmd in Run and hit Enter. Once the box opens type ipconfig /all and hit Enter. Write down your current IP Address that you see. We are going to use this IP address in the next step.  Now type http://192.168.178.140:8080/Lab1/Stockholm.html in the Android browser, and see the result. NOTE: change the sample IP address (in the red color) into your own current IP address. Also give a try in your real life Android mobile browser.
PAGE 25
AG2417 Web and Mobile GIS Autumn 2012 Rui Zhu and Gyözö Gidófalvi Lab 7: Locate Your Current Position with Android Built-in GPS Due Oct 4 22. Task Firstly we are going to display Google map and OpenStreetMap (OSM) in Android, respectively. Then based on the given OSM, we create our own Android app to enable built-in GPS and to locate our current positions on the map. The aim of this lab is to lead you have a further understanding of Android emulator, and the difference between Google map and OSM.
PAGE 26
 Folder of res stores all the resources which your application needs, like layout files, images, sounds and so on.  Put the mouse on Test.GoogleMap.test.test, right click to Other…, as it is shown in the figure below. Select Android – Android Activity – Next -> Next -> Next -> Finish. Now an empty project without any activity is created. 1.2.
PAGE 27
the content of the page to a .txt file for later usage. Link-1: http://code.google.com/android/maps-api-signup.html 1.3. Edit res/layout/activity_main.xml for the UI Designing  Delete the following code, since it is useless and will be covered by Google map. PAGE 28
mapView.setSatellite(false); //get map controller mapController = mapView.getController(); //set the initial zoom level mapController.setZoom(10); //move the location to Stockholm at the time when the map was loaded mapController.animateTo(point);  Change public class MainActivity extends Activity into public class MainActivity extends MapActivity.  Define three variables as follows in the public class MainActivity extends MapActivity.
PAGE 29
 Define three variables in the public class of MainActivity in the MainActivity.java. private MapController mapController; private MapView mapView; public GeoPoint point;  Consequently in the MainAcitivity.java, copy the following code exactly behind the code of setContentView(R.layout.activity_main). mapView = (MapView) this.findViewById(R.id.mapview); mapView.setTileSource(TileSourceFactory.MAPNIK); mapView.setBuiltInZoomControls(true); mapView.setMultiTouchControls(true); mapController = mapView.
PAGE 30
Section 3 – Locate Your Position with Built-in GPS  Use built-in Android GPS by copying the following code in the class of public void onCreate(Bundle savedInstanceState){…}. /* Use the LocationManager class to obtain GPS locations */ mlocManager = (LocationManager)getSystemService(Context.LOCATION_SERVICE); mlocManager.requestLocationUpdates(LocationManager.
PAGE 31
mapView.getProjection().toPixels(point, screenPoint); Bitmap bmp BitmapFactory.decodeResource(getResources(),R.drawable.dot); canvas.drawBitmap(bmp, screenPoint.x, screenPoint.y, paint); }  Debug the exiting two errors. Change as protected void onDraw(Canvas canvas, MapView arg1). Copy the given dot.png picture into the folder of res/drawable-ldpi and refresh the project.  Run the Android and use Emulator Control in DDMS to simulate changes of GPS locations.
PAGE 32
AG2417 Web and Mobile GIS Autumn 2012 Rui Zhu and Gyözö Gidófalvi Lab 8: Combination of a Dynamic Website and an Android app Due Oct 8 24.
PAGE 33
com.demo.mobile -> New -> Class, fill Location (JavaBeans) in the Name: field, click Finish. Modify Location.java as it is shown in Appendix-4. Right click com.demo.mobile -> New -> Class, fill ConnDB (Database Access) in the Name: field, click Finish. Modify Location.java as it is shown in Appendix-5. Now the basic architecture of JSP is ready. 1.3. Configure an Apache Tomcat Web Server We have to configure an Apache Tomcat web server to run the website.
PAGE 34
 This webpage represents OSM map, editable vectors, position dot, switch layers, and scale bar, all of which are created by OpenLayers in the . Study this part since it can be useful for your final project.  This webpage includes three interfaces of username, userlat, and userlon, as it is represented below. It is used for getting values from the database. <%=(String) session.getAttribute("username")%> <%=(String) session.getAttribute("userlat")%> <%=(String) session.
PAGE 35
Appendix-1 // MyLocationListner class MyLocationListener implements LocationListener { public void onLocationChanged(Location loc) { // TODO Auto-generated method stub Lon = loc.getLongitude(); Lat = loc.getLatitude(); point = new GeoPoint((int)(Lat*1e6), (int)(Lon*1e6)); mapView.getOverlays().add(myOverlay); mapController.animateTo(point); //send updated latitude and longitude to the server try { url = new URL(strUrl); HttpURLConnection urlConn = (HttpURLConnection) url.openConnection(); urlConn.
PAGE 36
{ // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); }//end of sending updated latitude and longitude to the server } } Appendix-2 public class MainActivity extends Activity { private MapController mapController; private MapView mapView; public GeoPoint point; double Lon = 0; double Lat = 0; String strUrl = "http://213.103.201.
PAGE 37
password = "123456"; /* Be intelligent, you will understand that the following two statements * are used for getting values of userName and passWord from two independent * text in the other activity (which can be used in the login page of the app). * */ //username = ZRTrafficActivity.userName.getText().toString(); //password = ZRTrafficActivity.passWord.getText().toString(); /* Use the LocationManager class to obtain GPS locations */ mlocManager = (LocationManager)getSystemService(Context.
PAGE 38
{ Location location = new Location(); location.getLocation(request, response); }//end of if location } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } } Appendix-4 package com.demo.mobile; import java.io.DataOutputStream; import java.io.IOException; import java.sql.
PAGE 39
DataOutputStream dos = new DataOutputStream(response.getOutputStream()); dos.writeUTF("Succeed"); try { connect = conndb.getConn(); Statement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_UPDATABLE); stmt.executeUpdate(updateSQL); } catch(Exception e) { e.printStackTrace(); } finally { ConnDB.releaseConnection(connect); } } } Appendix-5 package com.demo.mobile; import java.sql.Connection; import java.sql.DriverManager; import java.sql.
PAGE 40
public static void releaseConnection( Connection c) { if(c != null) { try { c.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } } Appendix-6 CREATE TABLE userinfor ( username character varying(20) NOT NULL, passwords character varying(20) NOT NULL, reportlat double precision, reportlon double precision ) INSERT INTO userinfor (username, passwords, reportlat, reportlon) VALUES ('groupx', 123456, 0, 0) Appendix-7 <%@ page language="java" import="java.util.
PAGE 41