@hcflgov/vue-esri-search

• See a demo
• View the documentation

Installation

Create a Vue project using Vite.

yarn create vite new-proj

yarn add @hcflgov/vue-esri-search

Recommended IDE Setup

• VSCode + Volar

Project setup

Bootstrap

Optionally add Bootstrap

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

Usage

<!-- src/App.vue -->
<script setup>
  import {
    SearchBootstrap,
    featureLayerProps,
    queryFeatures,
  } from '@hcflgov/vue-esri-search'

  // set feature layer url to query against
  featureLayerProps.url =
    'https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Counties/FeatureServer/0'

  // SearchBootstrap's submit event
  const watchResults = async (results) => {
    try {
      if (!results.length) throw 'No Search Results'
      const [firstResult] = results

      // query result's geometry against feature layer
      const queriedFeatures = await queryFeatures(firstResult?.feature?.geometry,, {
        // returnGeometry: true,
      })

      console.log('fun with features!', queriedFeatures)
    } catch (error) {
      console.warn(error)
    }
  }
</script>

<template>
  <SearchBootstrap hc-sources large @results="watchResults" />
</template>

Using typescript?

const watchResults = async (results: __esri.SearchResult[]) => {}