–––––––––––- –––––– [601086]

–––––––––––- ––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București

Universitatea “ POLITEHNICA ” din Bucuresti

Facultatea de Automatică și Calculatoare

„STUDIUL POSIBILITĂȚILOR DE PLASARE DE
INFORMAȚII PE O HARTĂ G OOGLE MAPS ”

Nume : Mezdrea Dumitru Cristinel
Specializare: Administrarea Bazelor de Date
Anul 2 , Semestrul 1 , Master
Coordonator Științific : Prof.dr.ing. Florin Radulescu

–––––––––––- ––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București

Rezumat
Studiul posibilităților de plasare de informații pe o hartă Google Maps reprezintă obiectivul principal al
prezentului raport de cercetare . In ziua de astăzi există multe servicii de hărți online, datorită dezvoltării foarte
mari a tehnologiilor dar și a do meniului IT . Din punctul meu de vedere, Google Maps este cel mai complex serviciu
de hărți online, oferind imagini din satelit, street maps, vederi panoramice 360 grade,condiții reale de trafic, etc.
În prezentul raport de cerceare s unt prezentate p rincipalele tehnologii utilizate pentru implementarea hărții
online – Google Maps într -un template, iar din punct de vedere practic este prezentată o varianta de început pentru
plasarea informaților pe hartă.
Cu alte cuvinte , aplicația are ca scop f urnizarea interactivă de informații folosind un serviciu de hărți existent și
o bază de date ce conține informații despre diverselor puncte de pe respectiva hartă.

Cuvinte cheie: plasare informații , hartă geografică, google maps, aplicație web, markers.

–––––––––––- ––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București

Cuprins
Cuprins ………………………….. ………………………….. ………………………….. ………………………….. …………………….. 3
1. Introducere ………………………….. ………………………….. ………………………….. ………………………….. ……….. 4
2. Tehnologii utilizate ………………………….. ………………………….. ………………………….. ………………………….. 5
3. Generator Angular – Sprin g ………………………….. ………………………….. ………………………….. ……………… 6
3.1 Java Spring MVC + AngularJS / Tomcat Yeoman generator ………………………….. …………………………. 6
4. Structura bazei de date ………………………….. ………………………….. ………………………….. ……………………. 8
5. Prezentarea aplicației ………………………….. ………………………….. ………………………….. ……………………. 10
6. Implementări ulterioare: ………………………….. ………………………….. ………………………….. ……………….. 18
7. Concluzii ………………………….. ………………………….. ………………………….. ………………………….. ………….. 18
8. Lista figurilor ………………………….. ………………………….. ………………………….. ………………………….. ……. 19
BIBLIOGRAFIE ………………………….. ………………………….. ………………………….. ………………………….. ………….. 20

4
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București 1. Introducere

Odată cu dezvoltarea foarte mare a tehnologiei cât și a internetului în ziua de astăzi, se poate
realiza o plasare de informații atât turistice cât și informative, în mediul online, folosind unul
dintre serviciile de localizare și de hărți online, precum “Google Maps”.
În prezentul raport de cercetare, o biectul principal este reprezentat prin realizarea unei
aplicații prin intermediul căreia să se poată plasa informații pe o hartă geo grafică.
Datorită numărului foarte mare de călătorii care se realizează la nivel mondial , hărțile online
prin intermediul cărora se plasează informații au un rol deosebit în zilele noastre oferind
siguranță utilizatorilor, rute și destinații concrete, imagini de ansamblu la nivel global, street view,
vederi panoramice la 360 grade etc.
Deoarece capacitate de stocare trebuie sa fie de stul de consistentă, informațiile turistice vor fi
stocate intr -o bază de date, de unde vor fi gestionate de un “sistem de ges tiune a bazelor de
date”și anume MySQL Workbench, iar ulterior vor fi plasate pe o hart ă geografică, prin
intermediul unor limbaj e de programare precum “java, A ngular JS, Javascript ” dar și a unui mediu
de dezvoltare al aplicației respective, folosind în acest caz „IntelliJ ”.
Cu ajutorul Google Maps se pot vedea șosele de pe tot globul, sensuri de circulație,
informații din t rafic cum ar fi străzi închise circulației sau care se află în reparaț ie, accidente și
multe altele. Aplicația este foarte utilă atunci când dorim să aflăm distanța dintre două sau mai
multe puncte de pe hartă (indiferent că alegem mersul pe jos, transpor tul public sau mașina
personală) cu evitarea autostrăzilor sau traseelor cu taxe. Google Maps oferă indicații rutiere
prețioase și sugerează diverse trasee care sunt exprimate în km sau mile în funcție de preferințele
fiecăruia, dar și durata aproxima tivă a acestor trasee.[1 ]

Avantaje:
 Localizare în timp real a destinației;
 Calculul traseului ce trebuie urmat;
 Informații despre traseu;
 Informații despre trafic;
 Rute disponibile;
 Timpul total al calătoriei;
 Imagini “Street View”;
 Imagini cu posibila destinație.

Global Positioning System (prescurtat GPS) este un sistem global de navigație prin satelit
și unde radio. Principalul sistem de poziționare prin satelit de tip GPS este sistemul militar
american numit "Navigational Satellite Timin g and Ranging" (NAVSTAR). Acest sistem, inițiat și
realizat de către Ministerul Apărării al Statelor Unite ale Americii (DOD), poate calcula poziția
exactă = coordonatele geografice exacte ale unui obiect pe suprafața Pământului, cu condiția ca
acesta să f ie echipat cu dispozit ivul necesar – un receptor GPS.[2]

5
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București 2. Tehnologii utilizate

“Studiul posibilităților de plasare de informații pe o hartă – Google Maps” reprezintă o
aplicație web ale cărei date sunt stocate într -o bază de date. Aceasta se află în tr-un stadiu de
început, urmând sa se implementeaze mult mai multe funcționalități. Au fost utilizate
tehnologiile:

o Java
o Javascript
o HTML
o CSS
o Angular Google Maps
o Baze de date – SQL
o MySQL Workbench – pentru gestionarea bazei de date
o Hibernate – pentru conctarea la baza de date
o Maven – sistem de build și management
o Mediu de dezvoltare – IntelliJ IDEA

Maven este un sistem de build și management al proiectelor, scris în Java. Face parte din
proiectele găzduite de Apache Software Foundation. Funcț ionalitățile sale principale sunt
descrierea procesului de build a softwareului și descrierea dependențelor acestuia. Un fișier XML
descrie proiectul care urmează să fie build -uit, dependențele acestuia sau ale module și
componente de care depinde, ordinea în care se execută build -ul, directoarele și plug -in-urile
necesare. Maven descarcă dinamic bibliotecile Java si plug -in-uri necesare, din unul sau mai
multe repository -uri.[3]

Fig.1 – Apache Maven

Hibernate este un framework de mapare “object – relational” pentru limbajul de
programare Java. Acesta se ocupă de maparea claselor Java către tabelele din baza de date (de
la tipurile de date JAVA la tipurile de date SQL), dar oferă și interogarea datelor.[4]

Fig.2 – Hibernate

6
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București AngularJS este un framework – aplicație web open -source deținut în principal de Google și
de o comunitate de persoane, Rangle.io, dezvoltatori și corporații ce abordează provocările
întampinate în dezvoltarea de aplicații “single – page”. Acesta î și propune să simplifice atât
dezvoltarea cât și testarea de aplicații prin furnizarea unui framework pentru partea de client
(client -side), arhitecturile Model – View – Controller (MVC) și Model -View -ViewModel (MVVM),
împreuna cu componentele utilizate î n aplicațiile foarte dezvoltate.[5]

Fig.3 – AngularJS

3. Generator Angular – Spring

3.1 Java S pring MVC + AngularJS / Tomcat Yeoman generator

Pentru realizarea structurii proiectului în mediul de dezvoltare IntelliJ a fost folosit
generatorul “Java Spring MVC + AngularJS”.
Acest generator crează o bază solidă a proiectului, o schiță, utilizând Java Spring MVC
împreună cu AngularJS și poate fi foarte usor deploy -at pe Tomcat. Sunt incluse de asemenea și
următoarele tool -uri: Maven, Grunt & Bower. [6]

Pași pentru instalare:

Se deschide o console Git Bash în folderul proiectului și se introduce următoarele:

 Instalare Yoman:

npm install -g yo

 Instalare generator:

npm install -g generator -angular-spring

 Lansare generator

yo angular-spring

7
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București Odată ce a fost instalat generatorul se vor executa următoarele comenzi pe ntru a compila și a
rulat aplicația web:

o Instalare dependințe:

npm install && bower install

o Pornirea aplicației:

grunt && mvn tomcat7:run

Structura proiectului în IntelliJ:

├── Gruntfile.js
├── README.md
├── bower.json
├── package.json
├── pom.xml
└── src
└── main
├── java
│ └── com
│ └── mycompany
│ └── myapp
│ ├── controller
│ │ └── ApplicationController.java
│ └── service
│ └── ApplicationService.java
├── resources
│ ├── log4j2.xml
│ └── spring
│ ├── application -config.xml
│ └── mvc -config.xml
└── webapp
├── app
│ ├── app.js
│ ├── components
│ │ ├── core
│ │ │ └── directives
│ │ │ └── directives.js
│ │ └── main
│ │ ├── controllers
│ │ │ └── main.js
│ │ └── services
│ │ └── main.js
│ ├── config.js
│ └── routes.js
├── config
│ └── config.properties
├── index.html
├── style
│ └── style.css
├── templates
│ ├── header.html
│ └── main
│ └── main.html
└── web.xml

8
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București 4. Structura bazei de date

Baza de date a aplicației este create și gestionată în MySQL Workbench și are denumirea
“maps”.
Aceasta este formată din următoarele tabele:

 coordinates
 id (pk)
 city
 description
 latitude
 longitude
 name

 users
 id (pk)
 email
 name
 username
 password
 age
 sex
 status (fk)

 status
 id (pk)
 type

Având în vedere stadiul aplicației, momentan este folosită doar tabela coordinates, urmând
ca în varianta finală sa se utilizeze și celelalte doua tabele plus altele care urmează să fie create.
Cu alte cuvinte, funcționalitatea de Login – Înregistrare în aplicație o sa fie implementă în
varianta finală, momentan este prezentată doar schița pentru formularul de Login, respectiv
înregistrare.
În tabela coordinates se vor salva toate dat ele despre marker -ele plasate pe hartă dar tot din
acestă tabelă vor fi preluate datele.
Tabelele users și status se află într -o relație “One – to – Many”, în tabela users se vor salva
toate datele despre utilizatorii aplicației în timp ce în tabela status se va salva tipul utilizatorului
(administrator sau doar simplu utilizator).

9
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București Modelul relational al bazei de date:

Fig.4 – Modelul relational al bazei de date

Angular Google Maps:

Versiunea de Google Maps folosită în aplicație este “Angular Google Maps”, iar pentru instalare
am rulat următoarea comandă:

bower install angular -ui-map [6]

10
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București 5.Prezentarea aplicației

În momentul în care se pornește aplicația se deschide prima pagină:

Fig.5 – Prima Pagina

La deschiderea aplicației, se va afișa harta Google Maps cu un marker centrat pe Facultatea de
Automatică și Calculatoare, acesta totodată fiind salvat în baza de date.

11
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București După cum se poate observa în figura 5, există un formular cu ajutorul căruia markerele care
se plasează pe hartă, se pot salva în baza de date, după ce acesta se va completa și se va apăsa
butonul “Add”.
Cu alte cuvinte, la apăsarea butonului “Add”datele se vor salva în baza de date, după cum se
poate observa în figurile următoare:

Fig.6 – Introducere date în baza de date

12
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București Datele introduse în formularul anterior se vor salva în baza de date ca în figura următoare:

Fig.7 – Verificare introducere date în baza de date

Informațiile de pe pri ma pagină precum ș i formularul de introducere a datelor:

<div class="clear"></div>
<div class="banner-wrapper" >
<div class="banner" >
<div class="banner-image">
<div id="mapContainer" >
<ui-gmap-google-map center="map.center" zoom="map.zoom"
events="map.events" >
<!–<ui-gmap-google-map center="map.marker.coords" zoom="map.zoom"
events="map.events"> –>
<ui-gmap-marker ng-repeat="coords in map.markers" coords="coords"
idkey="map.marker.key" events="map.marker.events" >
<!–<ui-gmap-marker models="map.marker"
coords="map.marker.coords" idkey="map.marker.key" events="map.marker.events"> –>
<ui-gmap-window>
<div>

13
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București <div>Nume: {{map.markerDetails.marker.name}} </div>
<div>Oras: {{map.markerDetails.marker.city}} </div>
<div>Descriere:
{{map.markerDetails.marker.descri ption}}</div>
</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
<div class="formContainer" >
<table border="0">
<tr>
<td>Latitudine: </td>
<td><input type="text" name="latitude" ng-
model="map.marker.coords.latitude" /></td>
</tr>
<tr>
<td>Longitudine: </td>
<td><input type="text" name="longitude" ng-
model="map.marker.coords.longitude" /></td>
</tr>
<tr>
<td>Nume:</td>
<td><inp ut type="text" name="name" ng-
model="map.marker.name" /></td>
</tr>
<tr>
<td>Descriere: </td>
<td><input type="text" name="description" ng-
model="map.marker.description" /></td>
</tr>
<tr>
<td>Oras:</td>
<td><input type="text" name="city" ng-
model="map.marker.city" /></td>
</tr>
<tr>
<td colspan= "2"><button class="button" type="button" ng-
click="map.addCoordinates()" >Add</button></td>
</tr>
<tr>
<td colspan= "2">
<div class="{{map.cssClass}}" >{{map.message}} </div>
</td>
</tr>
</table>

</div>

</div>
Fig.8 Codul aplicației – Formularul de adăugare

14
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București În momentul în care sunt adăugate date pe hartă, dacă se face click pe marker se va afișa un pop –
up în dreptul acestuia cu datele introduse anterior:

Fig.9 – Pop-up date introduse în baza de date

 Funcția de adăugare coordonate in baza de date :

function addCoordinates() {
var coordiates = {};
coordiates.latitude = vm.marker.coords.latitude;
coordiates.longitude = vm.marker.coords.lon gitude;
coordiates.name = vm.marker.name;
coordiates.description = vm.marker.description;

15
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București coordiates.city = vm.marker.city;

MainService
.addCoordinates(coordiates)
.then(onAdd Complete, onAddError);
}

 Metoda de eliminare a marker -ului de pe hartă:

function removeMarker(latitude, longitude) {
var index = -1;
for(var i = 0; i < vm.markers.length; i++) {
if(vm.markers[i].latitude === latitude && vm.markers[i].longitude === longitude) {
index = i;
}
}

if(index != -1 && vm.markersAttributes[index].canDelete) {
vm.markers.splice(index, 1);
vm.markersAttributes.splice(index, 1);
}
}

 Metoda de preluare a detaliile de la markere:

function getMarkerDetails(coordinates) {
var latitude = coordinates.latitude;
var longitude = coordinates.longitude;
for(var i = 0; i < vm.markersAttributes.length; i++) {
if(vm.markersAttributes[i].marker.latitude === latitude &&
vm.markersAttributes[i].marker.longitude === longitude) {
return vm.markersAttributes[i];
}
}
return null;
}

16
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București  Funcția “onLoadComplete” se apelează când se primesc toate coordonatele din baza de
date pentru a popula harta cu markere.
Cu alte cuvinte, pentru pentru a fi apelată funcția, se face un request în java și mai departe
se face request către baza de date, raspunsul din baza de date vine înapoi în java după
care se trimite în Angular. Dacă nu se primește eroare se apelează funcția, iar dacă se
primește eroare se apelează o altă funcție “onLo adError”.

function onLoadComplete (response) {
if(response.length > 0) {
var marker = {};
var attributes = {};
for (var i = 0; i < response.length; i++) {
marker = {};
attributes = {};
marker.latitude = response[i].latitude;
marker.longitude = response[i].longitude;
vm.markers.push(marker);

attributes.marker = response[i];
attributes.canDelete = false;
vm.markersAttributes.push(attributes);
}
} else {
vm.markers = [
{
latitude: 44.435730,
longitude: 26.048109
}
];
var attributes = {};
attributes.marker = vm.markers[0];
attributes.canDelete = true;
vm.markersAttributes.push( attributes);
}
}

function onLoadError(response) {

}

17
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București  Funcționalitatea de Login și de Înregistrare nu este momentan implementată, se va
implementa în varianta finală a aplicației, însă se poate prezenta design -ul.

Fig.10 – Template Login

Fig.11 – Template Înregistrare

18
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București 6.Implementări ulterioare:

 Funcționalitatea de Login
 Functionalitatea de Înregistrare
 Doua tipuri de utilizatori:
– administrator
– user înregistrat
 Sesiuni
 Distanța între doua markere (traseu)
 Export traseu – xml/pdf
 Extinderea bazei de date
 Crearea de pagini adiționale

7.Concluzii

În prezentul ra port de cercetare a fost prezentată o analiză asupra stadiului aplicației
implementate , urmărind principalele avantaje ale tipului de hartă geografică dar și tehnologiile
folosite în realizarea aplicației. Deoarece este o aplicație destul de complexă, este necesar un
timp pentru implementarea tuturor funcționalităților , urmând ca pe semestrul următor să se
stabilească următoarele funcționalități ce urmează a fi parcur se pentru fin alizarea aplicației.
S-a efectuat o analiză asupra aplicației Google Maps existente, evidențiind principalele
funcționalități ale acesteia , dar și o modalitate de implementare a acestora.
Au fost prezentate principalele tehnologi i ce vor fi folosit e în realizarea aplicației final e,
printre care putem reaminti tehnologii precum Java,JavaScript,Angular,HTML,CSS, etc.
Scopul principal al acestei aplicații, pe lânga plasarea de informații pe o hartă geografică, il
reprezintă și furnizarea intera ctivă de informații turistice.
Pe viitor se dorește implementarea următorului pas al aplicației ce constă din extinderea
bazei de date în cadrul căreia se vor stoca toate informațiile de pe harta geografică , prin crearea
unor noi tabele dar și a uno r noi legături între acestea , stabilirea funcționalităților finale și a
aspectului final al aplicației, dar nu în ultimul rand implementare a funcționalităților de
Login,Înregistrare, distanța între markere.

19
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București 8.Lista figurilor

Figura 1 – Apache Maven
Figura 2 – Hibername
Figura 3 – AngularJS
Figura 4 – Modelul relaț ional al bazei de date
Figura 5 – Prima pagină
Figura 6 – Introducere date în baza de date
Figura 7 – Verificare introducere date în baza de date
Figura 8 – Codul aplicației – Formularul de adăugare
Figura 9 – Pop-up date introduse în baza de date
Figura 10 –Template Login
Figura 11 – Template Înregistrare

20
–––––––––––––––––
Facultatea de Automatică și Calculatoare, Master ABD anul 2, Universitatea POLITEHNICA din București BIBLIOGRAFIE

[1] Google Maps – http://ro.wikipedia.org/wiki/H%C4%83r%C8%9Bi_Google, 2014
[2] GPS – https://ro.wikipedia.org/wiki/Global_Positioning_System
[3] Maven – https://ro.wikipedia.org/wiki/Apache_Maven
[4] Hibernate – http://www.tutorialspoint.com/hibernate/
[5] AngularJS – https://en.wikipedia.org/wiki/AngularJS
[6] Angular Spring Generator – https://www.npmjs.com/package/generator -angular -spring
[7] Angular Google Maps – https://github.com/angular -ui/ui -map