Fitxer configuració Geoportal

La configuració general del geoportal –mapes base, configuració de zoom, layout, etc– es fa al fitxer de configuració. Aquest fitxer es troba dins el projecte a la següent ruta src/config/production.js. Si es vol fer ajustos en un entorn de desenvolupament també es pot modificar src/config/development.js.

El geoportal té una configuració per defecte que es pot redefinr. Aquí s’expliquen els canvis que s’hi poden aplicar:

Marca (branding)

Propietat per definir el logo de la barra d’eines i el nom que hi apareix. També s’hi pot afegir un link a l’icona convertint-lo en un botó.

branding: {
  header: {
    logo: require('assets/logo.png'), // jpg, png, svg
    text: 'Geoportal Demo',
    link: 'https://www.infraplan.cat'
  }
}

Catalog

Rutes d’on s’obtenen les dades del catàleg. Si el catàleg és el de pestanyes (antic) la ruta serà (...)/giscube-admin/geoportal/category, si s’utilitza el catàleg d’arbre serà (...)/giscube-admin/geoportal/category/catalog.

catalog: {
  categories: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/geoportal/category/catalog/',
  search: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/geoportal/catalog/',
  base: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/',
  auth: true
}

Mapes Base

El geoportal pot tenir diferents mapes base que es canvien mitjançant el control de capes. Per afegir-los es defineix un array amb tots els mapes que es vulguin afegir.

Si hi ha mapes de Google s’haurà de definir l’API-key i indicar que és de tipus googleMutant.

El mapa base que es carrega per defecte ha de tenir la propietat default: true.

basemaps: [
  {
    default: true,
    type: 'tilelayer',
    name: 'Mapa base de fons',
    url: 'https://atilemaps.icgc.cat/mapfactory/wmts/topo_suau/CAT3857/{z}/{x}/{y}.png',
    attribution: '&copy; <a href="https://www.icgc.cat">ICGC</a>',
    maxNativeZoom: 18,
    maxZoom: 21
  },
  {
    type: 'tilelayer',
    name: 'Cartografia oficial',
    url: 'https://xxxxxxx.xxxxxxx.xxx/basemaps/carto2015/{z}/{x}/{y}.png',
    attribution: '&copy; <a href="http://www.xxxx.cat/">Ajuntament de xxxx</a>',
    maxZoom: 21,
    minZoom: 15
  },
  {
    type: 'tilelayer',
    name: 'OpenStreetMap',
    url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    maxNativeZoom: 18,
    maxZoom: 21
  },
  {
    type: 'tilelayer',
    name: 'Carto DB',
    url: 'https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png',
    attribution: '&copy; <a href="http://mapbox.com/about/maps" target="_blank">Carto</a>',
    maxNativeZoom: 18,
    maxZoom: 21
  },
  {
    type: 'googleMutant',
    name: 'Roadmap Google',
    options: {
      type: 'roadmap'
    },
    maxNativeZoom: 18,
    maxZoom: 21
  }
]

Capes Base

Es poden afegir capes que es carreguin per defecte al obrir el geoportal. Per fer-ho es defineix la propietat defaultLayers com un array de les capes que es vulguin afegir.

defaultLayer: [
  {
    id: new GiscubeRef('23.13'), // giscube-admin catalog reference
    layerDescriptor: {
      title: 'Layer\'s title',
      type: 'WMS',
      url: 'https://demo.infraplan.cat/apps/giscube-admin/qgisserver/services/layer-name',
      projection: '4326',
      layers: 'layer-name'
    },
    options: {
      // Layer options: p.e. min and max zoom
    },
    title: 'title',
    auth: false
  },
  {...}
]

Edit sources

Les fonts de les dades que es poden modificar des del panell de dades.

editsources: [
  {
    name: 'xxxx',
    url: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/'
  }
],

Sistemes de coordenades

Sistemes de coordenades en què mostrar els resultats (p.e. quan es fa click al mapa).

Per fer canvis de sistemes de coordenades s’utilitza la llibreria proj4, per tant, els sistemes de referància es definiran seguint la seva sintaxi.

epsgs: [
  {
    label: 'Lat/Lon',
    code: 'EPSG:4326',
    def: '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees',
    format: ([x, y]) => `${y.toFixed(6)}°, ${x.toFixed(6)}°`
  },
  {
    label: 'UTM (ETRS89)',
    code: 'EPSG:25831',
    def: '+proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs',
    format: ([x, y]) => `${x.toFixed(2)}m, ${y.toFixed(2)}m`
  }
]

API de Google

Els mapes i eines de google necessiten una API-key per poder ser utilitzades per terceres persones. Si es vol utilitzar mapes base de Google o l’StreetView s’haurà d’introduir l’API-key al fitxer de configuració.

google: {
  apiKey: 'your-api-key'
}

Mapa Geoportal

Per definir l’acció de fer click al mapa.

geoportalMap: {
  queryOnClick: require('components/QueryOnClick.vue').default
}

Inici

Opcions de configuració d’inici: centre i zoom.

home: {
  center: {
    lat: 41.9,
    lng: 2.7
  },
  zoom: 15
}

Control de capes

Configuració del control de capes. Mostrar o no el panell d’accions (opacitat)

layersControl: {
  itemPanel: true // false if one does not want to render it
}

Layout

Amb la propietat layout es controla la configuració del disseny de l’aplicació.

La propietat geoportalMap correspon al component que construeix el mapa, el control de capes i el sidebar.

La propietat header correpson al component de la barra d’eines.

Les eines que s’inclouen a la barra d’eines es defineixen a headerToolbar. Aquesta propietat és un array de string o object. Els string corresponen a les eines definides a la propietat tools de la configuració, han de tenir el mateix nom, i apareixeran com un botó a la barra d’eines. Els object són desplegables, cada un té una icona, una etiqueta i un array d’items que conté les eines que es volen afegir al desplegable. Per posar un espai (a la barra) o una línia (al desplegable) s’ha d’incloure un string amb guions (p.e '---').

Si es vol canviar el component PlacePanel (panell de resultats) per defecte li afegirem un component diferent a defaultComponent. També es pot fer un que el component canviï depenent del cas definint una funció a strategyOptions.

La propietat sidebar permet canviar la configuració de les mides del panell.

layout: {
  /* components */
  geoportalMap: require('components/GeoportalMap.vue').default,
  header: require('components/AppHeader.vue').default,
  headerToolbar: [
    'home',
    'catalog',
    'streetview',
    'draw',
    '----------',
    'auth',
    {
      icon: 'settings',
      label: 'altres',
      items: [
        'search',
        '----------',
        'data',
        'share',
        '----------',
        'print',
        'fullscreen',
        '----------',
        'contact'
      ]
    }
  ],

  placePanel: {
    defaultComponent: () => require('components/PlacePanel.vue').default,
    strategyField: 'content_type',
    strategyOptions: {
      // 'example_value': () => require('components/PlacePanelBasedComponent.vue').default
    }
  },

  sidebar: {
    initialWidthPercentage: 30,
    minWidthPixels: 300,
    minWidthPercentage: 24,
    steps: [24, 45, 60, 75]
  }
}

Idioma

Definir en quin idioma es vol el geoportal. Actualment, es suporten el català i l’anglès.

locale: {
  main: 'ca',
  fallback: 'en-us'
}

Oauth

L’autenticació de la connexió entre el geoportal i l’administrador es fa mitjançant la propietat oauth. Es defineix el tipus d’autenticació, l’id de client (definit a l’administrador a Inici/Seguretat/Applicacion/Geoportal). També es defineixen les rutes de token i revokeToken per registrar els login i logout a l’aplicació. Finalment, es defineix la propietat profile per indicar quin usuari està logat a l’aplicació.

oauth: {
  type: 'password',
  client_id: 'b84uwJOlbtjeTAtThoazZFssE4RimQh3kyEiA8Z2',
  token: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/o/token/',
  revokeToken: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/o/revoke-token/',
  profile: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/geoportal/api/v1/profile/'
}

Motor de cerca

Classe que gestiona les cerques del panell de cerca, per defecte la classe Search del geoportal

searchEngine: Search

Cerques

Les API’s de cerca es defineixen com un array a la propietat searches. S’hi definirà la URL i si s’ha d’estar logats o no.

searches: [
  {
    name: 'geoportal',
    title: 'Geoportal search',
    url: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/geoportal/search/',
    auth: true
  }
]

sentry

Pendent definició

Eines

Definir les eines del geoportal. Cada eina ha de tenir una icona (per posar-la al Header) i, o bé una ruta, o bé una acció. Les rutes seran un string i les accions seran function.

A part, també es pot definir la funció supported() per indicar si l’eina pot o no ser utilitzada (p.e. si són eines reservades a usuaris logats o si es poden utilitzar en un mòbil).

Finalment, es pot afegir la propietat headerComponent si es vol canviar el component de l’eina al Header.

tools: {
  auth: {
    icon: 'las la-user', // icona de l'eina al Header
    to: 'auth', // ruta de l'eina, quan s'activi l'eina anirà a la ruta definida al router .../geoportal/#/auth
    headerComponent: require('components/header/AuthHeaderItem.js').default // el component de l'eina auth serà AuthHeaderItem
  },
  catalog: {
    icon: 'las la-compass',
    to: 'catalog'
  },
  data: {
    icon: 'las la-pencil-alt',
    to: 'data',
    supported () {
      return !!this.$store.state.auth.username // només apareix l'eina si l'usuari està logat
    }
  },
  fullscreen: {
    supported () {
      return this.$q.fullscreen.isCapable // només apareix l'eina si el dispositiu es capaç de fer fullscreen
    },
    icon () {
      return this.$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen' // l'icona depèn de l'estat de fullscreen
    },
    action () {
      this.$q.fullscreen.toggle() // funció que s'executa quan s'activi l'eina
    }
  }
}