### replace Custom Parameter Example

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Demonstrates the 'replace' @lib for substituting placeholders in a string. This example constructs a CQL_FILTER string by replacing '{start}', '{end}', and '{status}' with provided values.

```javascript
"customParameters": {
  "CQL_FILTER": {
    "@lib": "replace",
    "@params": [
      "created_date DURING ('{start}', '{end}') AND status = '{status}'",
      {
        "start": { "$": "startDatetime" },
        "end": { "$": "endDatetime" },
        "status": "active"
      }
    ]
  }
}
```

--------------------------------

### Example Custom Parameters Configuration

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Demonstrates how custom parameters are defined and processed using '@lib' directives for various transformations. This includes string conversion, session storage access, and direct value assignment.

```javascript
"customParameters": {
  "property_one": {
    "@lib": "toString",
    "@params": [{"one":1,"two":2,"there":3}, ":", ";"]
  },
  "propety_two": {
    "token": {
      "@lib": "sessionStorage",
      "@params": ["token"]
    }
  },
  "property_there": "there"
  "property_four": "four",
  "property_five": { "$": "five" }
}
```

```javascript
"customParameters": {
  "property_one": "one=1;two=2;there=3",
  "property_two": "token saved in session storage",
  "property_there": "there",
  "property_four": "four",
  "property_five": 5
}
```

--------------------------------

### toString Custom Parameter Example

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Illustrates the usage of the 'toString' @lib for converting objects into formatted strings. It shows how to specify items, prefix, suffix, assignment, and separator.

```javascript
"customParameters": {
  "property": {
    "@lib": "toString",
    "@params": [
      { "one": 1, "two": 2, "there": 3},
      "'",
      "'",
      "=",
      ";"
    ]
  }
}
```

--------------------------------

### moment.js Custom Parameter Example

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Shows how to use the 'moment' @lib for date and time manipulation. This example configures moment.js to format a date to 'YYYY-MM-DD hh:mm:ss' without UTC.

```javascript
"customParameters": {
  "date": {
    "@lib": "moment",
    "@params": [
      false,
      {
        "utc": false,
        "format": ["YYYY-MM-DD hh:mm:ss"]
      }
    ]
  }
}
```

--------------------------------

### Install Vue GIS Component

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Install the vue-gis package using npm. This is the first step to integrate the component into your Vue 3 project.

```bash
npm install --save @musasutisna/vue-gis
```

--------------------------------

### Basemap Configuration Example

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

This JSON defines a list of available basemaps. Each object specifies properties like ID, title, type, and the specific BasemapId or WMTSLayer configuration. Use this to set up background map layers.

```json
[
  {
    "id": 1,
    "enable": true,
    "default": false,
    "title": "Satellite",
    "type": "BasemapId",
    "BasemapId": "satellite"
  },
  {
    "id": 2,
    "enable": true,
    "default": false,
    "title": "Hybrid",
    "type": "BasemapId",
    "BasemapId": "hybrid"
  },
  {
    "id": 3,
    "enable": true,
    "default": false,
    "title": "Oceans",
    "type": "BasemapId",
    "BasemapId": "oceans"
  },
  {
    "id": 4,
    "enable": true,
    "default": true,
    "title": "OSM",
    "type": "BasemapId",
    "BasemapId": "oceans"
  },
  {
    "id": 5,
    "enable": true,
    "default": false,
    "title": "Terrain",
    "type": "BasemapId",
    "BasemapId": "terrain"
  },
  {
    "id": 6,
    "enable": true,
    "default": false,
    "title": "Dark Gray",
    "type": "BasemapId",
    "BasemapId": "dark-gray-vector"
  },
  {
    "id": 7,
    "enable": true,
    "default": false,
    "title": "Gray",
    "type": "BasemapId",
    "BasemapId": "gray-vector"
  },
  {
    "id": 8,
    "enable": true,
    "default": false,
    "title": "Streets",
    "type": "BasemapId",
    "BasemapId": "streets-vector"
  },
  {
    "id": 9,
    "enable": true,
    "default": false,
    "title": "Streets Night",
    "type": "BasemapId",
    "BasemapId": "streets-night-vector"
  },
  {
    "id": 10,
    "enable": true,
    "default": false,
    "title": "Streets Navigation",
    "type": "BasemapId",
    "BasemapId": "streets-navigation-vector"
  },
  {
    "id": 11,
    "enable": true,
    "default": false,
    "title": "Topo",
    "type": "BasemapId",
    "BasemapId": "topo-vector"
  },
  {
    "id": 12,
    "enable": true,
    "default": false,
    "title": "Streets Relief",
    "type": "BasemapId",
    "BasemapId": "streets-relief-vector"
  }
]
```

--------------------------------

### Configure Map View Settings

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Define global properties for the library and manage map display settings, including zoom level, scale, and center coordinates.

```json
{
  "EsriConfig": {
    // available esri config properties
  },
  "MapView": {
    "zoom": 5,
    "scale": 18000000,
    "center": [113.9213, -0.7893]
  }
}
```

--------------------------------

### Configure Map URLs

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Set global configuration for map-related URLs. These settings are typically placed in a JSON file within your Vue project's public directory.

```javascript
window.config = {
  MAP_URL_CONFIG: '/map',
  MAP_URL_CONFIG_FILE: '/config.json'
  MAP_URL_CATEGORY_FILE: '/category.json'
  MAP_URL_GROUP_FILE: '/group.json'
  MAP_URL_BASEMAP_FILE: '/basemap.json'
  MAP_URL_LAYER_FILE: '/layer.json'
  MAP_URL_LEGEND_FILE: '/legend.json'
}
```

--------------------------------

### Configure Request Interceptors

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Set up request interceptors for handling custom headers in API requests. This is part of the advanced configuration for the map component.

```json
{
  "request": {
    "interceptors": [
      {
        "urls",
        "headers": {
          // all header will be pass to request header
        }
      }
    ]
  }
}
```

--------------------------------

### Load Map into Vue Component

Source: https://github.com/musasutisna/vue-gis/blob/main/README.md

Load the Vue GIS map component into your Vue 3 application. Ensure the component is imported and rendered within a container div.

```vue
<script setup>
import { VueGIS } from '@musasutisna/vue-gis'

function mapReady() {
  // map is ready
}
</script>

<template>
  <div style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;">
    <VueGIS @ready="mapReady" />
  </div>
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.