Download - Google Maps as Web Mapping Service

8/6/2019 Google Maps as Web Mapping Service

1/15

PENELITIANDANA PPKM POLITEKNIK KAMPAR

TAHUN ANGGARAN 2010

Google Maps API as Web Mapping Service

To Develop a Web Mapping Application

Oleh :Fenty Kurnia Oktorina

PROGRAM STUDI TEKNIK INFORMATIKAPOLITEKNIK KAMPAR

2010


2/15

ABSTRACT

Indonesia is the largest crude palm oil producer in the world. Riau is one of theregions in Indonesia, which has enormous palm oil plantations. However, most of smallholders have planted the palm oil on inappropriate land, due to a lack of knowledgeabout the suitability of land for palm oil. As the result, CPO yields obtained in Riau arenot comparable to the size of plantation land. An understanding of soil characteristicsbefore expansion is required in order to acquire land suitability of palm oil. Therefore, aneffective method such as a web mapping application will assist to provide geographicalinformation about the land suitability of palm oil plantation.

The web mapping is created by using Google Maps to display an interactive mapin the Riau region. Since AJAX technology is used to build Google Maps, it also will beused in the development of this web application. As a result from this application, theinformation is presented in the form of layers consisting of numerous different colours,where each colour represents a particular range of value. Moreover, a legend is displayedto explain briefly a range of values of each colour. They can interact with the map byclicking on the map to get the information of land characteristic on particular area.


3/15

ii | P a g e F K @ 2 0 1 0

Contents

LEMBAR IDENTITAS DAN PENGESAHAN ...................................Error! Bookmark not defined.

ABSTRACT .............................................................................................................................. i 1. RESEARCH TITLE ............................................................................................................. 1

2. SUBJECT ......................................................................................................................... 1

3. INTRODUCTION .............................................................................................................. 1

a. Problem Background .................................................................................................. 1

b. Aim and Obejctives ..................................................................................................... 2

4. RESEARCH QUESTION ..................................................................................................... 2

5. LITERATURE RESEARCHS ................................................................................................. 2

a. Web Mapping Services ............................................................................................... 2

b. Web Mapping Application .......................................................................................... 3

c. Google Maps API ........................................................................................................ 3

6. PROJECT OUTCOMES ...................................................................................................... 4

7. REASEARCH METHOD ..................................................................................................... 4

8. PROJECT SCHEDULLE ...................................................................................................... 5

9. RESULT AND DISCUSSION ............................................................................................... 5

10. CONCLUSION ................................................................................................................ 11

11. REFERENCE ................................................................................................................... 12


4/15

1. RESEARCH TITLEGOOGLE MAPS API AS WEB MAPPING SERVICE

TO DEVELOP A WEB MAPPING APPLICATION

2. SUBJECTTEKNIK INFORMATIKA

3. INTRODUCTION

a. Problem Background

Riau has the suitable land for developing palm oil plantations, and palm oil thatplanted on the suitable land will obtain optimum yield. The increasing demand of globalpalm oil will affect the economy of smallholders in particular and Riau in general. Basedon these facts, the Riau government determined the palm oil as a major commodity inplantations (Syahza & Johan, 2008).

The final aim of developing palm oil plantations is to increase economic growth toearn foreign exchange resources. Foreign exchange will be used for economicdevelopment through the Riau development of both agriculture and investment in thesector of agriculture (Riau Government, 2010).

Unfortunately, the expansion of palm oil plantation by smallholders frequentlyoccurs by converting natural forest instead of using degraded lands, which are now widelyavailable due to lack of smallholders knowledge about soil characteristic, economicreason and lack of government control. This situation leads to environmental problem andlow productivity where Riau can only produce 35 million tons of CPO annually; it shouldbe able to be doubled if planted in the appropriate land (Indonesia Government, 2010).

Unfortunately, palm oil plantations in Indonesia are usually established afternatural forests are logged and then burned to clear the land for planting. In some cases,especially in Riau, fires run out of control, either accidentally or deliberately and it alsodestroy extensive areas beyond the plantation concession area. This situation makesIndonesia as one of the highest rates of tropical forest loss in the worlds and this rate isincreasing because of legal and illegal logging, plantation clearance, agricultural estatesand fires (WWF, 2002).

If this problem continues to occur, then the main goal of developing palm oilplantations will not be achieved. Thus, an effective system is required to solve thisproblem. This system should provide an appropriate method for management of plantations by assessing environmental suitability for extending palm oil plantation undergovernment control to decrease environmental problem. One system that proposed inthis project is Web Mapping for Land Suitability for Palm Oil Plantation. Mapping isdesirable to discover the area that has suitability of land that is assessed based on thepalm oil requirements such as rainfall, the depth of soil, drainage, coarse material, pH,nutrient retention, and other soil properties (ICALRD, 2009).

Recently, web mapping becomes a widely available technology with the overviewof easy-to-use mapping APIs (Application Program Interfaces) (Turton, 2007). According to


5/15

2 | P a g e F K @ 2 0 1 0

Tyler Mitchell (2005), web mapping provides a map that contains the particularinformation through a web page is one effective technique for a group of nontechnicalend users to access that information. However, this project intends to investigate how todevelop a web mapping using the Google Maps. Therefore, a simple web application willbe developed using Google Maps to present the information about land suitability for

Palm Oil plantation in Kampar Regency, Riau - Indonesia.

b. Aim and Obejctives

The aim of this project is to use Google Maps APIs to present the informationabout land suitability for Palm Oil plantation in Riau, Indonesia.

The objectives are as follows:

To investigate the features of Google Map APIs. To investigate the methods of using Google Map APIs in a web application.

4. RESEARCH QUESTIONResearch question for this project is:

a. What are the features of Google Maps API?b. How to develop a web application using Google Maps API.

5. LITERATURE RESEARCHS

a. Web Mapping Services

Recently, the developers are interested in using the mapping API (ApplicationProgramming Interface) on their website. Mapping APIs are provided by various WebMapping Services such as Google with Google Maps API, Microsoft with Bing Maps APIand Yahoo! with Yahoo! Maps API. According to Open GIS Consortium, a Web MapService (WMS) provides spatially map that has dynamic data from geographicinformation. International Standard describes a map is a digital image file for geographicinformation, that appropriate for display on a computer screen (Gunther, 2008).

A few years ago, Google Maps was the most popular Web Mapping Service.Nevertheless, with the development of the technology of each Web Mapping Service,Yahoo! Maps and Bing Maps are able to compete with Google Maps. In general, all thesethree mapping APIs provide ease of attaching the interactive map to a web site and it isfree to use. The three services are fast, simple, and very useful. Besides, they haveexcellent map detail and readability. Moreover, Maps API for Yahoo!, Google and Bingare easy to work with. They also have official documentation, although for most people,the Google Maps documentation is easier to understand (Adkins, 2009).

Each of them has advantages and disadvantages, but fundamentally they arealmost equal to each other. Therefore, it was hard to determine which one was the bestof the three Maps APIs. In the end, the developers were free to decide whichcharacteristics of the Maps APIs were more important and appropriate for the project.

According to Earthware website (undated), Google Maps is faster than YahooMaps and Bing Maps in sending or displaying data and images into any browser.


6/15

3 | P a g e F K @ 2 0 1 0

Moreover, Google Maps definitely has a larger user community with more articles,books and open source projects than Yahoo! and Bing. In addition, Google Mapsofficially are supported by lot of web browsers such as Internet Explorer 7+, Firefox2.0.0.8+, Safari 3+, Mozilla 1.7+, Opera 8.02+, Google Chrome 1+. Meanwhile, Yahoo!Maps is only officially supported by Firefox 2, Internet Explorer 6 or 7, Opera 9 or Safari 3

and Bing Map by IE6 +, Firefox 2 +, Safari 3 + (Wikipedia, 2010).

b. Web Mapping Application

According to Tyler Mitchell (2005), Web mapping is a map that consists of specific information through a web page. This technology has the overview of easy-to-use mapping APIs (Application Program Interface) (Turton, 2007).

However, the simplest online maps usually use static maps such as images in.jpeg or .tiff formats that user are not permitted to modify the maps. With theselimitations, end users of the web mapping are unable to customize the map to meettheir particular necessities. Besides, generating of the base map for web mapping is oneof the most tedious parts of building any web mapping application (Lenssen, 2008).

On the other hand, the web mapping using digital maps will allow end users notonly to explore but also to interact and manipulate particular geographic informationwith the map. Developing a web application that integrates with interactive maprequires the API provided by several Web Mapping Services (Carswell, 2009). Accordingto Michael P. Peterson (2008), API consists of several routines that can be called bydevelopers using JavaScript. Function of the API is to maintain a continuous connectionto the server for more immediate downloading of additional map information.

c. Google Maps API

The Google Maps, which displays high quality satellite images for most regions inthe world, is one of the Web Map Service that provides free API. The Google Maps APIallows developers embed Google Maps in their web pages with JavaScript. In the middleof 2009, the Google Maps API version 3 has been developed. Based on officialdocumentation from Google Maps, this version is designed not only has a higher speedfor rendering maps than previous versions, but also can be applied to mobile devices aswell as the implementation of desktop applications.

Basically, not lots of modifications were developed to version 3. According toGoogle Maps Documentation, this latest version will still use the features of version 2while working to keep the size of the JavaScript code and speed improvements.However, dissimilar in version 2, version 3 is no longer need an API key to access theGoogle Maps API and still without specific prerequisite software. Since version 3 is theonly one fixed version of the Google Maps JavaScript API can be used by developers,they are not required to pass a version parameter when requesting the JavaScript API.

According to Google Maps API Documentation (2010) the following map typesare available in the Google Maps API:

MapTypeId.ROADMAP displays the default road map view MapTypeId.SATELLITE displays Google Earth satellite images MapTypeId.HYBRID displays a mixture of normal and satellite views


7/15

4 | P a g e F K @ 2 0 1 0

MapTypeId.TERRAIN displays a physical map based on terrain information.

6. PROJECT OUTCOMESDevelopment of a web mapping application with Google maps API for land

conditions in Kampar Regency, Riau, Indonesia.

7. REASEARCH METHODThe research methodology provides a structured approach to manage the

investigation in this project. It ensures that the project is well-managed, consistent, andaccomplished within a specified period of time and conditions. The methodology used forinvestigation of this project is split into six common stages: initiating the problem, project

planning, requirement and design, implementation, testing and evaluation, and closed bymaking recommendations. The next sections discuss the common stages of the projectmethodology.

7.1. Initiating Stage

This project is started by identifying the problem which occurs in palm oilplantation. Riau province is selected for this investigation. This stage gives a generalexplanation of the expansion of palm oil plantations that will obtain optimum yield if itis planted on suitable land. The author proposes that a web application providesgeographical information about the land suitability of palm oil plantation. The scopesand objectives are also determined at this stage. By determining cleared scopes and

objectives, the project investigation and analysis can be carried out effectively andefficiently.

7.2. Planning Stage

The planning stage includes collecting data for land characteristics for palm oilplantation in Riau, Indonesia. Data was collected from the Agriculture Department atthe University of Riau. In addition, this stage was also performed when studying theliterature which was related to the chosen technique and the project plan. Since theproposed technique was to develop a web application based on maps, it was necessaryto review the Web Mapping Service, Web Server, and database technique.Furthermore, it should also be investigated as to what are the most appropriatetechniques to use and how to combine these techniques in order to solve the problemsconcerning the suitability of land for palm oil plantations.

After studying literatures related to the Web Mapping Application, the projectexecution was planned. This stage gives the guidance how to perform a step by stepprocedure based on the project scopes and objectives.

7.3. Requirement and Design Stage

At this stage, investigate the requirements of stakeholder is commenced.Requirement capture is done based on the problems that arise in the development of palm oil plantations in Riau. The requirement analyses include the requirement

definition, functional requirement, non-functional requirement and systemrequirement for developing web mapping.


8/15

5 | P a g e F K @ 2 0 1 0

Furthermore, System Design also will be described using use case in this stageincluding planning for user interface, data of structure and J2EE pattern.

7.4. Implementation Stage

At this stage, web mapping application is developed using Google Maps as a

Web Mapping Service. Several technologies such as using MySQL as a database, andTomcat as a Web Server and AJAX for the programming language will be combinedtogether to build this project. Moreover, J2EE design pattern will be applied at thisstage.

7.5. 3.6. Testing and Evaluation

After the developing of web mapping is completed, some smallholders in Riauwill be asked to test and give their opinion of this system. It is done with assistancefrom the Department of Agriculture. Then, the system will be improved based on theirfeedback to meet the requirements of the users.

7.6. 3.7. Closing Stage

The closing stage of this project is to draw conclusions from this project andrecommend any necessary suggestions that will make this research and future researchrelated to this project better. This stage is important in order to know whether theproject has achieved its goals and objectives.

The project is accomplished by writing it up into a report. At this point, theproject will be presented in front of the examiner.

8. PROJECT SCHEDULLE

9. RESULT AND DISCUSSION

This project was decided to develop an interactive and simple web mappingapplication. Therefore, Google Maps will embed onto the application. The projectprovides information about soil characteristics and suitability of land for palm oilplantations in Riau. This application is proposed for all people who require informationabout the suitability of land for palm oil plantations, especially for smallholders. Byaccessing this application, it is expected that they can find out where the suitable areafor palm oil plantation. Moreover, the user will know the soil conditions in Riau.

Google Maps API Version 3 is designed to be faster. It also provides a numberof utilities for manipulating maps and adding content to the map through a variety of

services, will create robust maps applications on website. This API V3 is a free service,available for any web site that is free to consumers.

URAIANBULAN PELAKSANAAN 2010

Sep Okt Nov DesLiterature ReviewData CollectionWeb Mapping ApplicationPlanningDevelompent Web MappingReport


9/15

6 | P a g e F K @ 2 0 1 0

Since AJAX technology is used to build Google Maps, it also will be used in thedevelopment of this web application. First of all, the application will display GoogleMaps when executed. The map will be centred on the coordinates of 0.27191,100.84899 which is the coordinates for Kampar. Incorporating a Google map into awebsite is easy, accomplished with just a few lines of code in html file, described incoding 1:

Coding 1:

Note that a sensor parameter in line 2 is set to a false value, which means thisapplication does not use a sensor. A sensor parameter indicates whether thisapplication uses a sensor to define the location of the user or not.

The next snippet specifies the placeholder for the map, and specifies itsdimensions. This line of code is able to be placed anywhere in the page of html,arranging it using tables or CSS as desired in coding 2:

Coding 2:

Next, the map option of Google Maps is arranged in file Ajax.js, illustrated incoding 3.

Coding 3:

Lines 8 and 9 in Coding 3 define an object called map, where the object is amap from Google Map. This map is placed on map_canvas and applies the optionsdefined in myOption variable.

In addition, the function showMap() in coding 3 must be run immediately afterthe web page finishes loading. This is done by adding an onload attribute in JavaScript,which is Ajax.js as captured in coding 4.

Coding 4:


10/15

7 | P a g e F K @ 2 0 1 0

Furthermore, a map of Kampar will be overlaid by a layer of colours that comesfrom multiple polygons where information on land suitability and soil conditions canonly be accessed on areas of this layer. The user can receive this information byselecting one option on the drop-down box that available on the application. Thisevent triggers the appearance a layer consists of several colours on the map. Thecolours represent a particular range of values based on the selected option in thedrop-down box. The user can recognise the meaning of these colours by viewing thelegend.

Based on Google Maps API Documentation (2010), the Polygon contains a

series of coordinates in an ordered sequence. Nonetheless, to create simple polygonscontaining one path can be constructed by using a single array of LatLng coordinates.This simple array will be converted by The Google Maps API into a set of multidimensional arrays on building when storing it within the paths of Polygonproperty.

The following code snippet presents the example to create a single polygon:

Coding 5:

Starting from line 3 to 6, this coding defines three nodes where each of themconsists of latitude and longitude which will be used as path of a polygon. Meanwhile,polygon options including paths, colour and opacity are arranged at line 10 to 17.Next, in line 19 presents the coding that is used to set the polygon on the map.


11/15

8 | P a g e F K @ 2 0 1 0

In contrast to the above example, this application uses numerous separatepaths for a Polygon. As a result, the paths property of a polygon object specifies a setof multidimensional arrays with MVCArray type for each. Every array in these pathsdefines a separate sequence of ordered LatLng coordinates. The next code snippetadds an element to the MVCArray.

Coding 6:

In addition to Coding 5, Coding 6 describes the processing of creating polygonsfor this application. Coordinates for each node of polygons are defined as MVCArrayobject, as illustrated in line 6 to 12. By using iteration, the values of latLng coordinatesare taken from the database passed by server. Further details about it will bediscussed later.

Moreover, line 15 shows the addition of each element of a polygonCoordobject into the end of the array of the pathArray object and returns the new length of the array. Still in the process of iteration, the polygon option for each areaPoly, whichis described in line 18 to 25, defines paths property as pathArray and takes the valueat index i of it. And finally, each areaPoly which is Polygons is created through a


12/15

9 | P a g e F K @ 2 0 1 0

process of iteration and already pushed to polyMVC is set to the map as a set of layers, illustrated in line 29.

However, at the time a user clicks on a map that has a layer consisting of polygons, an info window will appear. The info window is a window that floats on the

map that contains specific information. Google Maps API Documentation (2010) statesthat a set of initial parameters for displaying the info window on the map is specifiedin an InfoWindow options object. After construction of an info window object, theopen() method on the InfoWindow must be called and passed on the map in order tomake the info window visible. The info window will open at its position property,which in this case is a Polygon object.

The following code demonstrates the example of info window creation thatwill display when the area of a polygon is clicked.

Coding 7:

Line 1 in Coding 7 illustrates calling for function infoWindow and passing 3variables into the function. Meanwhile, polyMVC contains multiple polygons, variableid brings a number for the index of an element, and contentArray consists of information that will display in infoWindow. This information is retrieved fromdatabase through a server which will be described later.

Moreover, lines 4 to 7 define the creation of an infoWindow object whichdisplays information from contentArray to an index id. In order to display aninfoWindow object when a user clicks on the map, the addListener() event handler hasto be declared. This method defines three attributes. The first is an object thatreceives an event. The second is an event to listen for, such as click', 'dblclick','mouseup', 'mousedown', 'mouseover', 'mouseout'. The last attribute is a function tocall when the specified event occurs. (Google Maps API Documentation, 2010).

In this case, the addListener() method that is presented in lines 9 to 15 usespolyMVC as an object and click as an event to listen for. To define an event that

occurs, a function is described to set the position of click event and call the open()


13/15

10 | P a g e F K @ 2 0 1 0

method on the InfoWindow to make the info window visible. Until this stage, thesystem involves data in the database through the server which will be described later.

In this application, user is allowed to interact with the map such as zooming,panning, and clicking on the map. User also can change the map type into Satellite,

Hybrid, Terrain or Map. In addition, the user can simply click on the map to obtaininformation in infowindow.

Figure 3.5. The main window

When user clicks on the coloured map, which is Kampar regency map, afloating window which is called mapinfo will display above the clicked area. Thismapinfo contents the information regarding land characteristics and land suitability.Figure 3.6 depicts the window when user clicked on the map.

Figure 3.6 the MapInfo page


14/15

11 | P a g e F K @ 2 0 1 0

Figure 3.7 Selected option page

The above figure illustrates when an option in a drop-down menu is selected. Alayer consist of several colours will display above the map. These colours describe therange of value for a selected land characteristic. The brief meaning of the colours isdescribed in a legend below the drop-down menu.

10. CONCLUSIONThis project intends to develop a web application based on maps to present the

information about land suitability for Palm Oil plantation in Riau, Indonesia. The webmapping which has been developed in this project uses Google Maps API. As a final point,smallholders can now use this application not only to determine which areas areappropriate for palm oil plantation, but also to get information about soil characteristic inRiau, such as CEC, Drainage, Peat, pH, Soil Depth, Texture, Alkaline, Slope and Rainfall.They can interact with the map by clicking on the map to get the information about landcharacteristic in a particular area or by choosing an option in a drop-down box. Theadvantages of this system are everybody can access this system without login; easy to use

without required a user guide; compatible to the various browsers such as Chrome,Internet Explorer, Mozilla. Moreover, by using this system, it is expected that thesmallholders can increase their income by planting palm oil in appropriate areas.


15/15

12 | P a g e F K @ 2 0 1 0

11. REFERENCE

Adkins, R.,(2009) Comparing Yahoo! and Google Maps APIs Side-by-Side, Accessed on24 May 2010, available from:http://www.technetra.com/2009/04/19/tutorial-comparing-yahoo-and-google-maps-apis-side-by-side/

Carswell, J., (2009) Web and Wireless Geographical Information Systems ,[online],Springer, 2009.

Earthware, (2010) Interactive Mapping Blog: Mapping Solution News , [online],Accessed on 27 April 2010, available from:http://www.earthware.co.uk/blog/index.php/2009/12/mapping-apis-google-maps-vs-bing-maps-part-1-introduction/

Google Maps API Documentation, (2010), Google Maps Javascript API V3 Services ,[online], Accessed on 20 June 2010, available from:http://code.google.com/apis/maps/documentation/javascript/services.html

Gregory L. Gunther, G. L., (2008) Introduction to the Google Maps API ,[online],Accessed on 15 June 2010, available from :http://www.fsl.orst.edu/sdmg/power_points/googlemaps_introduction.pdf

Indonesian Center for Agricultural Land Resources Research and Development

(ICALRD). (2009) Kriteria Kesesuaian Lahan : Kelapa Sawit (Criteria for LandSuitability : Palm Oil), [online], Accessed: 21/05/10, available from:http://bbsdlp.litbang.deptan.go.id/index.php?option=com_wrapper&view=wrapper&Itemid=155

Indonesian Government (2010), Struktur Industri Sawit akan ditingkatkan (Palm OilIndustry will be Improved), [online], Accessed on: 15/06/10, available from:http://www.indonesia.go.id/id/index.php?option=com_content&task=view&id=12773&Itemid=821

Lenssen, P. (2008) Google Apps Hacks, OReilly Media Inc.

Open GIS Consortium Inc. (2004) OGC Web Map Service Interface

Peterson, M. P. (2008) International Perspectives on Maps and the Internet, Springer,2008.

Powwel, M., (2008), The Complete Reference, McGraw-Hill Professional, 2008

Wikipedia, (2010), Comparison of web map services, Accessed on 25 April 2010,

available from:http://en.wikipedia.org/wiki/Comparison_of_web_map_services