npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@musasutisna/vue-gis

v1.6.0

Published

make easier developed map with vue and arcgis.js

Downloads

26

Readme

VueGIS is based on Vue 3 with composition style codes and compatible with arcgis.js core library version 4.25

Getting started

Lets install vue-gis with npm

npm install --save @musasutisna/vue-gis

after install completed next load map into your vue component

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

Configuration

All configuration we setup inside a file json, all files is located by default at src/public in your vue directory. Create a new directory with name map to collected all setting files, in other hand all files located can be customize by override with these config

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

How to config (config.json)

Configure the global properties of the library and manage the map display settings.

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

| Name | Type | Description | |:--|:--|:--| | EsriConfig | Object | https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#properties-summary | | MapView.zoom | Integer | Zoom level of map. | | MapView.scale | Integer | Scale level of map. | | MapView.center | Array | Central point of map. |

All configurations will be automatically set to EsriConfig and pre-processed with custom parameters. However, some properties will be handled by a handler and must match the specified format.

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

Categorizing Layer (category.js)

Make a base category for all our layer collection to help our developed all displayed layer make easier controled like toggle or removed.

| Name | Type | Description | |:--|:--|:--| | id | Integer | Unique id of category. | | name| String | Name of category. | | title | String | Title of category. | | order | Integer | Ordering category number. | | enable | Boolean | Set true to make category readable and false to skip category. |

Grouping Layer (group.js)

Make a base group for all our layer collection to help our developed all displayed layer make easier controled like toggle or removed.

| Name | Type | Description | |:--|:--|:--| | id | Integer | Unique id of group. | | name| String | Name of group. | | title | String | Title of group. | | order | Integer | Ordering group number. | | enable | Boolean | Set true to make group readable and false to skip group. | | icon | String | Url to image icon of group. |

How to setup basemap (basemap.json)

A basemap is a background map layer that provides context and reference information for the primary data being displayed on a map, these a example free basemap hosted by ArcGIS

[
  {
    "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"
  }
]

Every item in basemap have a structure with this description

| Name | Type | Description | |:--|:--|:--| | id | Integer | Unique id of basemap layer. | | enable | Boolean | Set true to make basemap readable and false to skip basemap. | | default | Boolean | Set true to make a basemap as active layer on initial load. | | title | String | The title of basemap. | | type | String | Type of basemap (BasemapId, WMTSLayer). | | BasemapId | String | https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap | | WMTSLayer | Object | https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WMTSLayer.html#properties-summary |

How to setup layer (layer.json)

A layer is a distinct collection of geographic data that is displayed and managed together. Each layer represents a specific type of data, such as points, lines, polygons, or raster images, and can be visualized on top of a basemap or other layers to provide a comprehensive view of spatial information. A configuration layer can be setup with these structure.

| Name | Type | Description | |:--|:--|:--| | id | Integer | unique id of layer. | | category | String | Category of layer, selected one available in category.json. | | group | String | Group of layer, selected one available in group.json. | | enable | Boolean | Set true to make layer readable and false to skip layer. | | show | Boolean | Set true to make a layer initial load. | | title | String | The title of layer. | | type | String | Type of layer (GeojsonLayer, WMSLayer, MapImageLayer). | | content | String | Type shown by layer (image, line, point). | | permission | Array | The list permission allowed to enable the layer. | | zindex | Integer | The number of zindex layer. | | main_order | Integer | The number of ordering main layer. | | category_order | Integer | The number of ordering category layer. | | group_order | Integer | The number of ordering group layer. | | GeojsonLayer | Object | https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html | | WMTSLayer | Object | https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WMTSLayer.html | | MapImageLayer | Object | https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapImageLayer.html | | GraphicsLayer | Object | https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html |

How to setup legend (legend.json)

A legend is a key that explains the symbols, colors, and patterns used on a map. It helps users understand what the various map elements represent, such as different types of roads, land use, water bodies, or elevation levels. Feel free to customize the legend format in these files.

| Name | Type | Description | |:--|:--|:--| | title | String | The title of legend. | | sub | Array | Collection of detailed legend items. | | sub[].name | String | Name of the legend item. | | sub[].symbol | String | URL to the symbol image. | | sub[].desc | String | Detailed description of the legend item. |

Custom parameters

Pre-processing custom parameters with supplied data and from executed method.

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

will produces

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

that format "@lib" is fill with method name availble on libs and "@params" is the arguments will be pass into method and "$" to access custom data supplied by generate parameter and all property without format will be normaled values.

Custom parameters @lib

The lib is have reserved method could not be used "execute", but you can use following method in our custom parameter

@lib: localStorage

Get a data from localStorage with key

Return: String

Parameters

| Name | Type | Description | |:-|:-|:-| | Name | String | The key will be get on localStorage. |

@lib: sessionStorage

Get a data from sessionStorage with key

Return: String

Parameters

| Name | Type | Description | |:-|:-|:-| | Name | String | The key will be get on sessionStorage. |

@lib: toString

Convert a object into string, and we could add assign and sparator

Return: String

Parameters

| Name | Type | Description | |:-|:-|:-| | Items | Array | Object | Items will be convert into string. | | Prefix | String | Boolean | Prefix value item. | | Suffix | String | Boolean | Suffix value item. | | Assign | Boolean | String | Assign value items with assign to index. | | Sparator | Boolean | String | Sparator to chain every item. |

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

@lib: cast

Type casting of item

Return: Mixed

Parameters

| Name | Type | Description | |:-|:-|:-| | Item | Mixed | Item will be type casting. | | Type | String | The return type of item we want. |

@lib: moment

moment.js is a powerful JavaScript library used for parsing, validating, manipulating, and formatting dates. It simplifies working with dates in JavaScript by providing a consistent and intuitive API. Here’s a brief guide to interfacing with moment.js for common date operations.

Return: Mixed

Parameters

| Name | Type | Description | |:-|:-|:-| | Datetime | String | Boolean | The Datetime parameter will be passed to moment(). | | Items | Object | A collection of moment methods to be called. |

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

@lib: replace

Replace placeholders in a string using key-value pairs from an object by utilizing the replace method with the regular expression /{(.*?)}/g.

Return: String

Parameters

| Name | Type | Description | |:-|:-|:-| | subject | String | The subject string will be replaced with key-value pairs. | | haystack | Object | A collection of haystacks contains key-value pairs. |

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