GIS3

1. Download java เข้า google พิมพ์ Download jre7 เลือกลิ้งค์ 2
ดังรูป เลือกตาม OS ของเรา ดูว่ากี่Bit และ download

2. เข้า google พิมพ์ Download tomcat 7 เลือกลิ้งค์ 1

3. จะขึ้นดังรูป กดเลือกตามภาพ

4. กด Next
คลิก I Agree

5. คลิก ถูก วงสีแดง แล้วกด Next
ใส่ User Name :adminและ Password:tomcat แล้วกด Next

6. เลือกที่เก็บ แล้วกด Next คลิก Install
รอโหลด

7. คลิก Finish

8. เข้า google พิมพ์ Download postgresql เลือกลิ้งค์ 1
กด คลิก Windows ตามภาพ

9. คลิก Download
เลือกตาม OS ของเครื่อง

10. กด Next

11. กด Next
ใส่ Password : Postgis

12. กด Next
เลือกตามภาพ และกด Next

13. รอโหลด
กด Finish

14. เลือกตามภาพ และกด Next
เลือกตามภาพ ให้ดูที่ Bit แล้วกด Next

15. หาที่เก็บ แล้วกด Next
รอโหลด

16. เข้า google พิมพ์ Download postgis เลือก ลิ้งค์ 1
ขึ้นตามรูป แล้วเลือกตามรูป

17. เลือก pg94
คลิกตามรูป (ให้เลือกตาม Bit)

18. กด I Agree

19. เลือก Create spatial database แล้วกด Next
คลิก Next

20. ใส่ User Name :Postgresและ Password:postgis แล้วกด Next
กด Install

21. รอโหลด
เข้า google พิมพ์ Download geoserver เลือกลิ้งค์ 2

22. ขึ้นดังภาพ คลิก Nighty ดังภาพ
คลิกตามภาพ

23. เมื่อโหลดเสร็จ ไปวางไว้ใน Webapps ตามภาพ

24. เข้า google พิมพ์ EditPlus 3 เลือกลิ้งค์ 2
จะขึ้นดังภาพ เลือกตามภาพ

25. กด Run

26. กด Accept
เปิดโปรแกรม จะขึ้นดังภาพ

27. สร้าง Folder ที่จะจัดเก็บงาน
Copy file ที่ใช้ในการเรียน จากกลุ่ม GIS3 ที่ใช้เรียน

28. เปิด Tomcat ขึ้นมา แล้วไปที่ Java แล้วพิมพ์ –DGEOSERVER_DATA_DIR=D: GIS3 ส่วนนี้คือที่ เก็บ file งาน แล้ว
กด apply
มาที่ General แล้ว กด star ถ้า star อยู่แล้ว ให้กด stop แล้ว กด star ใหม่ อีกครั้ง

29. เข้า เว็บเบราว์เซอร์ พิมพ์ http://localhost:8080/geoserver จะเข้าหน้า Geoserver แล้วใส่Username ว่า admin
และ Password ว่า geoserver แล้ว คลิก Login
จะขึ้นดังภาพ

30. คลิกที่ Layer Preview จะยังไม่ขึ ้้นข้อมูล เพราะยังไม่ได้ใส่ ต้องใส่ข้อมูลก่อนถึงขึ ้้น
เปิดโปรแกรม Postgres ขึ้นมา ใส่รหัส postgis แล้ว ok

32. ให้คลิก Server ของเรา แล้วใส่รหัส
จะปรากฎหน้าต่างให้เราให้เราชื่อ database ตรงช่อง Name แล้วกด OK

33. จะได้ Databaseของเรา
คลิกที่รูปแว่นขยาย SQL เพื่อจะเพิ่ม Extensionของpostgis

34. ให้พิมพ์CREATE EXTENSION POSTGIS แล้วก็กดเครื่อง หมาย play จะได้ postgis เพิ่มมาอีกหนึ่งเครื่องมือ

35. คลิกที่รูปจิ๊กซอ Execute the last used plugin>>>postGIS shapefile and DBF loader 2.1

36. จะขึ้นหน้าต่างดังภาพแล้วคลิก Add File ไปที่เก็บงาน เลือกไฟล์งานแล้วกด Open
คลิกที่ Option

37. เปลี่ยนตรงช่องให้พิมพ์ TIS-620 แล้วกด OK
กดImport แล้วกด ออก

38. คลิ๊กที่เครื่องหมายบวกหน้า Database >>Schemaspublic

39. คลิ๊กขวา Refesh ที่ Table จะปรากฎ ข้อมูลที่เรา Import เข้ามา
ไปที่ web browser เพื่อจะเช็คการท างานของ Tomcat พิมพ์ว่า locolhost:8080

40. แล้วพิมพ์ locolhost:8080/geoserver เพื่อเข้า Geoserver > เข้าระบบโดย ใส่ username เป็น admin และใส่ รหัส
เป็น geoserver จากนั้นกด login
คลิก server status เปลี่ยน Data directory เป็ น D:GIS3

41. กดที่ Workspaces > กด Add new workspaces
ตั้งชื่อ workspaces ว่า InternetGIS3 > ตั้งชื่อ Namespaces URI ว่า Gi > คลิก Default Workspaces > Submit

42. เมื่อสร้างเสร็จจะปรากฏชื่อ workspaces ที่เราสร้าง
เมื่อสร้าง workspaces เสร็จ ต่อไปต้องสร้าง Stores ต่อ > กดที่ Stores > Add new Stores

43. คลิกที่ PostGIS
ช่อง Data Source Name* ตั้งชื่อว่า BUU Data > ช่อง Description ใส่คาว่า DataBase of Burapha University
ในช่อง Database ที่เราตั้งใน Postgres ว่า 56170059_3 > ช่อง Username ใส่ว่า postgres ในช่อง Passwd ใส่รหัส
เป็น postgis > กด save

45. ในช่อง Abstract ใส่คาอธิบายว่า ขอบเขตของมหาวิทยาลัยบูรพา วิทยาเขตบางแสน > ในช่อง New Keyword ใส่คาว่า
ขอบเขต > เลือก Thai > Add Keyword
ช่อง Coordinate Reference Systems > คลิก Find

46. พิมพ์ 32647 เมื่อเจอแล้วกดเลือก

47. คลิก Compute from native bounds แล้วจะปรากฏค่าพิกัดขึ้น > save
จะปรากฏชั้นข้อมูล boundary

48. คลิกที่ Layer Preview > คลิกที่ OpenLayers ในชั้นข้อมูล boundary
ได้ ข้อมูล boundary ขึ้นมา

49. ไปคลิกที่ Layers > คลิก Add a new resource (ทาเหมือนเดิมแต่เปลี่ยนข้อมูล)
เลือกเป็น InternetGIS3:BUU DATA

50. เลือก Publish ในช่อง building
ในช่อง Abstract ใส่คาอธิบายว่า อาคารในมหาวิทยาลัยบูรพา วิทยาเขตบางแสน > ในช่อง New Keyword ใส่คาว่า
บูรพา > เลือก Thai > ในช่อง Vocabulary ใส่คาว่า Burapha > Add Keyword

51. ไปที่ส่วน Coordinate Reference Systems > Find
พิมพ์ 32647 เมื่อเจอแล้วกดเลือก

52. คลิก Compute from native bounds แล้วจะปรากฏค่าพิกัดขึ้น > save
จะขึ้นชั้นข้อมูล building

53. คลิกที่ Layer Preview > คลิกที่ OpenLayers ในชั้นข้อมูล building
จะปรากฏข้อมูล building ขึ้น

54. เปิดโปรแกรม QGIS
กด Add PostGIS Layers (ช้างที่มีบวก)

55. กด ใหม่
ตั้งชื่อเป็น group03 > Host ตั้งเป็น localhost > ตั้งชื่อ Database ว่า 56170059 > ช่อง username ตั้ง เป็น
postgres > ช่อง password ตั้งเป็น postgis > กด save username และ password > ใส่เสร็จกด Test connect >
กด OK 2 ครั้ง

56. กด เชื่อมต่อ

57. กดบวก public > เลือกข้อมูล > คลิก เพิ่ม
พิมพ์ 32647 เลือกพิกัด WGS 84 / UTM zone 47N > OK (ทา 2 ครั้งเพราะเราเลือก 2 ข้อมูล)

58. ได้ดังรูป
ดับเบิ้ลคลิกชั้นข้อมูล building

59. ไปที่ Style > เปลี่ยนจาก Single Symbol เป็น Categorized > colum เลือก name > Classify > Apply
ไปที่ Style มุมล่างซ้าย > Save Style > SLD File

60. ตั้งชื่อว่า building > Save > OK
ไปที่เว็ป Geoserver > ไปที่ Styles > คลิก Add new Style

61. คลิกเลือกไฟล์
เลือก building.sld > Open

62. กด upload (โค้ดจะปรากฏขึ ้้น) > คลิก Preview legend > คลิก Submit
ไปที่ Layers > คลิก building

63. กด Publishing ช่อง Default Style เปลี่ยนจาก Polygon เป็น building > ช่อง Available Styles เลือก building
ย้ายไปช่อง Selected Styles > save
คลิก Layer Preview > คลิก OpenLayers ในช่อง building

64. จะปรากฏข้อมูลขึ้น
เปิดโปรแกรม QGIS ขึ้นมา

65. ไปที่ Add PostGIS Layers (ช้าง)
จะปรากฏหน้าต่าง Add PostGIS Table(s) > เลือกเป็น group3 > กด connect >> กด+หน้า public > เลือกข้อมูล
bouandary และ building > Add

66. ใส่พิกัด พิมพ์ 32647 ข้อมูลเลือก WGS 84 / UTM zone 47N > OK (ทาซ้า 2 ครั้งเพราะเรามี 2 ข้อมูล)
เลื่อน bouandary มาไว้ด้านล่าง building

67. ไปคลิกคาสั่ง New Shapefile Layer
จะปรากฏหน้าต่าง New Vector Layer > เลือก Point > File encoding เลือกเป็น TIS-620 > Selected CRS เลือก
เป็น EPGS:36247,WGS 84 / UTM zone 47N > ช่อง Name ตั้งชื่อว่า Name > กด Add attribute to list > OK

68. เลือกที่ save > Disk D > ไปที่ floder ชื่อ GIS3 > ไปที่ floder ชื่อ BUU_LAYER > ตั้งชื่อว่า ATM_3 > save
ไปที่เครื่องมือ Toggle Edting

69. ไปที่เครื่องมือ Add Feature
ให้ไปจุดตรงที่มี ATM ใส่เลขลาดับของจุด > ตั้งชื่อ > OK > จุด ATM จนครบทุกตู้ในแผนที่

70. เมื่อจุดครบแล้วไปกดที่เครื่องมือ Toggle Edting > save
ดับเบิ้ลคลิกที่ ATM_3 > จะปรากฏหน้าต่าง Layer Properties ขึ้น ไปที่ Style (มุมล่างซ้าย) > Save Style > SLD File
ตังชื่อว่า ATM_3 และ save ใน folder ชื่อ GIS3_58

71. save ใน folder ชื่อ GIS3_58 ตั้งชื่อว่า ATM_3 > save > OK
เข้า Geoserver โดยไปที่ web browser พิมพ์ว่า locolhost:8080/geoserver

72. เปิด Tab ใหม่ขึ้นมา 1 อัน แล้วพิมพ์คาว่า www.iconfinder.com > ค้นหาคาว่า ATM
ปรับขนาดของ icon เป็น 16

73. เลือกไฟล์icon อันไหนก็ไดที่มีคาว่า PNG > คลิกเข้าไปที่ icon > คลิกดาวน์โหลดตรงคา ว่า PNG
Copy ไฟล์ที่โหลดมาไปวาง > Disk D > GIS3 > วางในโฟล์เดอร์

74. แล้วเปลี่ยนชื่อเป็น atm3
จากนั้นเปิดโปรแกรม pgAdmin III เข้าไปที่ Database ของเรา > Schemas > คลิก+ตรงหน้า public > Tables

75. ไปที่เครื่องมือ Execute the last used plugin (รูปจิ๊กซอว์) > PostGIS Shapefile and DBF loader 2.1
จะปรากฏหน้าต่าง PostGIS Shapefile Import/Export Manager > Import > Add File

76. เลือกไฟล์ชื่อ ATM_3 > open
กด Options

77. เปลี่ยนจาก UTF-8 เป็น TIS-620 > OK
กด Import

78. เข้าไปที่เว็ป Geoserver > Styles
กด Add new styles กดเลือกไฟล์ > เลือก > ATM_3 > open

79. กด Upload จะขึ้นโค้ด > กด Preview Legend > ตัวอย่างจุดจะแสดงขึ้นมา
เข้า Facebook > เข้ากลุ่ม GIS3 > copy โค้ด ดังภาพ

80. เลือกบรรทัดที่ 11-22
Ctrl+v โค้ดใหม่ที่ copy มา แทนลงไป

81. เติมเลข 3 หลัง atm ในบรรทัด ที่ 13 กด Validate (การแก้ไขโค้ด) > Preview Legend > Sumid
ไปที่ Layers > กด Add new resource

82. เลือก InternetGIS3:BUU Data กด publish ของ ATM_3
ไปที่ส่วน Coordinate Reference Systems > Find พิมพ์32647 เมื่อเจอแล้วกดเลือก

83. คลิก Compute from native bounds แล้วจะปรากฏค่าพิกัดขึ้น
กด Publishing

84. ไปที่ช่อง Default Style เลือกเป็น ATM_3 ช่อง Available Styles เลือก ATM_3 ย้ายไปช่อง Selected Styles >
save

85. ไปที่ Layer Preview กด OpenLayers ของ InternetGIS3: ATM_3
ข้อมูลจุด ATM จะปรากฏขึ้น
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 > คลิกขวา
สร้าง floder ของเรา ตั้งชื่อเป็นรหัสนิสิตตามด้วยกลุ่ม 56170059_3 > เข้า floder 56170173_3 > สร้าง floder ใหม่

86. ตั้งชื่อว่า WEB-INF (ในTomcat เราต้องสร้าง floder ชื่อ WEB-INF ไว้ใน floder ที่เรา ต้องการเผยแผ่)
เข้า EditPlus

87. คลิก NEW เลือก Normal Text หรือ Ctrl + N

88. พิมพ์โค้ด พร้อมใส่รหัสสี ดังรูป

89. กด File > save As saveใน floder ชื่อ 56170059_3 > ตั้งชื่อเป็นรหัสนิสิตตามด้วย.html > 56170059.html > ช่อง
Save as type เลือกเป็น HTML > กด save > กดปิดโปรแกรม EditPlus 3

90. ไปที่ web browser แล้วพิมพ์ว่า http://localhost:8080/GIS3/56170059_3/56170059.html> ข้อมูลจะปรากฏ
เปิด Tab ของ web browser ขึ้นมาใหม่ 1 อัน > แล้วพิมพ์ค้นหาคาว่า openlayers google maps v3 example

91. คลิกขวาที่พื้นที่ว่าง > เลือกดูรหัสต้นฉบับ
คลิก google-v3.js

92. เลือกทั้งหมด Ctrl + A และ Ctrl + C
เข้า EditPlus คลิก Ctrl+V วางข้อมูล และให้ลบตั้งแต่ บรรทัดที่ 33-39

93. เปลี่ยนเลข 5 เป็น 15 ในบรรทัดที่31 เพื่อให้แผนที่ซูมเข้าไปมากขึ้น ใส่พิกัดตรงชั้น 28 (100.925684 , 13.277333)
กด File > save > saveใน floder ชื่อ 56170059 > ตั้งชื่อ > googlemap3 > ในช่อง Save as type เลือก เป็น .js >
กด save > กดปิดโปรแกรม EditPlus3

94. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170059_3 > คลิกขวาที่ไฟล์56170059.html > EditPlus3

95. ให้ลบข้อมูลออก ลบ HELLO WOLD และโค้ดสี
ให้พิมพ์โค้ด บรรทัดที่ 4
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="googlemap_3.js"></script>

96. ให้พิมพ์ โค้ดเพิ่ม บรรทัดที่ 8 > Ctrl+S เพื่อ save
<BODY onload="init()">
<div id="map" class="smallmap"></div>
</BODY
คลิกเครื่องหมาย + ที่มุมบนขวาแล้วเลือกแบบแผนที่ ข้อมูลแผนที่จะปรากฏขึ้น

97. โหลดไฟล์ชื่อ proj4js.rar จาก facebook กลุ่ม GIS3 แตกไฟล์ proj4js.rar
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > วางโฟล์เดอร์
proj4js เข้าโฟล์เดอร์ proj4js > lib > defs > ใช้EPSG0900913.js

98. Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 > 56170059_3
> คลิกขวาที่ไฟล์ 56170059_3.html > EditPlus3
คลิกขวาที่ไฟล์ googlemap3.js > EditPlus3

99. ไปที่กลุ่ม GIS3 > Copy โค้ด
กลับไปที่ EditPlus 3 > กด Enter หลัง วางโค้ดที่ copy มาในบรรทัดที่ 6

100. ลบโค้ดที่ไม่จาเป็นออก ในบรรทัดที่15
กด Ctrl+s เพื่อ save

101. ไปที่โค้ดของ googlemap3 .js
ให้พิมพ์โค้ด บรรทัดที่ 2-14 ดังภาพ
//Extent Bound
var minx = -20037508.34;
var miny = -20037508.34;
var maxx = 20037508.34;
var maxy = 20037508.34;
var prj32647 = new OpenLayers.Projection("EPSG:32647");
var prjGoogle = new OpenLayers.Projection("EPSG:900913");
var prj4326 = new OpenLayers.Projection("EPSG:4326");
var bounds = new OpenLayers.Bounds(minx,miny,maxx,maxy);
bounds.transform(prj32647, prjGoogle);
var option = {maxExtent:bounds, maxResolution:'auto', units:'m',
projection: prjGoogle,displayProjection:prj4326};
map = new OpenLayers.Map('map', option );

102. ให้เลือก บรรทัดที่ 2-14 แล้ว คลิกขวา เลือก Cut หรือ Ctrl+X
จากนั้นให้ลบโค้ดในบรรทัดที่ 4 ทิ้ง

103. แล้วกด Ctrl+v เพื่อวางข้อมูล > Ctrl+s เพื่อ save
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170059_3 > เลือก 56170059.html คลิกขวา เลือก EditPlus3

104. เลือก googlemap3.js คลิกขวา เลือก Editplus
เปิดไฟล์HTML.docx > Copy ทั้งหมด

105. วางข้อมูลที่เรา copy มาวางไว้.HTML แล้วไปแก้ ให้ ชื่อที่จัดเก็บตรงกัน googlemap3.JS ดังภาพ
COPY ข้อมูลมา จากfacebook กลุ่ม GIS3

106. ลบข้อมูลเดิม แล้ว วางข้อมูล ที่ copy มาวางไว้ ใน นามสกุล .Js ไปบรรทัดที่ 38 ลบ url เดิมทิ้ง
เลือก InternetGIS3:boundary >boundary>OpenLayers

107. จะปรากฏข้อมูลขึ้น จากนั้น Copy locolhost:8080/geoserver/ InternetGIS3/wms
กลับไปที่ EditPlus 3 > ลบ url เดิม > แล้ววาง url ที่เรา copy มา จะได้ดังภาพ

108. ไปที่ geoserver > Layer Preview คลิก OpenLayers ในช่อง InternetGIS3: building

109. จากนั้น Copy locolhost:8080/geoserver/ InternetGIS3/wms
กลับไปที่ EditPlus 3 > ลบ url เดิมในบรรทัดที่ 46 แล้ววาง url ใหม่ที่เรา copy มา

110. Copy InternetGIS3: building ดังภาพ
ในบรรทัดที่ 48 เปลี่ยนจาก WORK: building เป็น InternetGIS3: building

111. ไป geoserver > Layer Previwe คลิก OpenLayer ของ InternetGIS3:atm_3
จะได้ดังรูป

112. ในบรรทัดที่ 53 เปลี่ยนจาก ตัวแปร Road เป็น ATM > เปลี่ยนจากถนนเป็นตู้ATM
ในบรรทัด 54 เปลี่ยนจาก url เดิมเป็น locolhost:8080/geoserver/ InternetGIS3/wms
ในบรรทดัที่ 56 เปลี่ยนจาก WORK: road เป็น InternetGIS3:ATM_3
ลบชั้นข้อมูลบรรทัดที่ 61-68 ในบรรทัดที่ 63 ลบตัวแปร road และ เปลี่ยนเป็น ATM > และลบตัวแปร water ออกไป

113. ไปที่ web browser พิมพ์locolhost:8080/GIS3/56170059_3/56170059.html > ข้อมูลจะ ปรากฏ ดังภาพ
ไปที่ web browser ค้นหาคา ว่า OpenLayers3 > เลือกลิงค์แรก

114. แล้วให้คลิกที่ 2.x page
ให้คลิกDownload ที่ Zip

115. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170059_3 >สร้างโฟล์เดอร์ขึ้นว่า ตั้งว่า Libs แล้วเอาโฟล์เดอร์ OpenLayers 2.13.1 มาวางไว้

116. ค้นหา geoext2 เลือก ลิงค์แรก
คลิก GeoExt 2.1.0

117. คลิกที่ Source code (zip) เพื่อ Download
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170059_3 > Libs แล้วเอาโฟล์เดอร์ GeoExt2 -2.1.0 มาวางไว

118. มาที่หน้าเว็ป GeoExt2 เลื่อนลงมาที่ส่วน Exemples > คลิกเลือก LayerTree
จะปรากฏรูปแบบตัวอย่างหน้าเว็ปของ LayerTree ขึ้น > คลิกขวาในพื้นที่สีขาว > เลือกดูรหัสต้นฉบับ

119. จะปรากฏโค้ดไฟล์HTML ขึ้น
คัดลอกโค้ดไฟล์HTML ทั้งหมด

120. เข้า EditPlus แล้ว กด Ctrl+N แล้ววางข้อมูล Ctrl+V
กลับไปที่ EditPlus 3 แล้วแก้ไขโค้ดในบรรทัดที่ 18 ตามภาพ (เปลี่ยนเป็น <script src="Libs/OpenLayers-
2.13.1/OpenLayers.js"></script>)

121. กลับไปที่ web browser เปิด tab โค้ดไฟล์HTML > คลิก ../loader.js ในบรรทัดที่ 20
Copy ทั้งหมด

122. ไปที่ EditPlus 3 > กด Ctrl+V วางข้อมูล

123. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170059_3 > Lips > geoext2-2.0.3 > โฟล์เดอร์ src > GeoExt > Copy Lips geoext2-2.0.3src GeoExt ดัง
ภาพ
กลับไปที่ EditPlus 3 > แก้ไขโค้ด วางโค้ดใหม่ในบรรทัดที่ 5 ตามภาพ (เปลี่ยนจาก เป็น /)

124. กด Ctrl+s > เลือก save ที่ Disk C > โฟล์เดอร์ GIS3 > โฟล์เดอร์ชื่อ backup3 > เข้าไปในโฟล์เดอร์ backup3 > ตั้งชื่อ
ว่าloader > เปลี่ยน save as type เป็น Java Script > Save > Yes
ไปที่ EditPlus 3 > บรรทัดที่ 22 ให้ลบ ../ หน้า loader ออก ดังภาพ

125. กลับไปที่ web browser ของ geoext2 > คลิก tree.js ด้านขวามือ
COPY โค้ดทั้งหมด

126. กลับไปที่ EditPlus 3 > กด Ctrl+v วางโค้ด กด Ctrl+s > เลือก save ที่ Disk D > โฟล์ดอร์ GIS3 > โฟล์เดอร์ชื่อ
backup3 > เข้าไปในโฟล์เดอร์ backup3 > ตั้งชื่อว่า tree > เปลี่ยน save as type เป็น Java Script > Save > Yes >
กลับไปที่ EditPlus 3 > เปิดโค้ดไฟล์ HTML (อันแรก) > ลบโค้ดบรรทัดที่ 26 ถึง 36

127. กด Save > เลือก save ที่ Disk D > โฟล์เดอร์ GIS3 > โฟล์เดอร์ชื่อ backup3 > เข้าไปในโฟล์เดอร์ backup3 > ตั้งชื่อว่า
Mymap > เปลี่ยน save as type เป็น HTML > Save
ไปที่ Disk D > โฟล์เดอร์ GIS3 > โฟล์เดอร์ชื่อ backup3 > Copyไฟล์ Mymap , tree , loader

128. ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170059_3 > เลือก Paste หรือ Ctrl+V วางข้อมูล
ไปที่ Disk C > Progarm files > Apache Software Fouandation > Tomcat 7.0 > webapps > GIS3 >
56170059_3 > คลิกขวาที่ไฟล์tree.js > คลิก EditPlus 3

129. แก้โค้ดบรรทัดที่ 34 เปลี่ยนจาก 14, 37.5 เป็น 100.925684, 13.277333 > ในบรรทัดที่ 35 เปลี่ยนจาก 7 เป็น 15
ลบโค้ดตั้งแต่บรรทัดที่ 37-45

130. ลบโค้ดบรรทัดที่ 48-68
แก้ไขโค้ดในบรรทัดที่ 49 เป็น ขอบเขต ม.บูรพา > ในบรรทัดที่ 50 copy localhost ของข้อมูลเรามาวาง > ในบรรทัดที่
51 แก้เป็น InternetGIS3:boundary

131. แก้ไขโค้ดในบรรทัดที่ 59 เป็น อาคาร ม.บูรพา > ในบรรทัดที่ 60 copy localhost จากบรรทัด 50 มาวาง > ในบรรทัด ที่
62 แก้เป็น InternetGIS3:building
ไฮไลท์โค้ดบรรทัดที่ 59-70 > copy

132. ไปที่บรรทัดที่ 71 > วางโค้ด แก้ไขโค้ดในบรรทัดที่ 71 จาก อาคาร ม.บูรพา เป็น ถนน > ในบรรทัดที่ 72 copy localhost
มาวาง ในบรรทัดที่ 74 แก้ เป็น InternetGIS3:road
ไฮไลท์โด้ดบรรทัดที่ 71-82 > copy

133. ไปที่บรรทัดที่ 83 > วางโค้ด แก้ไขโค้ดในบรรทัดที่ 83 จาก ถนน เป็น แหล่งน้าา > ในบรรทัดที่ 84 copy localhost มา
วาง ในบรรทัดที่ 86 แก้เป็น InternetGIS3:water
บรรทัดที่ 97แก้โค้ดจาก Tasmania เป็น BUU > บรรทัดที่ 98 copy localhost จากบรรทัด 4 มาวาง > บรรทัดที่ 100
แก้เป็น InternetGIS3:boundary > บรรทัดที่ 101 แก้เป็น InternetGIS3:building > บรรทัดที่ 102 แก้เป็น
InternetGIS3:road > บรรทัดที่ 103 แก้เป็น InternetGIS3:water

134. จะปรากฏผลลัพธ์ ดังนี้
เปิดโปรแกรม QGIS ขึ้นมา

135. เลือก Plugins > Manage and Install Plugins

136. พิมพ์ Qgis cloud ทาการติดตั้ง QGIS Cloud Plugin (ขึ้นว่า Reinstall plugin แสดงว่า ติดตั้งแล้ว) เสร็จแล้ว Close
พิมพ์ Open layers ทาการติดตั้ง Open Layers Plugin (ขึ้นว่า Reinstall plugin แสดงว่า ติดตั้งแล้ว) เสร็จแล้ว Close

137. ไปที่ Add Vector Layer
Encoding เลือก System คลิก แสดง

138. ไปที่ Disk D > GIS3_58 > BUU_LAYER > เลือกข้อมูลที่นามสกุล .shp ของ Road Water Building และ Bourdary
> open
กด open

139. ข้อมูลที่เปิดมาได้ภาพดังนี้
เปลี่ยนสี water เลือกแบบไม่มีเส้นขอบ

140. ดับเบิ้ลคลิก building เปลี่ยน Single Symbol เป็น Categorized , ตรงช่อง Column ให้เลือก Name แล้ว คลิก
Classify > OK

141. ดับเบิ้ลคลิก Road เปลี่ยนสี
คลิก Cloud Settings

142. ให้สมัคร ใส่ข้อมูล แล้วคลิก Siqn up

143. กลับไปโปรแกรม QGIS > กด login ปรากฏหน้าต่าง login ใส่ Username และ Password > OK

144. กด Create
ไปที่ Upload Data กด Refresh layers

145. กด Publish Map เพื่อให้ข้อมูลออนไลน์
จะปรากฏผลลัพธ์ข้อมูลขึ้น