Salta el contingut

Geoportal Configuration File

The general configuration of the geoportal, including base maps, zoom settings, design, etc., is done in the configuration file. This file is located within the project at the following path: src/config/production.js. If adjustments are desired in a development environment, it can also be modified in src/config/development.js.

The geoportal has a default configuration that can be redefined. Here are the changes that can be applied:

Branding

Property to define the logo in the toolbar and the name that appears on it. An icon link can also be added to turn it into a button.

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

Catalog

Routes to obtain data from the catalog. If the catalog is the tab-based one (old), the route will be (...)/giscube-admin/geoportal/category. If the tree-based catalog is used, it will be (...)/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
}

Base Maps

The geoportal can have different base maps that can be switched using the layer control. To add them, define an array with all the maps you want to include.

If there are Google maps, you must define the API key and indicate that it is of type googleMutant.

The default base map to be loaded should have the property 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
  }
]

Base Layers

You can add layers that are loaded by default when opening the geoportal. To do this, define the defaultLayers property as an array of the layers you want to add.

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 e.g. min y
       max zoom
    },
    title: 'title',
    auth: false
  },
  {...}
]

Edit fonts

Data fonts can be modified from the data panel.

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

Coordinate Systems

Coordinate systems in which to display the results (e.g., when clicking on the map).

To make changes to the coordinate systems, the proj4 library is used, therefore, the reference systems will be defined following its syntax.

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`
  }
]

Google API

Google maps and tools require an API-key to be used by third parties. If you want to use Google base maps or StreetView, you must enter the API-key in the configuration file.

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

Geoportal map

Defines the action when clicking in the map

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

Start

Start configuration options: center and zoom.

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

Layer Control

Layer control configuration. Show or hide the action panel (opacity).

layersControl: {
  itemPanel: true // false if renderizing not wanted
}

Layout

With the layout property, the application’s layout configuration is controlled.

The geoportalMap property corresponds to the component that builds the map, the layer control, and the sidebar.

The header property corresponds to the toolbar component.

The tools included in the toolbar are defined in headerToolbar. This property is an array of string or object. The string corresponds to the tools defined in the tools property of the configuration, they must have the same name and will appear as a button in the toolbar. The object defines dropdowns, each having an icon, a label, and an array of items containing the tools to be added to the dropdown. To add a space (in the toolbar) or a separator (in the dropdown), include a string with dashes (e.g., ‘—‘).

If you want to change the default PlacePanel component (results panel), add a different component to defaultComponent. You can also make the component change depending on the case by defining a function in strategyOptions.

The sidebar property allows changing the panel’s size configuration.

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

Language

Define which language the geoportal is set. Nowadays english and catalan are admitted.

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

Oauth

The authentication of the connection between the geoportal and the administrator is done through the oauth property. The authentication type is defined, along with the client ID (defined in the administrator at Home/Security/Application/Geoportal). The token and revokeToken routes are also defined to register login and logout actions in the application. Finally, the profile property is defined to indicate which user is logged into the application.

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/'
}

Search engine

Class that manages searches in the search panel, by default the Search class of the geoportal.

searchEngine: Search

Searches

The search APIs are defined as an array in the searches property. The URL will be defined, as well as whether authentication is required or not.

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

sentry

Pendent definició

Tools

Define the tools for the geoportal. Each tool must have an icon (to be placed in the Header) and either a route or an action. Routes will be a string, and actions will be a function.

Additionally, you can define the supported() function to indicate if the tool can or cannot be used (for example, if they are reserved for users with an active session or if they can be used on a mobile device).

Finally, you can add the headerComponent property if you want to change the tool’s component in the Header.

tools: {
  auth: {
    icon: 'las la-user', // Icon for the tool in the Header
    to: 'auth', // Route of the tool, when activated it will go to the route defined in the router .../geoportal/#/auth
    headerComponent: require('components/header/AuthHeaderItem.js').default // The auth tool's component will be AuthHeaderItem
  },
  catalog: {
    icon: 'las la-compass',
    to: 'catalog'
  },
  data: {
    icon: 'las la-pencil-alt',
    to: 'data',
    supported () {
      return !!this.$store.state.auth.username // The tool will only appear if the user is logged in
    }
  },
  fullscreen: {
    supported () {
      return this.$q.fullscreen.isCapable // The tool will only appear if the device is capable of fullscreen mode
    },
    icon () {
      return this.$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen' // The icon depends on the fullscreen state
    },
    action () {
      this.$q.fullscreen.toggle() // Function that runs when the tool is activated
    }
  }
}