Verkkokarttasovelluksen uusi ulkoasu ja sen hyödyntäminen

Abstract

Insinöörityössä oli tarkoituksena tutkia ja toteuttaa karttasovellus, jossa käytetään kartan ulkoasuna omaa karttaa. Työssä perehdyttiin karttojen historiaan verkossa, karttarajapintoihin ja niiden ominaisuuksiin.

Verkkokarttojen historia on syvästi yhteydessä Internetin kehitykseen. Niiden luomiseen kuuluu suunnittelu, luominen ja jakelu Internetissä. Ensimmäinen verkko-karttapalvelu julkaistiin vuonna 1993. Nykypäivänä karttarajapintapalveluiden tarjoajia on monia, ja niiden sisältö on laajentunut tekniikan kehittyessä.

Sovelluksen toteutuksessa käytettiin karttarajapintana Google Maps API:a. Käyttöliittymään toteutettiin responsiivinen ulkoasu ja kuvakaruselli Bootstrapia käyttäen. Karttaan sijoitettiin markkereita, joilla pystyi kontrolloimaan kuvakarusellia. Sovelluksessa käytettiin lisäksi HTML-, CSS- ja jQuery-ohjelmointikieliä.

Työssä tehdyn sovelluksen tarkoitus on lisätä tietoisuutta karttarajapinnoista ja olla mallina tuleviin karttasovelluksiin. Toteutettu sovellus vastasi suunniteltua sovellusta, ja se tuo hyvin esille, mitä ominaisuuksia karttasovelluksilla voidaan toteuttaa. Työstä saatujen kokemusten avulla on helpompi lähteä suunnittelemaan uutta karttasovellusta.

The purpose of the final year project was to study and realize a map application where the user would use his/her own map as the layout of the map. As a result, the thesis deals with the history of maps on the web, map interfaces and their features.

The history of web maps is deeply ingrained in the development of the Internet. Their creation consists of planning, creating and distributing on the Internet. The first Web Map Service was released in 1993. Today there are many providers for web map interfaces and their content has widened as the technology has evolved.

The Google Maps API map interface was used in the realization of the application this thesis deals with. A responsive layout and automatic picture slide show were created into the user interface using Bootstrap. Markers were placed in the map to enable controlling the automatic picture slide show. Additionally, the HTML, CSS and jQuery programming languages were used in the application.

The purpose of the application is to increase awareness of map interfaces and to be a model for future map applications. The realized application matched the planned application and it clearly shows what features can be realized with map applications. With the experience gained from the project it is easier to start developing a new map application.