Adreces i Territori (8)
Mapa per cerca d'adreces en modalitat mòbil Cerca d'adreça en dues passes amb mapa auxiliar Cerca d'adreces per proximitat a una coordenada Cercador d'adreces HTML Panell de cerca territorial Selecció d'adreça per parcel·la Cerca unificada de vies i carrers Cercador de cruilles
Interacció i Personalització (7)
Afegir marcadors sobre el mapa Afegir informació sobre el mapa Interacció entre mapa i cercador amb panells personalizats Interacció entre mapa i cercadors Moure i centrar el mapa Dibuixar línies sobre el mapa Destructor de mapa
Capes de mapa (6)
Mapa amb capes vectorials de territori Mapa amb fons topogràfic de l'ICGC Integració de les capes de Barcelona Fons de mapa externs personalitzats Afegir capa tipus vectortile Afegir capa tipus vectortile amb style json
Eines de dibuix i edició (9)
Dibuixar i editar punts Editar Capa vector Dibuixar, editar i filtrar amb llegenda Edició de dibuix simple Duplicar i moure elements entre capes Dibuixar dades des d'Opendata Obtenir i mantenir llista d'elements dibuixats Dibuixar dades amb l'event canvi de zoom Funcionament de totes les eines amb dades externes
Integració Angular (1)
Ús i integració del Geocomponent Mapa Angular

Editar amb llegenda i filtre

Alerta: vostè està veient un exemple de la versió 1.2.
Aquesta versió està en desenvolupament i pot tenir canvis en el codi.

Aquest exemple configura tres estils de dibuix sobre el mapa de tres tipus: punts, línies i polígons.
Per afegir elements cal prémer la eina "+" i després fer clic sobre el mapa per iniciar el dibuix de la forma. Per al tancament dels polígons cal fer doble click.
Afegeix també el component de llegenda i filtre que permet mostrar i amagar cadascún dels tipus.

Codi font de l'exemple


Inclusió d'scripts

Cal inserir el següent script a la capçalera ( <head> ) de la plana: 


    <script type="text/javascript" src="https://www.barcelona.cat/estatics/geobcn/1.2/api-full-ca.js"></script>

HTML

Elements html necessaris per contenir els geocomponents:





Javascript