• 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 exemples

Compatible 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 Angular

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.

Descarrega el component Angular (Package)
1

Descarrega la API i descomprimeix el contingut al directori '/[el_teu_projecte]/lib', fes click aquí

2

Modifica l'arxiu tsconfig.js, i dins del objecte "compilerOptions", afegeix el path a geobcn:

  "paths": { 
    "geobcn": [
      "lib/geobcn"
    ],
    "geobcn/*": [
      "lib/geobcn/*"
    ]
  }

3

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 { }
    

4

Afegeix el contingut d'aquest arxiu a 'app.component.ts' per poder inicialitzar el mapa amb el tag comentat al següent apartat. Si necessites més detall, pots consultar-ho aquí


5

Ja pots començar a fer servir la llibreria fent servir el tag <geobcn-map>.


API 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 exemples
1

Crear 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).

2

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://w33.bcn.cat/geoBCN/js/api/1.0-compact/ca"></script> 
                                

Per a mes informació consulteu el Changelog


3

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>
                        

4

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
    });
                                

5

Crear els controls i lligar els events. Trobareu informació per crear i personalitzar els diferents geocomponents a API Javascript i Exemples