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ó (8)
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 Exportació del mapa
Capes de mapa (9)
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 Exemple de WMS amb GetFeatureInfo Coordenades del rang del mapa utilitzant els events Zoom i Move Afegir capa tipus vectortile utlitzant style json amb projecció personalitzada
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 Coordenades del rang del mapa utilitzant els events Zoom i Move en un entorn de dibuix Crear i eliminar capes de dibuix amb noms personalitzats
Integració Angular (1)
Ús i integració del Geocomponent Mapa Angular

Coordenades del rang del mapa utilitzant els events Zoom i Move

Utilitzant l'event de zoom ( mapZoomChanged ) carreguem les dades externes d'un geojson. A aquestes dades els hi donem uns estils. Amb l'eina de selecció podrem veure els atributs de l'element seleccionat.

També utilitzem l'event ( mapMove ) per mostrar l'extensió del mapa i carregar dades externes.

Per canviar el nivell de zoom podem utilitzar tant la rodeta del ratolí com l'eina de canvi de zoom que ens proporciona Geocomponents

*NOTA* Per exemplificar, cada cop que es llença el event onMoveZoomChanged es netegen les dades anteriors i es fa una altre cop la petició de les dades externes.

Extensió mapa:

Escala mapa: 1 :

Zoom anterior:

Nou zoom:

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