GeoBCN

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

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

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

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

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í

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