-
Exemples
Llistat on podeu veure les diferents variants d'ús, acompanyats del codi font i HTML.
-
API Javascript
Els components clars i organitzats: els seus mètodes, constructors, valors i paràmetres.
-
Compatible Angular
Els geocomponents compten amb una paquetització per poder incorporar a aplicacions Angular.
-
Serveis RESTful
L'informació dels elements territorials de Barcelona, així com una colecció de capes pel comportament del mapa.
Integra els Geocomponents a la teva plana
Els geocomponents han estat dissenyats per una ràpida integració web.
S'estableixen unes senzilles passes per poder fer servir els geocomponents. A partir de la primera integració podeu continuar treballant amb els exemples i la documentació API Javascript on hi trobareu abundant informació relacionada.
Api Javascript
Els geocomponents es una llibreria de components Javascript.
Permeten una ràpida integració a les planes web així com una manera ràpida i senzilla per implementar les funcionalitats mes utilitzades per mapes i cercadors d'informació territorial de la ciutat de Barcelona.
Consulta la API Vés als exemplesCompatible Angular
En línia amb els frameworks actuals, Geocomponents compta amb una paquetització per aplicacions Angular llesta per descarregar i incloure als nostres projectes Angular.
Vés a la demo Mapa AngularAPI Javascript
Els geocomponents han estat dissenyats per una ràpida integració web.
S'estableixen unes senzilles passes per poder fer servir els geocomponents. A partir de la primera integració podeu continuar treballant amb els exemples i la documentació API Javascript on hi trobareu abundant informació relacionada.
Vés als exemplesCrear la nostra plana. Es recomana desenvolupar-la sota l'estandard HTML5 i no icloure-hi llibreries javascript que modifiquin l'estàndard (eviteu utilitzar llibreries tipus PrototypeJs).
Incorporar a la plana l'script de càrrega de l'api. no es necessari carregar més scripts addicional, l'API afegeix les dependències necessàries de manera automàtica a la plana de manera transparent a l'usuari.
<script type="text/javascript" src="https://www.barcelona.cat/estatics/geobcn/1.2/api-full-ca.js"></script>
Per a mes informació consulteu el Changelog
Incorporar a la plana els contenidors per als components: es necessari proporcionar un element HTML a l'hora de crear els controls visuals. Aquest pas es pot ignorar en els casos en que només s'utilitzin els mètodes de dades i que no utilitzin la part visual dels components. Recomanem un element div:
<div id="toc"> <div id="divCercadors"></div> </div> <div id="map"></div>
A partir d'aquí podem creat i utilitzar els objectes de Geocomponents
/** Construïm el mapa per defecte */ var mapa = new geoBCN.Map({ divId: "map" }); /** Construim el cercador amb les nostres preferències. Noteu que fa referència al mapa creat anteriorment. */ var cercador = new geoBCN.Html.Cercadors({ "divId": "divCercadors", "mapa": mapa });
Crear els controls i lligar els events. Trobareu informació per crear i personalitzar els diferents geocomponents a API Javascript i Exemples
API Angular
Els geocomponents han estat dissenyats per una ràpida integració web.
S'estableixen unes senzilles passes per poder fer servir els geocomponents. A partir de la primera integració podeu continuar treballant amb els exemples i la documentació API Javascript on hi trobareu abundant informació relacionada.
Els geocomponents utilitzen la versió 8 d'Angular. Son compatibles amb les versions 8 i 9 d'Angular.
Descarrega el component Angular (Package)
Descarrega la API i descomprimeix el contingut al directori '/[el_teu_projecte]/lib', fes click aquí
Modifica l'arxiu tsconfig.js, i dins del objecte "compilerOptions", afegeix el path a geobcn:
"paths": { "geobcn": [ "lib/geobcn" ], "geobcn/*": [ "lib/geobcn/*" ] }
Inicialitza el component afegint el següent codi al teu component al arxiu 'app.module.ts'
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { GeobcnModule } from 'geobcn'; /* Llibreria GeoBCN */ @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GeobcnModule /* Llibreria GeoBCN */ ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Ja pots començar a fer servir la llibreria fent servir el tag <geobcn-map>.
Métodes del component Angular
El component angular només te algunes funcions de la api de geocomponents accessibles, son les següents:
· addCartography - Anar a la descripció
· removeCartography - Anar a la descripció
· centrar - Anar a la descripció
· mostrarPopup - Anar a la descripció
· amagaPopup - Anar a la descripció
· afegeixMarcador - Anar a la descripció
· esborraMarcador - Anar a la descripció