🔏
Azure Serverless Quickstart
  • Introduction
  • Initial Setup
    • Workstation Installs
    • Codebase
      • Directory Structure
      • User Interface Project
        • Configuring StoryBook
        • Configure Tailwind
        • Configure Craco
        • -Architectural Decision Log
      • Data Access Project
        • DDD
      • Untitled
      • Full Stack Debugging
      • Creating GitHub Project
    • Infrastructure
      • Configure Session Behavior
      • Create AAD Tenant
      • Resource Group
      • Create AAD B2C Instance
        • Identity Experience Framework
        • Configure Session Behavior
      • Storage Account & CDN
        • CDN Rules
        • Configure Azure BLOB Storage
      • App Insights
        • Create AppInsight Account
        • Apollo GraphQL App Insights Configuration
      • CosmosDB
      • Twilio SendGrid
      • KeyVault
      • Function
      • Function App Settings
      • Front Door
      • DevOps
      • Optional Items
        • Azure Data Factory
      • Azure Event Hub
    • CICD and Source Control
      • Azure DevOps
      • SonarCloud
        • Incorporate into Yaml
      • Chromatic
      • User Interface YAML
      • CICD for Data Access
        • Create Pipeline
        • Data Access YAML
  • Application Structure
    • Connect Apollo
      • Apollo Overview
      • Create Apollo Component
    • MongoDB Integration
      • Mappings
      • Directory Structure
      • Apollo Connection
      • Models
      • Queries Mutations and Subscriptions
      • Caching Reponses
    • Integrating GraphQL Tools
      • GraphQL Code Generator
    • Feature Flags
      • Flag Structure & Storage
      • Website Integration
      • Apollo Integration
      • Tips and Techniques
      • Alternative Approaches
    • React Router
    • Adding Authentication
      • Create AAD Applications
      • Configure AAD For External Identities
      • Adding MSAL And React
      • Add MSAL to the build
      • Add MSAL to ApolloClient
      • Add MSAL to ApolloServer
    • Ant Design
    • Jest Tests
  • Azure Active Directory Business-to-Consumer (AD B2C)
    • Introduction
    • How to navigate through AD B2C documentation
    • Localization
    • Abbreviations
    • Azure AD B2C Extension
  • Cognitive Search
  • Cost Analysis
  • Technical Architecture
    • Identity and Access Control
  • Adding Functionality
    • Google Analytics
      • Create Analytics
    • DAPR
      • DAPR setup
      • DAPR Services (ignore for now)
        • Identity
  • Patterns and Practices
    • Idempotent Messages
    • Pathways
    • DDD
      • Initial Setup
        • Aggregate Root
        • Entity
        • Value Object
      • Field Types
        • Primitive Types
        • Non-Primitive Types
          • Types.DocumentArray
          • PopulatedDoc
          • Custom Types
      • Example Walkthrough
  • Open Items
    • Issue Tracking
  • Helpful Resources
  • DDD
    • Page 1
  • Experimental
    • StaticWebApp
    • Azure Maps
Powered by GitBook
On this page
  • Azure Maps
  • Search Completion Implementation
  • Getting the SAS Token
  • Autocomplete Functionality

Was this helpful?

  1. Experimental

Azure Maps

How Azure Maps was implemented into Owner-Community

PreviousStaticWebApp

Last updated 2 years ago

Was this helpful?

npm package installed:

  • @azure/arm-maps

Azure Maps

A collection of geospatial services provided by Microsoft Azure. Used in Owner Community for address search completion.

Search Completion Implementation

Getting the SAS Token

Then the object AzureMapsManagementClient has an interface Accounts that has a method listKeys(), which would provide the SAS Token.

With the SAS Token, you can now make requests to the Azure Maps Fuzzy Search API.

Autocomplete Functionality

Autocomplete was implemented with Ant Design's autocomplete component.

When there is a change in the search bar, it will requery the API and generate new results as the user types.

Example:

For reference, owner-community can be found here:

A user can request the auth token by using the VS Code Azure extension or through the Azure CLI by running az login in your command line. You may have to install the Azure CLI ().

More information about AzureMapsManagementClient can be found here:

More about the API can be found here:

https://docs.microsoft.com/en-us/cli/azure/install-azure-cli-windows?tabs=azure-cli
https://docs.microsoft.com/en-us/javascript/api/@azure/arm-maps/?view=azure-node-preview
https://docs.microsoft.com/en-us/rest/api/maps/search/get-search-fuzzy?tabs=HTTP
LogoGitHub - simnova/ownercommunity-uiGitHub
LogoGitHub - simnova/ownercommuntiy-data-accessGitHub