Add 'samples/react-interactive-map/' from commit '37b5f45bc98102a631f16b26a67b01d22a7765e6'

git-subtree-dir: samples/react-interactive-map
git-subtree-mainline: e43943f69e
git-subtree-split: 37b5f45bc9

samples/react-interactive-map/.ash_history

@@ -0,0 +1,29 @@
+yo @microsoft/sharepoint
+spfx-fast-serve
+npm install react react-dom leaflet
+npm i @spfxappdev/utility
+npm i
+npm install react-leaflet
+npm install -D @types/leaflet
+npm run serve
+gulp serve
+npm run serve
+npm install -D @types/leaflet babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-nullish-coalescing-operator
+npm run serve
+exit
+npm run serve
+npm install @pnp/spfx-controls-react --save --save-exact
+npm run serve
+exit
+npm i react-leaflet-markercluster
+npm run serve
+npm install @pnp/spfx-property-controls --save --save-exact
+npm run serve
+gulp clean; gulp build; gulp bundle --ship; gulp package-solution --ship;
+npm run serve
+exit
+npm run serve
+gulp clean; gulp build; gulp bundle --ship; gulp package-solution --ship;
+npm run serve
+gulp clean; gulp build; gulp bundle --ship; gulp package-solution --ship;
+exit

samples/react-interactive-map/.gitignore

@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+.npm
+.cache
+.config
+.rushstack
+
+
+# Build generated files
+dist
+lib
+release
+solution
+temp
+*.sppkg
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts
+*.scss.d.ts

samples/react-interactive-map/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-interactive-map/.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Hosted workbench",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
+      "webRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack:///.././src/*": "${webRoot}/src/*",
+        "webpack:///../../../src/*": "${webRoot}/src/*",
+        "webpack:///../../../../src/*": "${webRoot}/src/*",
+        "webpack:///../../../../../src/*": "${webRoot}/src/*"
+      },
+      "runtimeArgs": [
+        "--remote-debugging-port=9222",
+        "-incognito"
+      ]
+    }
+  ]
+}

samples/react-interactive-map/.vscode/settings.json

@@ -0,0 +1,13 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  // Configure glob patterns for excluding files and folders in the file explorer.
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/bower_components": true,
+    "**/coverage": true,
+    "**/lib-amd": true,
+    "src/**/*.scss.ts": true
+  },
+  "typescript.tsdk": ".\\node_modules\\typescript\\lib"
+}

samples/react-interactive-map/.yo-rc.json

@@ -0,0 +1,16 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "version": "1.14.0",
+    "libraryName": "spfxappdev-webparts-map",
+    "libraryId": "cc048abe-6531-4295-ab7a-12a1c95de606",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "spfxappdev.webparts.map",
+    "solutionShortDescription": "spfxappdev.webparts.map description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}

samples/react-interactive-map/README.md

@@ -0,0 +1,24 @@
+# SharePoint Interactive Map Webpart
+
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/SPFxAppDev/sp-map-webpart)
+
+The "Interactive Map" wepart for Microsoft Teams/SharePoint is a solution, that contains one webpart.
+
+## Installation
+
+1. Download the latest SharePoint Framework packages **spfxappdev-webparts-map.sppkg** from the [GitHub repository](https://github.com/SPFxAppDev/sp-map-webpart/releases).
+2. Add **spfxappdev-webparts-map.sppkg** to the global tenant app catalog or a site collection app catalog. If you don't have an app catalog, follow this [procedure](https://docs.microsoft.com/en-us/sharepoint/use-app-catalog) to create one.
+
+> * The packages are deployed in the general Office 365 CDN meaning **I do not host any code**.
+
+
+> * For this package, you can choose to make the solution available in [all sites](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/tenant-scoped-deployment) or force to install an app to the site every time.
+
+3. If the solution was not installed globally (available in all sites), install the app in the site
+4. Add the webpart to a SharePoint Page or Teams Tab
+
+![My interactive maps webpart](/docs/docs/images/MapWPOverview.gif)
+
+## Configuration
+
+[Visit the website](https://spfxappdev.github.io/sp-map-webpart/)

samples/react-interactive-map/config/config.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "map-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/map/MapWebPart.js",
+          "manifest": "./src/webparts/map/MapWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "MapWebPartStrings": "lib/webparts/map/loc/{locale}.js",
+    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+  }
+}

samples/react-interactive-map/config/deploy-azure-storage.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "spfxappdev-webparts-map",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-interactive-map/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "SPFx app dev - interactive map webpart",
+    "id": "cc048abe-6531-4295-ab7a-12a1c95de606",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "Sergej Schwabauer",
+      "websiteUrl": "https://spfx-app.dev/",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.14.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "Includes an interactive map module with which you can create markers"
+      },
+      "longDescription": {
+        "default": "Includes an interactive map module with which you can create markers"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "spfxappdev-webparts-map Feature",
+        "description": "The feature that activates elements of the spfxappdev-webparts-map solution.",
+        "id": "e90a5f60-6586-4a90-925e-70a78df55b29",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/spfxappdev-webparts-map.sppkg"
+  }
+}

samples/react-interactive-map/config/serve.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "ipAddress": "0.0.0.0",
+  "initialPage": "https://sscwebdev.sharepoint.com/sites/showroom/_layouts/workbench.aspx"
+}

samples/react-interactive-map/config/write-manifests.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/react-interactive-map/docs/docs/index.md

@@ -0,0 +1,49 @@
+# SharePoint Interactive Map Webpart
+
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/SPFxAppDev/sp-map-webpart)
+
+The "Interactive Map" wepart for Microsoft Teams/SharePoint is a solution, that contains one webpart.
+
+## Installation
+
+1. Download the latest SharePoint Framework packages **spfxappdev-webparts-map.sppkg** from the [GitHub repository](https://github.com/SPFxAppDev/sp-map-webpart/releases).
+2. Add **spfxappdev-webparts-map.sppkg** to the global tenant app catalog or a site collection app catalog. If you don't have an app catalog, follow this [procedure](https://docs.microsoft.com/en-us/sharepoint/use-app-catalog) to create one.
+
+> * The packages are deployed in the general Office 365 CDN meaning **I do not host any code**.
+
+
+> * For this package, you can choose to make the solution available in [all sites](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/tenant-scoped-deployment) or force to install an app to the site every time.
+
+3. If the solution was not installed globally (available in all sites), install the app in the site
+4. Add the webpart to a SharePoint Page or Teams Tab
+
+![Preview](./images/MapWPOverview.gif)
+
+## Configuration
+
+Documentation is still being prepared. But I think the animated picture above shows all functions/configurations :)
+
+### How to add a new marker
+
+Documentation is still being prepared
+
+### How to change the marker position
+
+Documentation is still being prepared
+
+### How to manage marker categories
+
+Documentation is still being prepared
+
+### How to change the tile layer
+
+Documentation is still being prepared
+
+### How to change the tile layer
+
+Documentation is still being prepared
+
+### How to cluster the markers in groups
+
+Documentation is still being prepared
+

samples/react-interactive-map/docs/mkdocs.yml

@@ -0,0 +1,47 @@
+site_name: 'SharePoint Interactive Map Webpart'
+nav:
+  - Home: 'index.md'
+theme:
+  name: material
+  palette:
+    - scheme: slate 
+      primary: blue grey
+      toggle:
+        icon: material/weather-night
+        name: Switch to light mode
+    - scheme: default
+      toggle:
+        icon: material/weather-sunny 
+        name: Switch to dark mode
+  logo: 'https://spfx-app.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1629447472494%2FdGmmXf-Id.png%3Fw%3D1000%26h%3D250%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1080&q=75'
+  features:
+    - toc.integrate
+    - navigation.tabs 
+    - navigation.sections
+    - content.code.annotate
+plugins:
+  - search
+markdown_extensions:
+  - pymdownx.highlight:
+      anchor_linenums: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences
+  - admonition
+  - tables
+  - codehilite:
+      guess_lang: false
+  - toc:
+      permalink: true
+repo_url: https://github.com/SPFxAppDev/sp-map-webpart
+extra:
+  version:
+    provider: mike
+  social:
+    - icon: fontawesome/brands/linkedin
+      link: https://www.linkedin.com/in/sergej-schwabauer-a26b5267/
+    - icon: fontawesome/brands/github
+      link: https://github.com/SPFxAppDev
+    - icon: fontawesome/brands/hashnode
+      link: https://spfx-app.dev/
+copyright: Copyright © 2021 - 2022 Sergej Schwabauer

samples/react-interactive-map/docs/site/404.html

@@ -0,0 +1,344 @@
+
+<!doctype html>
+<html lang="en" class="no-js">
+  <head>
+    
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width,initial-scale=1">
+      
+      
+      
+      <link rel="icon" href="/assets/images/favicon.png">
+      <meta name="generator" content="mkdocs-1.2.3, mkdocs-material-8.2.1">
+    
+    
+      
+        <title>SharePoint Interactive Map Webpart</title>
+      
+    
+    
+      <link rel="stylesheet" href="/assets/stylesheets/main.e8d9bf0c.min.css">
+      
+        
+        <link rel="stylesheet" href="/assets/stylesheets/palette.e6a45f82.min.css">
+        
+      
+    
+    
+    
+      
+        
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
+        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
+      
+    
+    
+    <script>__md_scope=new URL("/",location),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
+    
+      
+
+    
+    
+  </head>
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    <body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="blue-grey" data-md-color-accent="">
+  
+    
+    
+      <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
+    
+    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
+    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
+    <label class="md-overlay" for="__drawer"></label>
+    <div data-md-component="skip">
+      
+    </div>
+    <div data-md-component="announce">
+      
+    </div>
+    
+      <div data-md-component="outdated" hidden>
+        <aside class="md-banner md-banner--warning">
+          
+        </aside>
+      </div>
+    
+    
+      
+
+<header class="md-header" data-md-component="header">
+  <nav class="md-header__inner md-grid" aria-label="Header">
+    <a href="/." title="SharePoint Interactive Map Webpart" class="md-header__button md-logo" aria-label="SharePoint Interactive Map Webpart" data-md-component="logo">
+      
+  <img src="https://spfx-app.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1629447472494%2FdGmmXf-Id.png%3Fw%3D1000%26h%3D250%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1080&q=75" alt="logo">
+
+    </a>
+    <label class="md-header__button md-icon" for="__drawer">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
+    </label>
+    <div class="md-header__title" data-md-component="header-title">
+      <div class="md-header__ellipsis">
+        <div class="md-header__topic">
+          <span class="md-ellipsis">
+            SharePoint Interactive Map Webpart
+          </span>
+        </div>
+        <div class="md-header__topic" data-md-component="header-topic">
+          <span class="md-ellipsis">
+            
+              
+            
+          </span>
+        </div>
+      </div>
+    </div>
+    
+      <form class="md-header__option" data-md-component="palette">
+        
+          
+          
+          <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="blue-grey" data-md-color-accent=""  aria-label="Switch to light mode"  type="radio" name="__palette" id="__palette_1">
+          
+            <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_2" hidden>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31z"/></svg>
+            </label>
+          
+        
+          
+          
+          <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent=""  aria-label="Switch to dark mode"  type="radio" name="__palette" id="__palette_2">
+          
+            <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22z"/></svg>
+            </label>
+          
+        
+      </form>
+    
+    
+    
+      <label class="md-header__button md-icon" for="__search">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
+      </label>
+      <div class="md-search" data-md-component="search" role="dialog">
+  <label class="md-search__overlay" for="__search"></label>
+  <div class="md-search__inner" role="search">
+    <form class="md-search__form" name="search">
+      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
+      <label class="md-search__icon md-icon" for="__search">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
+      </label>
+      <nav class="md-search__options" aria-label="Search">
+        
+        <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+        </button>
+      </nav>
+      
+    </form>
+    <div class="md-search__output">
+      <div class="md-search__scrollwrap" data-md-scrollfix>
+        <div class="md-search-result" data-md-component="search-result">
+          <div class="md-search-result__meta">
+            Initializing search
+          </div>
+          <ol class="md-search-result__list"></ol>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+    
+    
+      <div class="md-header__source">
+        <a href="https://github.com/SPFxAppDev/sp-map-webpart/" title="Go to repository" class="md-source" data-md-component="source">
+  <div class="md-source__icon md-icon">
+    
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
+  </div>
+  <div class="md-source__repository">
+    GitHub
+  </div>
+</a>
+      </div>
+    
+  </nav>
+  
+</header>
+    
+    <div class="md-container" data-md-component="container">
+      
+      
+        
+          
+            
+<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
+  <div class="md-tabs__inner md-grid">
+    <ul class="md-tabs__list">
+      
+        
+  
+  
+
+
+  <li class="md-tabs__item">
+    <a href="/." class="md-tabs__link">
+      Home
+    </a>
+  </li>
+
+      
+    </ul>
+  </div>
+</nav>
+          
+        
+      
+      <main class="md-main" data-md-component="main">
+        <div class="md-main__inner md-grid">
+          
+            
+              
+              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
+                <div class="md-sidebar__scrollwrap">
+                  <div class="md-sidebar__inner">
+                    
+
+  
+
+
+  
+
+<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
+  <label class="md-nav__title" for="__drawer">
+    <a href="/." title="SharePoint Interactive Map Webpart" class="md-nav__button md-logo" aria-label="SharePoint Interactive Map Webpart" data-md-component="logo">
+      
+  <img src="https://spfx-app.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1629447472494%2FdGmmXf-Id.png%3Fw%3D1000%26h%3D250%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1080&q=75" alt="logo">
+
+    </a>
+    SharePoint Interactive Map Webpart
+  </label>
+  
+    <div class="md-nav__source">
+      <a href="https://github.com/SPFxAppDev/sp-map-webpart/" title="Go to repository" class="md-source" data-md-component="source">
+  <div class="md-source__icon md-icon">
+    
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
+  </div>
+  <div class="md-source__repository">
+    GitHub
+  </div>
+</a>
+    </div>
+  
+  <ul class="md-nav__list" data-md-scrollfix>
+    
+      
+      
+      
+
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="/." class="md-nav__link">
+        Home
+      </a>
+    </li>
+  
+
+    
+  </ul>
+</nav>
+                  </div>
+                </div>
+              </div>
+            
+            
+          
+          <div class="md-content" data-md-component="content">
+            <article class="md-content__inner md-typeset">
+              
+  <h1>404 - Not found</h1>
+
+            </article>
+          </div>
+        </div>
+        
+      </main>
+      
+        <footer class="md-footer">
+  
+  <div class="md-footer-meta md-typeset">
+    <div class="md-footer-meta__inner md-grid">
+      <div class="md-copyright">
+  
+    <div class="md-copyright__highlight">
+      Copyright &copy; 2021 - 2022 Sergej Schwabauer
+    </div>
+  
+  
+    Made with
+    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
+      Material for MkDocs
+    </a>
+  
+</div>
+      
+        <div class="md-social">
+  
+    
+    
+      
+      
+    
+    <a href="https://www.linkedin.com/in/sergej-schwabauer-a26b5267/" target="_blank" rel="noopener" title="www.linkedin.com" class="md-social__link">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
+    </a>
+  
+    
+    
+      
+      
+    
+    <a href="https://github.com/SPFxAppDev" target="_blank" rel="noopener" title="github.com" class="md-social__link">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+    </a>
+  
+    
+    
+      
+      
+    
+    <a href="https://spfx-app.dev/" target="_blank" rel="noopener" title="spfx-app.dev" class="md-social__link">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M35.19 171.1c-46.91 46-46.91 122.9 0 169.8L171.1 476.8c46 46.9 122.9 46.9 169.8 0l135.9-135.9c46.9-46.9 46.9-123.8 0-169.8L340.9 35.19c-46.9-46.91-123.8-46.91-169.8 0L35.19 171.1zM315.5 315.5c-32.9 32.8-86.1 32.8-118.9 0-32.9-32.9-32.9-86.1 0-118.9 32.8-32.9 86-32.9 118.9 0 32.8 32.8 32.8 86 0 118.9z"/></svg>
+    </a>
+  
+</div>
+      
+    </div>
+  </div>
+</footer>
+      
+    </div>
+    <div class="md-dialog" data-md-component="dialog">
+      <div class="md-dialog__inner md-typeset"></div>
+    </div>
+    <script id="__config" type="application/json">{"base": "/", "features": ["toc.integrate", "navigation.tabs", "navigation.sections", "content.code.annotate"], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "search": "/assets/javascripts/workers/search.bd0b6b67.min.js", "version": {"provider": "mike"}}</script>
+    
+    
+      <script src="/assets/javascripts/bundle.8aa65030.min.js"></script>
+      
+    
+  </body>
+</html>

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.da.min.js

@@ -0,0 +1,18 @@
+/*!
+ * Lunr languages, `Danish` language
+ * https://github.com/MihaiValentin/lunr-languages
+ *
+ * Copyright 2014, Mihai Valentin
+ * http://www.mozilla.org/MPL/
+ */
+/*!
+ * based on
+ * Snowball JavaScript Library v0.3
+ * http://code.google.com/p/urim/
+ * http://snowball.tartarus.org/
+ *
+ * Copyright 2010, Oleg Mazko
+ * http://www.mozilla.org/MPL/
+ */
+
+!function(e,r){"function"==typeof define&&define.amd?define(r):"object"==typeof exports?module.exports=r():r()(e.lunr)}(this,function(){return function(e){if(void 0===e)throw new Error("Lunr is not present. Please include / require Lunr before this script.");if(void 0===e.stemmerSupport)throw new Error("Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.");e.da=function(){this.pipeline.reset(),this.pipeline.add(e.da.trimmer,e.da.stopWordFilter,e.da.stemmer),this.searchPipeline&&(this.searchPipeline.reset(),this.searchPipeline.add(e.da.stemmer))},e.da.wordCharacters="A-Za-zªºÀ-ÖØ-öø-ʸˠ-ˤᴀ-ᴥᴬ-ᵜᵢ-ᵥᵫ-ᵷᵹ-ᶾḀ-ỿⁱⁿₐ-ₜKÅℲⅎⅠ-ↈⱠ-ⱿꜢ-ꞇꞋ-ꞭꞰ-ꞷꟷ-ꟿꬰ-ꭚꭜ-ꭤff-stＡ-Ｚａ-ｚ",e.da.trimmer=e.trimmerSupport.generateTrimmer(e.da.wordCharacters),e.Pipeline.registerFunction(e.da.trimmer,"trimmer-da"),e.da.stemmer=function(){var r=e.stemmerSupport.Among,i=e.stemmerSupport.SnowballProgram,n=new function(){function e(){var e,r=f.cursor+3;if(d=f.limit,0<=r&&r<=f.limit){for(a=r;;){if(e=f.cursor,f.in_grouping(w,97,248)){f.cursor=e;break}if(f.cursor=e,e>=f.limit)return;f.cursor++}for(;!f.out_grouping(w,97,248);){if(f.cursor>=f.limit)return;f.cursor++}d=f.cursor,d<a&&(d=a)}}function n(){var e,r;if(f.cursor>=d&&(r=f.limit_backward,f.limit_backward=d,f.ket=f.cursor,e=f.find_among_b(c,32),f.limit_backward=r,e))switch(f.bra=f.cursor,e){case 1:f.slice_del();break;case 2:f.in_grouping_b(p,97,229)&&f.slice_del()}}function t(){var e,r=f.limit-f.cursor;f.cursor>=d&&(e=f.limit_backward,f.limit_backward=d,f.ket=f.cursor,f.find_among_b(l,4)?(f.bra=f.cursor,f.limit_backward=e,f.cursor=f.limit-r,f.cursor>f.limit_backward&&(f.cursor--,f.bra=f.cursor,f.slice_del())):f.limit_backward=e)}function s(){var e,r,i,n=f.limit-f.cursor;if(f.ket=f.cursor,f.eq_s_b(2,"st")&&(f.bra=f.cursor,f.eq_s_b(2,"ig")&&f.slice_del()),f.cursor=f.limit-n,f.cursor>=d&&(r=f.limit_backward,f.limit_backward=d,f.ket=f.cursor,e=f.find_among_b(m,5),f.limit_backward=r,e))switch(f.bra=f.cursor,e){case 1:f.slice_del(),i=f.limit-f.cursor,t(),f.cursor=f.limit-i;break;case 2:f.slice_from("løs")}}function o(){var e;f.cursor>=d&&(e=f.limit_backward,f.limit_backward=d,f.ket=f.cursor,f.out_grouping_b(w,97,248)?(f.bra=f.cursor,u=f.slice_to(u),f.limit_backward=e,f.eq_v_b(u)&&f.slice_del()):f.limit_backward=e)}var a,d,u,c=[new r("hed",-1,1),new r("ethed",0,1),new r("ered",-1,1),new r("e",-1,1),new r("erede",3,1),new r("ende",3,1),new r("erende",5,1),new r("ene",3,1),new r("erne",3,1),new r("ere",3,1),new r("en",-1,1),new r("heden",10,1),new r("eren",10,1),new r("er",-1,1),new r("heder",13,1),new r("erer",13,1),new r("s",-1,2),new r("heds",16,1),new r("es",16,1),new r("endes",18,1),new r("erendes",19,1),new r("enes",18,1),new r("ernes",18,1),new r("eres",18,1),new r("ens",16,1),new r("hedens",24,1),new r("erens",24,1),new r("ers",16,1),new r("ets",16,1),new r("erets",28,1),new r("et",-1,1),new r("eret",30,1)],l=[new r("gd",-1,-1),new r("dt",-1,-1),new r("gt",-1,-1),new r("kt",-1,-1)],m=[new r("ig",-1,1),new r("lig",0,1),new r("elig",1,1),new r("els",-1,1),new r("løst",-1,2)],w=[17,65,16,1,0,0,0,0,0,0,0,0,0,0,0,0,48,0,128],p=[239,254,42,3,0,0,0,0,0,0,0,0,0,0,0,0,16],f=new i;this.setCurrent=function(e){f.setCurrent(e)},this.getCurrent=function(){return f.getCurrent()},this.stem=function(){var r=f.cursor;return e(),f.limit_backward=r,f.cursor=f.limit,n(),f.cursor=f.limit,t(),f.cursor=f.limit,s(),f.cursor=f.limit,o(),!0}};return function(e){return"function"==typeof e.update?e.update(function(e){return n.setCurrent(e),n.stem(),n.getCurrent()}):(n.setCurrent(e),n.stem(),n.getCurrent())}}(),e.Pipeline.registerFunction(e.da.stemmer,"stemmer-da"),e.da.stopWordFilter=e.generateStopWordFilter("ad af alle alt anden at blev blive bliver da de dem den denne der deres det dette dig din disse dog du efter eller en end er et for fra ham han hans har havde have hende hendes her hos hun hvad hvis hvor i ikke ind jeg jer jo kunne man mange med meget men mig min mine mit mod ned noget nogle nu når og også om op os over på selv sig sin sine sit skal skulle som sådan thi til ud under var vi vil ville vor være været".split(" ")),e.Pipeline.registerFunction(e.da.stopWordFilter,"stopWordFilter-da")}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.hi.min.js

@@ -0,0 +1 @@
+!function(e,r){"function"==typeof define&&define.amd?define(r):"object"==typeof exports?module.exports=r():r()(e.lunr)}(this,function(){return function(e){if(void 0===e)throw new Error("Lunr is not present. Please include / require Lunr before this script.");if(void 0===e.stemmerSupport)throw new Error("Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.");e.hi=function(){this.pipeline.reset(),this.pipeline.add(e.hi.trimmer,e.hi.stopWordFilter,e.hi.stemmer),this.searchPipeline&&(this.searchPipeline.reset(),this.searchPipeline.add(e.hi.stemmer))},e.hi.wordCharacters="ऀ-ःऄ-एऐ-टठ-यर-िी-ॏॐ-य़ॠ-९॰-ॿa-zA-Zａ-ｚＡ-Ｚ0-9０-９",e.hi.trimmer=e.trimmerSupport.generateTrimmer(e.hi.wordCharacters),e.Pipeline.registerFunction(e.hi.trimmer,"trimmer-hi"),e.hi.stopWordFilter=e.generateStopWordFilter("अत अपना अपनी अपने अभी अंदर आदि आप इत्यादि इन इनका इन्हीं इन्हें इन्हों इस इसका इसकी इसके इसमें इसी इसे उन उनका उनकी उनके उनको उन्हीं उन्हें उन्हों उस उसके उसी उसे एक एवं एस ऐसे और कई कर करता करते करना करने करें कहते कहा का काफ़ी कि कितना किन्हें किन्हों किया किर किस किसी किसे की कुछ कुल के को कोई कौन कौनसा गया घर जब जहाँ जा जितना जिन जिन्हें जिन्हों जिस जिसे जीधर जैसा जैसे जो तक तब तरह तिन तिन्हें तिन्हों तिस तिसे तो था थी थे दबारा दिया दुसरा दूसरे दो द्वारा न नके नहीं ना निहायत नीचे ने पर पहले पूरा पे फिर बनी बही बहुत बाद बाला बिलकुल भी भीतर मगर मानो मे में यदि यह यहाँ यही या यिह ये रखें रहा रहे ऱ्वासा लिए लिये लेकिन व वग़ैरह वर्ग वह वहाँ वहीं वाले वुह वे वो सकता सकते सबसे सभी साथ साबुत साभ सारा से सो संग ही हुआ हुई हुए है हैं हो होता होती होते होना होने".split(" ")),e.hi.stemmer=function(){return function(e){return"function"==typeof e.update?e.update(function(e){return e}):e}}();var r=e.wordcut;r.init(),e.hi.tokenizer=function(i){if(!arguments.length||null==i||void 0==i)return[];if(Array.isArray(i))return i.map(function(r){return isLunr2?new e.Token(r.toLowerCase()):r.toLowerCase()});var t=i.toString().toLowerCase().replace(/^\s+/,"");return r.cut(t).split("|")},e.Pipeline.registerFunction(e.hi.stemmer,"stemmer-hi"),e.Pipeline.registerFunction(e.hi.stopWordFilter,"stopWordFilter-hi")}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.ja.min.js

@@ -0,0 +1 @@
+!function(e,r){"function"==typeof define&&define.amd?define(r):"object"==typeof exports?module.exports=r():r()(e.lunr)}(this,function(){return function(e){if(void 0===e)throw new Error("Lunr is not present. Please include / require Lunr before this script.");if(void 0===e.stemmerSupport)throw new Error("Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.");var r="2"==e.version[0];e.ja=function(){this.pipeline.reset(),this.pipeline.add(e.ja.trimmer,e.ja.stopWordFilter,e.ja.stemmer),r?this.tokenizer=e.ja.tokenizer:(e.tokenizer&&(e.tokenizer=e.ja.tokenizer),this.tokenizerFn&&(this.tokenizerFn=e.ja.tokenizer))};var t=new e.TinySegmenter;e.ja.tokenizer=function(i){var n,o,s,p,a,u,m,l,c,f;if(!arguments.length||null==i||void 0==i)return[];if(Array.isArray(i))return i.map(function(t){return r?new e.Token(t.toLowerCase()):t.toLowerCase()});for(o=i.toString().toLowerCase().replace(/^\s+/,""),n=o.length-1;n>=0;n--)if(/\S/.test(o.charAt(n))){o=o.substring(0,n+1);break}for(a=[],s=o.length,c=0,l=0;c<=s;c++)if(u=o.charAt(c),m=c-l,u.match(/\s/)||c==s){if(m>0)for(p=t.segment(o.slice(l,c)).filter(function(e){return!!e}),f=l,n=0;n<p.length;n++)r?a.push(new e.Token(p[n],{position:[f,p[n].length],index:a.length})):a.push(p[n]),f+=p[n].length;l=c+1}return a},e.ja.stemmer=function(){return function(e){return e}}(),e.Pipeline.registerFunction(e.ja.stemmer,"stemmer-ja"),e.ja.wordCharacters="一二三四五六七八九十百千万億兆一-龠々〆ヵヶぁ-んァ-ヴーｱ-ﾝﾞa-zA-Zａ-ｚＡ-Ｚ0-9０-９",e.ja.trimmer=e.trimmerSupport.generateTrimmer(e.ja.wordCharacters),e.Pipeline.registerFunction(e.ja.trimmer,"trimmer-ja"),e.ja.stopWordFilter=e.generateStopWordFilter("これ それ あれ この その あの ここ そこ あそこ こちら どこ だれ なに なん 何 私 貴方 貴方方 我々 私達 あの人 あのかた 彼女 彼 です あります おります います は が の に を で え から まで より も どの と し それで しかし".split(" ")),e.Pipeline.registerFunction(e.ja.stopWordFilter,"stopWordFilter-ja"),e.jp=e.ja,e.Pipeline.registerFunction(e.jp.stemmer,"stemmer-jp"),e.Pipeline.registerFunction(e.jp.trimmer,"trimmer-jp"),e.Pipeline.registerFunction(e.jp.stopWordFilter,"stopWordFilter-jp")}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.jp.min.js

@@ -0,0 +1 @@
+module.exports=require("./lunr.ja");

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.multi.min.js

@@ -0,0 +1 @@
+!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():t()(e.lunr)}(this,function(){return function(e){e.multiLanguage=function(){for(var t=Array.prototype.slice.call(arguments),i=t.join("-"),r="",n=[],s=[],p=0;p<t.length;++p)"en"==t[p]?(r+="\\w",n.unshift(e.stopWordFilter),n.push(e.stemmer),s.push(e.stemmer)):(r+=e[t[p]].wordCharacters,e[t[p]].stopWordFilter&&n.unshift(e[t[p]].stopWordFilter),e[t[p]].stemmer&&(n.push(e[t[p]].stemmer),s.push(e[t[p]].stemmer)));var o=e.trimmerSupport.generateTrimmer(r);return e.Pipeline.registerFunction(o,"lunr-multi-trimmer-"+i),n.unshift(o),function(){this.pipeline.reset(),this.pipeline.add.apply(this.pipeline,n),this.searchPipeline&&(this.searchPipeline.reset(),this.searchPipeline.add.apply(this.searchPipeline,s))}}}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.no.min.js

@@ -0,0 +1,18 @@
+/*!
+ * Lunr languages, `Norwegian` language
+ * https://github.com/MihaiValentin/lunr-languages
+ *
+ * Copyright 2014, Mihai Valentin
+ * http://www.mozilla.org/MPL/
+ */
+/*!
+ * based on
+ * Snowball JavaScript Library v0.3
+ * http://code.google.com/p/urim/
+ * http://snowball.tartarus.org/
+ *
+ * Copyright 2010, Oleg Mazko
+ * http://www.mozilla.org/MPL/
+ */
+
+!function(e,r){"function"==typeof define&&define.amd?define(r):"object"==typeof exports?module.exports=r():r()(e.lunr)}(this,function(){return function(e){if(void 0===e)throw new Error("Lunr is not present. Please include / require Lunr before this script.");if(void 0===e.stemmerSupport)throw new Error("Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.");e.no=function(){this.pipeline.reset(),this.pipeline.add(e.no.trimmer,e.no.stopWordFilter,e.no.stemmer),this.searchPipeline&&(this.searchPipeline.reset(),this.searchPipeline.add(e.no.stemmer))},e.no.wordCharacters="A-Za-zªºÀ-ÖØ-öø-ʸˠ-ˤᴀ-ᴥᴬ-ᵜᵢ-ᵥᵫ-ᵷᵹ-ᶾḀ-ỿⁱⁿₐ-ₜKÅℲⅎⅠ-ↈⱠ-ⱿꜢ-ꞇꞋ-ꞭꞰ-ꞷꟷ-ꟿꬰ-ꭚꭜ-ꭤff-stＡ-Ｚａ-ｚ",e.no.trimmer=e.trimmerSupport.generateTrimmer(e.no.wordCharacters),e.Pipeline.registerFunction(e.no.trimmer,"trimmer-no"),e.no.stemmer=function(){var r=e.stemmerSupport.Among,n=e.stemmerSupport.SnowballProgram,i=new function(){function e(){var e,r=w.cursor+3;if(a=w.limit,0<=r||r<=w.limit){for(s=r;;){if(e=w.cursor,w.in_grouping(d,97,248)){w.cursor=e;break}if(e>=w.limit)return;w.cursor=e+1}for(;!w.out_grouping(d,97,248);){if(w.cursor>=w.limit)return;w.cursor++}a=w.cursor,a<s&&(a=s)}}function i(){var e,r,n;if(w.cursor>=a&&(r=w.limit_backward,w.limit_backward=a,w.ket=w.cursor,e=w.find_among_b(m,29),w.limit_backward=r,e))switch(w.bra=w.cursor,e){case 1:w.slice_del();break;case 2:n=w.limit-w.cursor,w.in_grouping_b(c,98,122)?w.slice_del():(w.cursor=w.limit-n,w.eq_s_b(1,"k")&&w.out_grouping_b(d,97,248)&&w.slice_del());break;case 3:w.slice_from("er")}}function t(){var e,r=w.limit-w.cursor;w.cursor>=a&&(e=w.limit_backward,w.limit_backward=a,w.ket=w.cursor,w.find_among_b(u,2)?(w.bra=w.cursor,w.limit_backward=e,w.cursor=w.limit-r,w.cursor>w.limit_backward&&(w.cursor--,w.bra=w.cursor,w.slice_del())):w.limit_backward=e)}function o(){var e,r;w.cursor>=a&&(r=w.limit_backward,w.limit_backward=a,w.ket=w.cursor,e=w.find_among_b(l,11),e?(w.bra=w.cursor,w.limit_backward=r,1==e&&w.slice_del()):w.limit_backward=r)}var s,a,m=[new r("a",-1,1),new r("e",-1,1),new r("ede",1,1),new r("ande",1,1),new r("ende",1,1),new r("ane",1,1),new r("ene",1,1),new r("hetene",6,1),new r("erte",1,3),new r("en",-1,1),new r("heten",9,1),new r("ar",-1,1),new r("er",-1,1),new r("heter",12,1),new r("s",-1,2),new r("as",14,1),new r("es",14,1),new r("edes",16,1),new r("endes",16,1),new r("enes",16,1),new r("hetenes",19,1),new r("ens",14,1),new r("hetens",21,1),new r("ers",14,1),new r("ets",14,1),new r("et",-1,1),new r("het",25,1),new r("ert",-1,3),new r("ast",-1,1)],u=[new r("dt",-1,-1),new r("vt",-1,-1)],l=[new r("leg",-1,1),new r("eleg",0,1),new r("ig",-1,1),new r("eig",2,1),new r("lig",2,1),new r("elig",4,1),new r("els",-1,1),new r("lov",-1,1),new r("elov",7,1),new r("slov",7,1),new r("hetslov",9,1)],d=[17,65,16,1,0,0,0,0,0,0,0,0,0,0,0,0,48,0,128],c=[119,125,149,1],w=new n;this.setCurrent=function(e){w.setCurrent(e)},this.getCurrent=function(){return w.getCurrent()},this.stem=function(){var r=w.cursor;return e(),w.limit_backward=r,w.cursor=w.limit,i(),w.cursor=w.limit,t(),w.cursor=w.limit,o(),!0}};return function(e){return"function"==typeof e.update?e.update(function(e){return i.setCurrent(e),i.stem(),i.getCurrent()}):(i.setCurrent(e),i.stem(),i.getCurrent())}}(),e.Pipeline.registerFunction(e.no.stemmer,"stemmer-no"),e.no.stopWordFilter=e.generateStopWordFilter("alle at av bare begge ble blei bli blir blitt både båe da de deg dei deim deira deires dem den denne der dere deres det dette di din disse ditt du dykk dykkar då eg ein eit eitt eller elles en enn er et ett etter for fordi fra før ha hadde han hans har hennar henne hennes her hjå ho hoe honom hoss hossen hun hva hvem hver hvilke hvilken hvis hvor hvordan hvorfor i ikke ikkje ikkje ingen ingi inkje inn inni ja jeg kan kom korleis korso kun kunne kva kvar kvarhelst kven kvi kvifor man mange me med medan meg meget mellom men mi min mine mitt mot mykje ned no noe noen noka noko nokon nokor nokre nå når og også om opp oss over på samme seg selv si si sia sidan siden sin sine sitt sjøl skal skulle slik so som som somme somt så sånn til um upp ut uten var vart varte ved vere verte vi vil ville vore vors vort vår være være vært å".split(" ")),e.Pipeline.registerFunction(e.no.stopWordFilter,"stopWordFilter-no")}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.stemmer.support.min.js

@@ -0,0 +1 @@
+!function(r,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():t()(r.lunr)}(this,function(){return function(r){r.stemmerSupport={Among:function(r,t,i,s){if(this.toCharArray=function(r){for(var t=r.length,i=new Array(t),s=0;s<t;s++)i[s]=r.charCodeAt(s);return i},!r&&""!=r||!t&&0!=t||!i)throw"Bad Among initialisation: s:"+r+", substring_i: "+t+", result: "+i;this.s_size=r.length,this.s=this.toCharArray(r),this.substring_i=t,this.result=i,this.method=s},SnowballProgram:function(){var r;return{bra:0,ket:0,limit:0,cursor:0,limit_backward:0,setCurrent:function(t){r=t,this.cursor=0,this.limit=t.length,this.limit_backward=0,this.bra=this.cursor,this.ket=this.limit},getCurrent:function(){var t=r;return r=null,t},in_grouping:function(t,i,s){if(this.cursor<this.limit){var e=r.charCodeAt(this.cursor);if(e<=s&&e>=i&&(e-=i,t[e>>3]&1<<(7&e)))return this.cursor++,!0}return!1},in_grouping_b:function(t,i,s){if(this.cursor>this.limit_backward){var e=r.charCodeAt(this.cursor-1);if(e<=s&&e>=i&&(e-=i,t[e>>3]&1<<(7&e)))return this.cursor--,!0}return!1},out_grouping:function(t,i,s){if(this.cursor<this.limit){var e=r.charCodeAt(this.cursor);if(e>s||e<i)return this.cursor++,!0;if(e-=i,!(t[e>>3]&1<<(7&e)))return this.cursor++,!0}return!1},out_grouping_b:function(t,i,s){if(this.cursor>this.limit_backward){var e=r.charCodeAt(this.cursor-1);if(e>s||e<i)return this.cursor--,!0;if(e-=i,!(t[e>>3]&1<<(7&e)))return this.cursor--,!0}return!1},eq_s:function(t,i){if(this.limit-this.cursor<t)return!1;for(var s=0;s<t;s++)if(r.charCodeAt(this.cursor+s)!=i.charCodeAt(s))return!1;return this.cursor+=t,!0},eq_s_b:function(t,i){if(this.cursor-this.limit_backward<t)return!1;for(var s=0;s<t;s++)if(r.charCodeAt(this.cursor-t+s)!=i.charCodeAt(s))return!1;return this.cursor-=t,!0},find_among:function(t,i){for(var s=0,e=i,n=this.cursor,u=this.limit,o=0,h=0,c=!1;;){for(var a=s+(e-s>>1),f=0,l=o<h?o:h,_=t[a],m=l;m<_.s_size;m++){if(n+l==u){f=-1;break}if(f=r.charCodeAt(n+l)-_.s[m])break;l++}if(f<0?(e=a,h=l):(s=a,o=l),e-s<=1){if(s>0||e==s||c)break;c=!0}}for(;;){var _=t[s];if(o>=_.s_size){if(this.cursor=n+_.s_size,!_.method)return _.result;var b=_.method();if(this.cursor=n+_.s_size,b)return _.result}if((s=_.substring_i)<0)return 0}},find_among_b:function(t,i){for(var s=0,e=i,n=this.cursor,u=this.limit_backward,o=0,h=0,c=!1;;){for(var a=s+(e-s>>1),f=0,l=o<h?o:h,_=t[a],m=_.s_size-1-l;m>=0;m--){if(n-l==u){f=-1;break}if(f=r.charCodeAt(n-1-l)-_.s[m])break;l++}if(f<0?(e=a,h=l):(s=a,o=l),e-s<=1){if(s>0||e==s||c)break;c=!0}}for(;;){var _=t[s];if(o>=_.s_size){if(this.cursor=n-_.s_size,!_.method)return _.result;var b=_.method();if(this.cursor=n-_.s_size,b)return _.result}if((s=_.substring_i)<0)return 0}},replace_s:function(t,i,s){var e=s.length-(i-t),n=r.substring(0,t),u=r.substring(i);return r=n+s+u,this.limit+=e,this.cursor>=i?this.cursor+=e:this.cursor>t&&(this.cursor=t),e},slice_check:function(){if(this.bra<0||this.bra>this.ket||this.ket>this.limit||this.limit>r.length)throw"faulty slice operation"},slice_from:function(r){this.slice_check(),this.replace_s(this.bra,this.ket,r)},slice_del:function(){this.slice_from("")},insert:function(r,t,i){var s=this.replace_s(r,t,i);r<=this.bra&&(this.bra+=s),r<=this.ket&&(this.ket+=s)},slice_to:function(){return this.slice_check(),r.substring(this.bra,this.ket)},eq_v_b:function(r){return this.eq_s_b(r.length,r)}}}},r.trimmerSupport={generateTrimmer:function(r){var t=new RegExp("^[^"+r+"]+"),i=new RegExp("[^"+r+"]+$");return function(r){return"function"==typeof r.update?r.update(function(r){return r.replace(t,"").replace(i,"")}):r.replace(t,"").replace(i,"")}}}}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.sv.min.js

@@ -0,0 +1,18 @@
+/*!
+ * Lunr languages, `Swedish` language
+ * https://github.com/MihaiValentin/lunr-languages
+ *
+ * Copyright 2014, Mihai Valentin
+ * http://www.mozilla.org/MPL/
+ */
+/*!
+ * based on
+ * Snowball JavaScript Library v0.3
+ * http://code.google.com/p/urim/
+ * http://snowball.tartarus.org/
+ *
+ * Copyright 2010, Oleg Mazko
+ * http://www.mozilla.org/MPL/
+ */
+
+!function(e,r){"function"==typeof define&&define.amd?define(r):"object"==typeof exports?module.exports=r():r()(e.lunr)}(this,function(){return function(e){if(void 0===e)throw new Error("Lunr is not present. Please include / require Lunr before this script.");if(void 0===e.stemmerSupport)throw new Error("Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.");e.sv=function(){this.pipeline.reset(),this.pipeline.add(e.sv.trimmer,e.sv.stopWordFilter,e.sv.stemmer),this.searchPipeline&&(this.searchPipeline.reset(),this.searchPipeline.add(e.sv.stemmer))},e.sv.wordCharacters="A-Za-zªºÀ-ÖØ-öø-ʸˠ-ˤᴀ-ᴥᴬ-ᵜᵢ-ᵥᵫ-ᵷᵹ-ᶾḀ-ỿⁱⁿₐ-ₜKÅℲⅎⅠ-ↈⱠ-ⱿꜢ-ꞇꞋ-ꞭꞰ-ꞷꟷ-ꟿꬰ-ꭚꭜ-ꭤff-stＡ-Ｚａ-ｚ",e.sv.trimmer=e.trimmerSupport.generateTrimmer(e.sv.wordCharacters),e.Pipeline.registerFunction(e.sv.trimmer,"trimmer-sv"),e.sv.stemmer=function(){var r=e.stemmerSupport.Among,n=e.stemmerSupport.SnowballProgram,t=new function(){function e(){var e,r=w.cursor+3;if(o=w.limit,0<=r||r<=w.limit){for(a=r;;){if(e=w.cursor,w.in_grouping(l,97,246)){w.cursor=e;break}if(w.cursor=e,w.cursor>=w.limit)return;w.cursor++}for(;!w.out_grouping(l,97,246);){if(w.cursor>=w.limit)return;w.cursor++}o=w.cursor,o<a&&(o=a)}}function t(){var e,r=w.limit_backward;if(w.cursor>=o&&(w.limit_backward=o,w.cursor=w.limit,w.ket=w.cursor,e=w.find_among_b(u,37),w.limit_backward=r,e))switch(w.bra=w.cursor,e){case 1:w.slice_del();break;case 2:w.in_grouping_b(d,98,121)&&w.slice_del()}}function i(){var e=w.limit_backward;w.cursor>=o&&(w.limit_backward=o,w.cursor=w.limit,w.find_among_b(c,7)&&(w.cursor=w.limit,w.ket=w.cursor,w.cursor>w.limit_backward&&(w.bra=--w.cursor,w.slice_del())),w.limit_backward=e)}function s(){var e,r;if(w.cursor>=o){if(r=w.limit_backward,w.limit_backward=o,w.cursor=w.limit,w.ket=w.cursor,e=w.find_among_b(m,5))switch(w.bra=w.cursor,e){case 1:w.slice_del();break;case 2:w.slice_from("lös");break;case 3:w.slice_from("full")}w.limit_backward=r}}var a,o,u=[new r("a",-1,1),new r("arna",0,1),new r("erna",0,1),new r("heterna",2,1),new r("orna",0,1),new r("ad",-1,1),new r("e",-1,1),new r("ade",6,1),new r("ande",6,1),new r("arne",6,1),new r("are",6,1),new r("aste",6,1),new r("en",-1,1),new r("anden",12,1),new r("aren",12,1),new r("heten",12,1),new r("ern",-1,1),new r("ar",-1,1),new r("er",-1,1),new r("heter",18,1),new r("or",-1,1),new r("s",-1,2),new r("as",21,1),new r("arnas",22,1),new r("ernas",22,1),new r("ornas",22,1),new r("es",21,1),new r("ades",26,1),new r("andes",26,1),new r("ens",21,1),new r("arens",29,1),new r("hetens",29,1),new r("erns",21,1),new r("at",-1,1),new r("andet",-1,1),new r("het",-1,1),new r("ast",-1,1)],c=[new r("dd",-1,-1),new r("gd",-1,-1),new r("nn",-1,-1),new r("dt",-1,-1),new r("gt",-1,-1),new r("kt",-1,-1),new r("tt",-1,-1)],m=[new r("ig",-1,1),new r("lig",0,1),new r("els",-1,1),new r("fullt",-1,3),new r("löst",-1,2)],l=[17,65,16,1,0,0,0,0,0,0,0,0,0,0,0,0,24,0,32],d=[119,127,149],w=new n;this.setCurrent=function(e){w.setCurrent(e)},this.getCurrent=function(){return w.getCurrent()},this.stem=function(){var r=w.cursor;return e(),w.limit_backward=r,w.cursor=w.limit,t(),w.cursor=w.limit,i(),w.cursor=w.limit,s(),!0}};return function(e){return"function"==typeof e.update?e.update(function(e){return t.setCurrent(e),t.stem(),t.getCurrent()}):(t.setCurrent(e),t.stem(),t.getCurrent())}}(),e.Pipeline.registerFunction(e.sv.stemmer,"stemmer-sv"),e.sv.stopWordFilter=e.generateStopWordFilter("alla allt att av blev bli blir blivit de dem den denna deras dess dessa det detta dig din dina ditt du där då efter ej eller en er era ert ett från för ha hade han hans har henne hennes hon honom hur här i icke ingen inom inte jag ju kan kunde man med mellan men mig min mina mitt mot mycket ni nu när någon något några och om oss på samma sedan sig sin sina sitta själv skulle som så sådan sådana sådant till under upp ut utan vad var vara varför varit varje vars vart vem vi vid vilka vilkas vilken vilket vår våra vårt än är åt över".split(" ")),e.Pipeline.registerFunction(e.sv.stopWordFilter,"stopWordFilter-sv")}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.th.min.js

@@ -0,0 +1 @@
+!function(e,r){"function"==typeof define&&define.amd?define(r):"object"==typeof exports?module.exports=r():r()(e.lunr)}(this,function(){return function(e){if(void 0===e)throw new Error("Lunr is not present. Please include / require Lunr before this script.");if(void 0===e.stemmerSupport)throw new Error("Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.");var r="2"==e.version[0];e.th=function(){this.pipeline.reset(),this.pipeline.add(e.th.trimmer),r?this.tokenizer=e.th.tokenizer:(e.tokenizer&&(e.tokenizer=e.th.tokenizer),this.tokenizerFn&&(this.tokenizerFn=e.th.tokenizer))},e.th.wordCharacters="[฀-๿]",e.th.trimmer=e.trimmerSupport.generateTrimmer(e.th.wordCharacters),e.Pipeline.registerFunction(e.th.trimmer,"trimmer-th");var t=e.wordcut;t.init(),e.th.tokenizer=function(i){if(!arguments.length||null==i||void 0==i)return[];if(Array.isArray(i))return i.map(function(t){return r?new e.Token(t):t});var n=i.toString().replace(/^\s+/,"");return t.cut(n).split("|")}}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.vi.min.js

@@ -0,0 +1 @@
+!function(e,r){"function"==typeof define&&define.amd?define(r):"object"==typeof exports?module.exports=r():r()(e.lunr)}(this,function(){return function(e){if(void 0===e)throw new Error("Lunr is not present. Please include / require Lunr before this script.");if(void 0===e.stemmerSupport)throw new Error("Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.");e.vi=function(){this.pipeline.reset(),this.pipeline.add(e.vi.stopWordFilter,e.vi.trimmer)},e.vi.wordCharacters="[A-Za-ẓ̀͐́͑̉̃̓ÂâÊêÔôĂ-ăĐ-đƠ-ơƯ-ư]",e.vi.trimmer=e.trimmerSupport.generateTrimmer(e.vi.wordCharacters),e.Pipeline.registerFunction(e.vi.trimmer,"trimmer-vi"),e.vi.stopWordFilter=e.generateStopWordFilter("là cái nhưng mà".split(" "))}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/min/lunr.zh.min.js

@@ -0,0 +1 @@
+!function(e,r){"function"==typeof define&&define.amd?define(r):"object"==typeof exports?module.exports=r(require("nodejieba")):r()(e.lunr)}(this,function(e){return function(r,t){if(void 0===r)throw new Error("Lunr is not present. Please include / require Lunr before this script.");if(void 0===r.stemmerSupport)throw new Error("Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.");var i="2"==r.version[0];r.zh=function(){this.pipeline.reset(),this.pipeline.add(r.zh.trimmer,r.zh.stopWordFilter,r.zh.stemmer),i?this.tokenizer=r.zh.tokenizer:(r.tokenizer&&(r.tokenizer=r.zh.tokenizer),this.tokenizerFn&&(this.tokenizerFn=r.zh.tokenizer))},r.zh.tokenizer=function(n){if(!arguments.length||null==n||void 0==n)return[];if(Array.isArray(n))return n.map(function(e){return i?new r.Token(e.toLowerCase()):e.toLowerCase()});t&&e.load(t);var o=n.toString().trim().toLowerCase(),s=[];e.cut(o,!0).forEach(function(e){s=s.concat(e.split(" "))}),s=s.filter(function(e){return!!e});var u=0;return s.map(function(e,t){if(i){var n=o.indexOf(e,u),s={};return s.position=[n,e.length],s.index=t,u=n,new r.Token(e,s)}return e})},r.zh.wordCharacters="\\w一-龥",r.zh.trimmer=r.trimmerSupport.generateTrimmer(r.zh.wordCharacters),r.Pipeline.registerFunction(r.zh.trimmer,"trimmer-zh"),r.zh.stemmer=function(){return function(e){return e}}(),r.Pipeline.registerFunction(r.zh.stemmer,"stemmer-zh"),r.zh.stopWordFilter=r.generateStopWordFilter("的 一 不 在 人 有 是 为 以 于 上 他 而 后 之 来 及 了 因 下 可 到 由 这 与 也 此 但 并 个 其 已 无 小 我 们 起 最 再 今 去 好 只 又 或 很 亦 某 把 那 你 乃 它 吧 被 比 别 趁 当 从 到 得 打 凡 儿 尔 该 各 给 跟 和 何 还 即 几 既 看 据 距 靠 啦 了 另 么 每 们 嘛 拿 哪 那 您 凭 且 却 让 仍 啥 如 若 使 谁 虽 随 同 所 她 哇 嗡 往 哪 些 向 沿 哟 用 于 咱 则 怎 曾 至 致 着 诸 自".split(" ")),r.Pipeline.registerFunction(r.zh.stopWordFilter,"stopWordFilter-zh")}});

samples/react-interactive-map/docs/site/assets/javascripts/lunr/tinyseg.js

@@ -0,0 +1,206 @@
+/**
+ * export the module via AMD, CommonJS or as a browser global
+ * Export code from https://github.com/umdjs/umd/blob/master/returnExports.js
+ */
+;(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(factory)
+    } else if (typeof exports === 'object') {
+        /**
+         * Node. Does not work with strict CommonJS, but
+         * only CommonJS-like environments that support module.exports,
+         * like Node.
+         */
+        module.exports = factory()
+    } else {
+        // Browser globals (root is window)
+        factory()(root.lunr);
+    }
+}(this, function () {
+    /**
+     * Just return a value to define the module export.
+     * This example returns an object, but the module
+     * can return a function as the exported value.
+     */
+
+    return function(lunr) {
+        // TinySegmenter 0.1 -- Super compact Japanese tokenizer in Javascript
+        // (c) 2008 Taku Kudo <taku@chasen.org>
+        // TinySegmenter is freely distributable under the terms of a new BSD licence.
+        // For details, see http://chasen.org/~taku/software/TinySegmenter/LICENCE.txt
+
+        function TinySegmenter() {
+          var patterns = {
+            "[一二三四五六七八九十百千万億兆]":"M",
+            "[一-龠々〆ヵヶ]":"H",
+            "[ぁ-ん]":"I",
+            "[ァ-ヴーｱ-ﾝﾞｰ]":"K",
+            "[a-zA-Zａ-ｚＡ-Ｚ]":"A",
+            "[0-9０-９]":"N"
+          }
+          this.chartype_ = [];
+          for (var i in patterns) {
+            var regexp = new RegExp(i);
+            this.chartype_.push([regexp, patterns[i]]);
+          }
+
+          this.BIAS__ = -332
+          this.BC1__ = {"HH":6,"II":2461,"KH":406,"OH":-1378};
+          this.BC2__ = {"AA":-3267,"AI":2744,"AN":-878,"HH":-4070,"HM":-1711,"HN":4012,"HO":3761,"IA":1327,"IH":-1184,"II":-1332,"IK":1721,"IO":5492,"KI":3831,"KK":-8741,"MH":-3132,"MK":3334,"OO":-2920};
+          this.BC3__ = {"HH":996,"HI":626,"HK":-721,"HN":-1307,"HO":-836,"IH":-301,"KK":2762,"MK":1079,"MM":4034,"OA":-1652,"OH":266};
+          this.BP1__ = {"BB":295,"OB":304,"OO":-125,"UB":352};
+          this.BP2__ = {"BO":60,"OO":-1762};
+          this.BQ1__ = {"BHH":1150,"BHM":1521,"BII":-1158,"BIM":886,"BMH":1208,"BNH":449,"BOH":-91,"BOO":-2597,"OHI":451,"OIH":-296,"OKA":1851,"OKH":-1020,"OKK":904,"OOO":2965};
+          this.BQ2__ = {"BHH":118,"BHI":-1159,"BHM":466,"BIH":-919,"BKK":-1720,"BKO":864,"OHH":-1139,"OHM":-181,"OIH":153,"UHI":-1146};
+          this.BQ3__ = {"BHH":-792,"BHI":2664,"BII":-299,"BKI":419,"BMH":937,"BMM":8335,"BNN":998,"BOH":775,"OHH":2174,"OHM":439,"OII":280,"OKH":1798,"OKI":-793,"OKO":-2242,"OMH":-2402,"OOO":11699};
+          this.BQ4__ = {"BHH":-3895,"BIH":3761,"BII":-4654,"BIK":1348,"BKK":-1806,"BMI":-3385,"BOO":-12396,"OAH":926,"OHH":266,"OHK":-2036,"ONN":-973};
+          this.BW1__ = {",と":660,",同":727,"B1あ":1404,"B1同":542,"、と":660,"、同":727,"」と":1682,"あっ":1505,"いう":1743,"いっ":-2055,"いる":672,"うし":-4817,"うん":665,"から":3472,"がら":600,"こう":-790,"こと":2083,"こん":-1262,"さら":-4143,"さん":4573,"した":2641,"して":1104,"すで":-3399,"そこ":1977,"それ":-871,"たち":1122,"ため":601,"った":3463,"つい":-802,"てい":805,"てき":1249,"でき":1127,"です":3445,"では":844,"とい":-4915,"とみ":1922,"どこ":3887,"ない":5713,"なっ":3015,"など":7379,"なん":-1113,"にし":2468,"には":1498,"にも":1671,"に対":-912,"の一":-501,"の中":741,"ませ":2448,"まで":1711,"まま":2600,"まる":-2155,"やむ":-1947,"よっ":-2565,"れた":2369,"れで":-913,"をし":1860,"を見":731,"亡く":-1886,"京都":2558,"取り":-2784,"大き":-2604,"大阪":1497,"平方":-2314,"引き":-1336,"日本":-195,"本当":-2423,"毎日":-2113,"目指":-724,"Ｂ１あ":1404,"Ｂ１同":542,"｣と":1682};
+          this.BW2__ = {"..":-11822,"11":-669,"――":-5730,"−−":-13175,"いう":-1609,"うか":2490,"かし":-1350,"かも":-602,"から":-7194,"かれ":4612,"がい":853,"がら":-3198,"きた":1941,"くな":-1597,"こと":-8392,"この":-4193,"させ":4533,"され":13168,"さん":-3977,"しい":-1819,"しか":-545,"した":5078,"して":972,"しな":939,"その":-3744,"たい":-1253,"たた":-662,"ただ":-3857,"たち":-786,"たと":1224,"たは":-939,"った":4589,"って":1647,"っと":-2094,"てい":6144,"てき":3640,"てく":2551,"ては":-3110,"ても":-3065,"でい":2666,"でき":-1528,"でし":-3828,"です":-4761,"でも":-4203,"とい":1890,"とこ":-1746,"とと":-2279,"との":720,"とみ":5168,"とも":-3941,"ない":-2488,"なが":-1313,"など":-6509,"なの":2614,"なん":3099,"にお":-1615,"にし":2748,"にな":2454,"によ":-7236,"に対":-14943,"に従":-4688,"に関":-11388,"のか":2093,"ので":-7059,"のに":-6041,"のの":-6125,"はい":1073,"はが":-1033,"はず":-2532,"ばれ":1813,"まし":-1316,"まで":-6621,"まれ":5409,"めて":-3153,"もい":2230,"もの":-10713,"らか":-944,"らし":-1611,"らに":-1897,"りし":651,"りま":1620,"れた":4270,"れて":849,"れば":4114,"ろう":6067,"われ":7901,"を通":-11877,"んだ":728,"んな":-4115,"一人":602,"一方":-1375,"一日":970,"一部":-1051,"上が":-4479,"会社":-1116,"出て":2163,"分の":-7758,"同党":970,"同日":-913,"大阪":-2471,"委員":-1250,"少な":-1050,"年度":-8669,"年間":-1626,"府県":-2363,"手権":-1982,"新聞":-4066,"日新":-722,"日本":-7068,"日米":3372,"曜日":-601,"朝鮮":-2355,"本人":-2697,"東京":-1543,"然と":-1384,"社会":-1276,"立て":-990,"第に":-1612,"米国":-4268,"１１":-669};
+          this.BW3__ = {"あた":-2194,"あり":719,"ある":3846,"い.":-1185,"い。":-1185,"いい":5308,"いえ":2079,"いく":3029,"いた":2056,"いっ":1883,"いる":5600,"いわ":1527,"うち":1117,"うと":4798,"えと":1454,"か.":2857,"か。":2857,"かけ":-743,"かっ":-4098,"かに":-669,"から":6520,"かり":-2670,"が,":1816,"が、":1816,"がき":-4855,"がけ":-1127,"がっ":-913,"がら":-4977,"がり":-2064,"きた":1645,"けど":1374,"こと":7397,"この":1542,"ころ":-2757,"さい":-714,"さを":976,"し,":1557,"し、":1557,"しい":-3714,"した":3562,"して":1449,"しな":2608,"しま":1200,"す.":-1310,"す。":-1310,"する":6521,"ず,":3426,"ず、":3426,"ずに":841,"そう":428,"た.":8875,"た。":8875,"たい":-594,"たの":812,"たり":-1183,"たる":-853,"だ.":4098,"だ。":4098,"だっ":1004,"った":-4748,"って":300,"てい":6240,"てお":855,"ても":302,"です":1437,"でに":-1482,"では":2295,"とう":-1387,"とし":2266,"との":541,"とも":-3543,"どう":4664,"ない":1796,"なく":-903,"など":2135,"に,":-1021,"に、":-1021,"にし":1771,"にな":1906,"には":2644,"の,":-724,"の、":-724,"の子":-1000,"は,":1337,"は、":1337,"べき":2181,"まし":1113,"ます":6943,"まっ":-1549,"まで":6154,"まれ":-793,"らし":1479,"られ":6820,"るる":3818,"れ,":854,"れ、":854,"れた":1850,"れて":1375,"れば":-3246,"れる":1091,"われ":-605,"んだ":606,"んで":798,"カ月":990,"会議":860,"入り":1232,"大会":2217,"始め":1681,"市":965,"新聞":-5055,"日,":974,"日、":974,"社会":2024,"ｶ月":990};
+          this.TC1__ = {"AAA":1093,"HHH":1029,"HHM":580,"HII":998,"HOH":-390,"HOM":-331,"IHI":1169,"IOH":-142,"IOI":-1015,"IOM":467,"MMH":187,"OOI":-1832};
+          this.TC2__ = {"HHO":2088,"HII":-1023,"HMM":-1154,"IHI":-1965,"KKH":703,"OII":-2649};
+          this.TC3__ = {"AAA":-294,"HHH":346,"HHI":-341,"HII":-1088,"HIK":731,"HOH":-1486,"IHH":128,"IHI":-3041,"IHO":-1935,"IIH":-825,"IIM":-1035,"IOI":-542,"KHH":-1216,"KKA":491,"KKH":-1217,"KOK":-1009,"MHH":-2694,"MHM":-457,"MHO":123,"MMH":-471,"NNH":-1689,"NNO":662,"OHO":-3393};
+          this.TC4__ = {"HHH":-203,"HHI":1344,"HHK":365,"HHM":-122,"HHN":182,"HHO":669,"HIH":804,"HII":679,"HOH":446,"IHH":695,"IHO":-2324,"IIH":321,"III":1497,"IIO":656,"IOO":54,"KAK":4845,"KKA":3386,"KKK":3065,"MHH":-405,"MHI":201,"MMH":-241,"MMM":661,"MOM":841};
+          this.TQ1__ = {"BHHH":-227,"BHHI":316,"BHIH":-132,"BIHH":60,"BIII":1595,"BNHH":-744,"BOHH":225,"BOOO":-908,"OAKK":482,"OHHH":281,"OHIH":249,"OIHI":200,"OIIH":-68};
+          this.TQ2__ = {"BIHH":-1401,"BIII":-1033,"BKAK":-543,"BOOO":-5591};
+          this.TQ3__ = {"BHHH":478,"BHHM":-1073,"BHIH":222,"BHII":-504,"BIIH":-116,"BIII":-105,"BMHI":-863,"BMHM":-464,"BOMH":620,"OHHH":346,"OHHI":1729,"OHII":997,"OHMH":481,"OIHH":623,"OIIH":1344,"OKAK":2792,"OKHH":587,"OKKA":679,"OOHH":110,"OOII":-685};
+          this.TQ4__ = {"BHHH":-721,"BHHM":-3604,"BHII":-966,"BIIH":-607,"BIII":-2181,"OAAA":-2763,"OAKK":180,"OHHH":-294,"OHHI":2446,"OHHO":480,"OHIH":-1573,"OIHH":1935,"OIHI":-493,"OIIH":626,"OIII":-4007,"OKAK":-8156};
+          this.TW1__ = {"につい":-4681,"東京都":2026};
+          this.TW2__ = {"ある程":-2049,"いった":-1256,"ころが":-2434,"しょう":3873,"その後":-4430,"だって":-1049,"ていた":1833,"として":-4657,"ともに":-4517,"もので":1882,"一気に":-792,"初めて":-1512,"同時に":-8097,"大きな":-1255,"対して":-2721,"社会党":-3216};
+          this.TW3__ = {"いただ":-1734,"してい":1314,"として":-4314,"につい":-5483,"にとっ":-5989,"に当た":-6247,"ので,":-727,"ので、":-727,"のもの":-600,"れから":-3752,"十二月":-2287};
+          this.TW4__ = {"いう.":8576,"いう。":8576,"からな":-2348,"してい":2958,"たが,":1516,"たが、":1516,"ている":1538,"という":1349,"ました":5543,"ません":1097,"ようと":-4258,"よると":5865};
+          this.UC1__ = {"A":484,"K":93,"M":645,"O":-505};
+          this.UC2__ = {"A":819,"H":1059,"I":409,"M":3987,"N":5775,"O":646};
+          this.UC3__ = {"A":-1370,"I":2311};
+          this.UC4__ = {"A":-2643,"H":1809,"I":-1032,"K":-3450,"M":3565,"N":3876,"O":6646};
+          this.UC5__ = {"H":313,"I":-1238,"K":-799,"M":539,"O":-831};
+          this.UC6__ = {"H":-506,"I":-253,"K":87,"M":247,"O":-387};
+          this.UP1__ = {"O":-214};
+          this.UP2__ = {"B":69,"O":935};
+          this.UP3__ = {"B":189};
+          this.UQ1__ = {"BH":21,"BI":-12,"BK":-99,"BN":142,"BO":-56,"OH":-95,"OI":477,"OK":410,"OO":-2422};
+          this.UQ2__ = {"BH":216,"BI":113,"OK":1759};
+          this.UQ3__ = {"BA":-479,"BH":42,"BI":1913,"BK":-7198,"BM":3160,"BN":6427,"BO":14761,"OI":-827,"ON":-3212};
+          this.UW1__ = {",":156,"、":156,"「":-463,"あ":-941,"う":-127,"が":-553,"き":121,"こ":505,"で":-201,"と":-547,"ど":-123,"に":-789,"の":-185,"は":-847,"も":-466,"や":-470,"よ":182,"ら":-292,"り":208,"れ":169,"を":-446,"ん":-137,"・":-135,"主":-402,"京":-268,"区":-912,"午":871,"国":-460,"大":561,"委":729,"市":-411,"日":-141,"理":361,"生":-408,"県":-386,"都":-718,"｢":-463,"･":-135};
+          this.UW2__ = {",":-829,"、":-829,"〇":892,"「":-645,"」":3145,"あ":-538,"い":505,"う":134,"お":-502,"か":1454,"が":-856,"く":-412,"こ":1141,"さ":878,"ざ":540,"し":1529,"す":-675,"せ":300,"そ":-1011,"た":188,"だ":1837,"つ":-949,"て":-291,"で":-268,"と":-981,"ど":1273,"な":1063,"に":-1764,"の":130,"は":-409,"ひ":-1273,"べ":1261,"ま":600,"も":-1263,"や":-402,"よ":1639,"り":-579,"る":-694,"れ":571,"を":-2516,"ん":2095,"ア":-587,"カ":306,"キ":568,"ッ":831,"三":-758,"不":-2150,"世":-302,"中":-968,"主":-861,"事":492,"人":-123,"会":978,"保":362,"入":548,"初":-3025,"副":-1566,"北":-3414,"区":-422,"大":-1769,"天":-865,"太":-483,"子":-1519,"学":760,"実":1023,"小":-2009,"市":-813,"年":-1060,"強":1067,"手":-1519,"揺":-1033,"政":1522,"文":-1355,"新":-1682,"日":-1815,"明":-1462,"最":-630,"朝":-1843,"本":-1650,"東":-931,"果":-665,"次":-2378,"民":-180,"気":-1740,"理":752,"発":529,"目":-1584,"相":-242,"県":-1165,"立":-763,"第":810,"米":509,"自":-1353,"行":838,"西":-744,"見":-3874,"調":1010,"議":1198,"込":3041,"開":1758,"間":-1257,"｢":-645,"｣":3145,"ｯ":831,"ｱ":-587,"ｶ":306,"ｷ":568};
+          this.UW3__ = {",":4889,"1":-800,"−":-1723,"、":4889,"々":-2311,"〇":5827,"」":2670,"〓":-3573,"あ":-2696,"い":1006,"う":2342,"え":1983,"お":-4864,"か":-1163,"が":3271,"く":1004,"け":388,"げ":401,"こ":-3552,"ご":-3116,"さ":-1058,"し":-395,"す":584,"せ":3685,"そ":-5228,"た":842,"ち":-521,"っ":-1444,"つ":-1081,"て":6167,"で":2318,"と":1691,"ど":-899,"な":-2788,"に":2745,"の":4056,"は":4555,"ひ":-2171,"ふ":-1798,"へ":1199,"ほ":-5516,"ま":-4384,"み":-120,"め":1205,"も":2323,"や":-788,"よ":-202,"ら":727,"り":649,"る":5905,"れ":2773,"わ":-1207,"を":6620,"ん":-518,"ア":551,"グ":1319,"ス":874,"ッ":-1350,"ト":521,"ム":1109,"ル":1591,"ロ":2201,"ン":278,"・":-3794,"一":-1619,"下":-1759,"世":-2087,"両":3815,"中":653,"主":-758,"予":-1193,"二":974,"人":2742,"今":792,"他":1889,"以":-1368,"低":811,"何":4265,"作":-361,"保":-2439,"元":4858,"党":3593,"全":1574,"公":-3030,"六":755,"共":-1880,"円":5807,"再":3095,"分":457,"初":2475,"別":1129,"前":2286,"副":4437,"力":365,"動":-949,"務":-1872,"化":1327,"北":-1038,"区":4646,"千":-2309,"午":-783,"協":-1006,"口":483,"右":1233,"各":3588,"合":-241,"同":3906,"和":-837,"員":4513,"国":642,"型":1389,"場":1219,"外":-241,"妻":2016,"学":-1356,"安":-423,"実":-1008,"家":1078,"小":-513,"少":-3102,"州":1155,"市":3197,"平":-1804,"年":2416,"広":-1030,"府":1605,"度":1452,"建":-2352,"当":-3885,"得":1905,"思":-1291,"性":1822,"戸":-488,"指":-3973,"政":-2013,"教":-1479,"数":3222,"文":-1489,"新":1764,"日":2099,"旧":5792,"昨":-661,"時":-1248,"曜":-951,"最":-937,"月":4125,"期":360,"李":3094,"村":364,"東":-805,"核":5156,"森":2438,"業":484,"氏":2613,"民":-1694,"決":-1073,"法":1868,"海":-495,"無":979,"物":461,"特":-3850,"生":-273,"用":914,"町":1215,"的":7313,"直":-1835,"省":792,"県":6293,"知":-1528,"私":4231,"税":401,"立":-960,"第":1201,"米":7767,"系":3066,"約":3663,"級":1384,"統":-4229,"総":1163,"線":1255,"者":6457,"能":725,"自":-2869,"英":785,"見":1044,"調":-562,"財":-733,"費":1777,"車":1835,"軍":1375,"込":-1504,"通":-1136,"選":-681,"郎":1026,"郡":4404,"部":1200,"金":2163,"長":421,"開":-1432,"間":1302,"関":-1282,"雨":2009,"電":-1045,"非":2066,"駅":1620,"１":-800,"｣":2670,"･":-3794,"ｯ":-1350,"ｱ":551,"ｸﾞ":1319,"ｽ":874,"ﾄ":521,"ﾑ":1109,"ﾙ":1591,"ﾛ":2201,"ﾝ":278};
+          this.UW4__ = {",":3930,".":3508,"―":-4841,"、":3930,"。":3508,"〇":4999,"「":1895,"」":3798,"〓":-5156,"あ":4752,"い":-3435,"う":-640,"え":-2514,"お":2405,"か":530,"が":6006,"き":-4482,"ぎ":-3821,"く":-3788,"け":-4376,"げ":-4734,"こ":2255,"ご":1979,"さ":2864,"し":-843,"じ":-2506,"す":-731,"ず":1251,"せ":181,"そ":4091,"た":5034,"だ":5408,"ち":-3654,"っ":-5882,"つ":-1659,"て":3994,"で":7410,"と":4547,"な":5433,"に":6499,"ぬ":1853,"ね":1413,"の":7396,"は":8578,"ば":1940,"ひ":4249,"び":-4134,"ふ":1345,"へ":6665,"べ":-744,"ほ":1464,"ま":1051,"み":-2082,"む":-882,"め":-5046,"も":4169,"ゃ":-2666,"や":2795,"ょ":-1544,"よ":3351,"ら":-2922,"り":-9726,"る":-14896,"れ":-2613,"ろ":-4570,"わ":-1783,"を":13150,"ん":-2352,"カ":2145,"コ":1789,"セ":1287,"ッ":-724,"ト":-403,"メ":-1635,"ラ":-881,"リ":-541,"ル":-856,"ン":-3637,"・":-4371,"ー":-11870,"一":-2069,"中":2210,"予":782,"事":-190,"井":-1768,"人":1036,"以":544,"会":950,"体":-1286,"作":530,"側":4292,"先":601,"党":-2006,"共":-1212,"内":584,"円":788,"初":1347,"前":1623,"副":3879,"力":-302,"動":-740,"務":-2715,"化":776,"区":4517,"協":1013,"参":1555,"合":-1834,"和":-681,"員":-910,"器":-851,"回":1500,"国":-619,"園":-1200,"地":866,"場":-1410,"塁":-2094,"士":-1413,"多":1067,"大":571,"子":-4802,"学":-1397,"定":-1057,"寺":-809,"小":1910,"屋":-1328,"山":-1500,"島":-2056,"川":-2667,"市":2771,"年":374,"庁":-4556,"後":456,"性":553,"感":916,"所":-1566,"支":856,"改":787,"政":2182,"教":704,"文":522,"方":-856,"日":1798,"時":1829,"最":845,"月":-9066,"木":-485,"来":-442,"校":-360,"業":-1043,"氏":5388,"民":-2716,"気":-910,"沢":-939,"済":-543,"物":-735,"率":672,"球":-1267,"生":-1286,"産":-1101,"田":-2900,"町":1826,"的":2586,"目":922,"省":-3485,"県":2997,"空":-867,"立":-2112,"第":788,"米":2937,"系":786,"約":2171,"経":1146,"統":-1169,"総":940,"線":-994,"署":749,"者":2145,"能":-730,"般":-852,"行":-792,"規":792,"警":-1184,"議":-244,"谷":-1000,"賞":730,"車":-1481,"軍":1158,"輪":-1433,"込":-3370,"近":929,"道":-1291,"選":2596,"郎":-4866,"都":1192,"野":-1100,"銀":-2213,"長":357,"間":-2344,"院":-2297,"際":-2604,"電":-878,"領":-1659,"題":-792,"館":-1984,"首":1749,"高":2120,"｢":1895,"｣":3798,"･":-4371,"ｯ":-724,"ｰ":-11870,"ｶ":2145,"ｺ":1789,"ｾ":1287,"ﾄ":-403,"ﾒ":-1635,"ﾗ":-881,"ﾘ":-541,"ﾙ":-856,"ﾝ":-3637};
+          this.UW5__ = {",":465,".":-299,"1":-514,"E2":-32768,"]":-2762,"、":465,"。":-299,"「":363,"あ":1655,"い":331,"う":-503,"え":1199,"お":527,"か":647,"が":-421,"き":1624,"ぎ":1971,"く":312,"げ":-983,"さ":-1537,"し":-1371,"す":-852,"だ":-1186,"ち":1093,"っ":52,"つ":921,"て":-18,"で":-850,"と":-127,"ど":1682,"な":-787,"に":-1224,"の":-635,"は":-578,"べ":1001,"み":502,"め":865,"ゃ":3350,"ょ":854,"り":-208,"る":429,"れ":504,"わ":419,"を":-1264,"ん":327,"イ":241,"ル":451,"ン":-343,"中":-871,"京":722,"会":-1153,"党":-654,"務":3519,"区":-901,"告":848,"員":2104,"大":-1296,"学":-548,"定":1785,"嵐":-1304,"市":-2991,"席":921,"年":1763,"思":872,"所":-814,"挙":1618,"新":-1682,"日":218,"月":-4353,"査":932,"格":1356,"機":-1508,"氏":-1347,"田":240,"町":-3912,"的":-3149,"相":1319,"省":-1052,"県":-4003,"研":-997,"社":-278,"空":-813,"統":1955,"者":-2233,"表":663,"語":-1073,"議":1219,"選":-1018,"郎":-368,"長":786,"間":1191,"題":2368,"館":-689,"１":-514,"Ｅ２":-32768,"｢":363,"ｲ":241,"ﾙ":451,"ﾝ":-343};
+          this.UW6__ = {",":227,".":808,"1":-270,"E1":306,"、":227,"。":808,"あ":-307,"う":189,"か":241,"が":-73,"く":-121,"こ":-200,"じ":1782,"す":383,"た":-428,"っ":573,"て":-1014,"で":101,"と":-105,"な":-253,"に":-149,"の":-417,"は":-236,"も":-206,"り":187,"る":-135,"を":195,"ル":-673,"ン":-496,"一":-277,"中":201,"件":-800,"会":624,"前":302,"区":1792,"員":-1212,"委":798,"学":-960,"市":887,"広":-695,"後":535,"業":-697,"相":753,"社":-507,"福":974,"空":-822,"者":1811,"連":463,"郎":1082,"１":-270,"Ｅ１":306,"ﾙ":-673,"ﾝ":-496};
+          
+          return this;
+        }
+        TinySegmenter.prototype.ctype_ = function(str) {
+          for (var i in this.chartype_) {
+            if (str.match(this.chartype_[i][0])) {
+              return this.chartype_[i][1];
+            }
+          }
+          return "O";
+        }
+
+        TinySegmenter.prototype.ts_ = function(v) {
+          if (v) { return v; }
+          return 0;
+        }
+
+        TinySegmenter.prototype.segment = function(input) {
+          if (input == null || input == undefined || input == "") {
+            return [];
+          }
+          var result = [];
+          var seg = ["B3","B2","B1"];
+          var ctype = ["O","O","O"];
+          var o = input.split("");
+          for (i = 0; i < o.length; ++i) {
+            seg.push(o[i]);
+            ctype.push(this.ctype_(o[i]))
+          }
+          seg.push("E1");
+          seg.push("E2");
+          seg.push("E3");
+          ctype.push("O");
+          ctype.push("O");
+          ctype.push("O");
+          var word = seg[3];
+          var p1 = "U";
+          var p2 = "U";
+          var p3 = "U";
+          for (var i = 4; i < seg.length - 3; ++i) {
+            var score = this.BIAS__;
+            var w1 = seg[i-3];
+            var w2 = seg[i-2];
+            var w3 = seg[i-1];
+            var w4 = seg[i];
+            var w5 = seg[i+1];
+            var w6 = seg[i+2];
+            var c1 = ctype[i-3];
+            var c2 = ctype[i-2];
+            var c3 = ctype[i-1];
+            var c4 = ctype[i];
+            var c5 = ctype[i+1];
+            var c6 = ctype[i+2];
+            score += this.ts_(this.UP1__[p1]);
+            score += this.ts_(this.UP2__[p2]);
+            score += this.ts_(this.UP3__[p3]);
+            score += this.ts_(this.BP1__[p1 + p2]);
+            score += this.ts_(this.BP2__[p2 + p3]);
+            score += this.ts_(this.UW1__[w1]);
+            score += this.ts_(this.UW2__[w2]);
+            score += this.ts_(this.UW3__[w3]);
+            score += this.ts_(this.UW4__[w4]);
+            score += this.ts_(this.UW5__[w5]);
+            score += this.ts_(this.UW6__[w6]);
+            score += this.ts_(this.BW1__[w2 + w3]);
+            score += this.ts_(this.BW2__[w3 + w4]);
+            score += this.ts_(this.BW3__[w4 + w5]);
+            score += this.ts_(this.TW1__[w1 + w2 + w3]);
+            score += this.ts_(this.TW2__[w2 + w3 + w4]);
+            score += this.ts_(this.TW3__[w3 + w4 + w5]);
+            score += this.ts_(this.TW4__[w4 + w5 + w6]);
+            score += this.ts_(this.UC1__[c1]);
+            score += this.ts_(this.UC2__[c2]);
+            score += this.ts_(this.UC3__[c3]);
+            score += this.ts_(this.UC4__[c4]);
+            score += this.ts_(this.UC5__[c5]);
+            score += this.ts_(this.UC6__[c6]);
+            score += this.ts_(this.BC1__[c2 + c3]);
+            score += this.ts_(this.BC2__[c3 + c4]);
+            score += this.ts_(this.BC3__[c4 + c5]);
+            score += this.ts_(this.TC1__[c1 + c2 + c3]);
+            score += this.ts_(this.TC2__[c2 + c3 + c4]);
+            score += this.ts_(this.TC3__[c3 + c4 + c5]);
+            score += this.ts_(this.TC4__[c4 + c5 + c6]);
+        //  score += this.ts_(this.TC5__[c4 + c5 + c6]);    
+            score += this.ts_(this.UQ1__[p1 + c1]);
+            score += this.ts_(this.UQ2__[p2 + c2]);
+            score += this.ts_(this.UQ3__[p3 + c3]);
+            score += this.ts_(this.BQ1__[p2 + c2 + c3]);
+            score += this.ts_(this.BQ2__[p2 + c3 + c4]);
+            score += this.ts_(this.BQ3__[p3 + c2 + c3]);
+            score += this.ts_(this.BQ4__[p3 + c3 + c4]);
+            score += this.ts_(this.TQ1__[p2 + c1 + c2 + c3]);
+            score += this.ts_(this.TQ2__[p2 + c2 + c3 + c4]);
+            score += this.ts_(this.TQ3__[p3 + c1 + c2 + c3]);
+            score += this.ts_(this.TQ4__[p3 + c2 + c3 + c4]);
+            var p = "O";
+            if (score > 0) {
+              result.push(word);
+              word = "";
+              p = "B";
+            }
+            p1 = p2;
+            p2 = p3;
+            p3 = p;
+            word += seg[i];
+          }
+          result.push(word);
+
+          return result;
+        }
+
+        lunr.TinySegmenter = TinySegmenter;
+    };
+
+}));

samples/react-interactive-map/docs/site/assets/stylesheets/palette.e6a45f82.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/assets/stylesheets/palette/_accent.scss","../../../src/assets/stylesheets/palette.scss","src/assets/stylesheets/palette/_primary.scss","src/assets/stylesheets/utilities/_break.scss","src/assets/stylesheets/palette/_scheme.scss"],"names":[],"mappings":"AA8CE,2BACE,4BAAA,CACA,oDAAA,CAOE,yBAAA,CACA,8CCnDN,CDyCE,4BACE,4BAAA,CACA,mDAAA,CAOE,yBAAA,CACA,8CC5CN,CDkCE,8BACE,4BAAA,CACA,qDAAA,CAOE,yBAAA,CACA,8CCrCN,CD2BE,mCACE,4BAAA,CACA,qDAAA,CAOE,yBAAA,CACA,8CC9BN,CDoBE,8BACE,4BAAA,CACA,qDAAA,CAOE,yBAAA,CACA,8CCvBN,CDaE,4BACE,4BAAA,CACA,qDAAA,CAOE,yBAAA,CACA,8CChBN,CDME,kCACE,4BAAA,CACA,oDAAA,CAOE,yBAAA,CACA,8CCTN,CDDE,4BACE,4BAAA,CACA,oDAAA,CAOE,yBAAA,CACA,8CCFN,CDRE,4BACE,4BAAA,CACA,oDAAA,CAOE,yBAAA,CACA,8CCKN,CDfE,6BACE,4BAAA,CACA,mDAAA,CAOE,yBAAA,CACA,8CCYN,CDtBE,mCACE,4BAAA,CACA,oDAAA,CAOE,yBAAA,CACA,8CCmBN,CD7BE,4BACE,4BAAA,CACA,oDAAA,CAIE,oCAAA,CACA,2CC6BN,CDpCE,8BACE,4BAAA,CACA,oDAAA,CAIE,oCAAA,CACA,2CCoCN,CD3CE,6BACE,yBAAA,CACA,oDAAA,CAIE,oCAAA,CACA,2CC2CN,CDlDE,8BACE,4BAAA,CACA,oDAAA,CAIE,oCAAA,CACA,2CCkDN,CDzDE,mCACE,4BAAA,CACA,qDAAA,CAOE,yBAAA,CACA,8CCsDN,CC3DE,4BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDwDN,CCnEE,6BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDgEN,CC3EE,+BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDwEN,CCnFE,oCACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDgFN,CC3FE,+BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDwFN,CCnGE,6BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDgGN,CC3GE,mCACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDwGN,CCnHE,6BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDgHN,CC3HE,6BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDwHN,CCnIE,8BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDgIN,CC3IE,oCACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDwIN,CCnJE,6BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAIE,qCAAA,CACA,4CDmJN,CC3JE,+BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAIE,qCAAA,CACA,4CD2JN,CCnKE,8BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAIE,qCAAA,CACA,4CDmKN,CC3KE,+BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAIE,qCAAA,CACA,4CD2KN,CCnLE,oCACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDgLN,CC3LE,8BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDwLN,CCnME,6BACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDgMN,CC3ME,kCACE,6BAAA,CACA,oCAAA,CACA,mCAAA,CAOE,0BAAA,CACA,+CDwMN,CC9LA,8BACE,0BAAA,CACA,+CAAA,CACA,2CAAA,CACA,qCAAA,CACA,4CAAA,CAGA,4BD+LF,CE9EI,mCD3GA,+CACE,gCD4LJ,CCzLI,qDACE,gCD2LN,CCtLE,iEACE,qBDwLJ,CACF,CEzFI,sCDxFA,uCACE,0CDoLJ,CACF,CC3KA,8BACE,0BAAA,CACA,4CAAA,CACA,gCAAA,CACA,0BAAA,CACA,+CAAA,CAGA,4BD4KF,CCzKE,yCACE,qBD2KJ,CEvFI,wCD7EA,8CACE,gCDuKJ,CACF,CE/GI,mCDjDA,+CACE,oCDmKJ,CChKI,qDACE,mCDkKN,CACF,CEpGI,wCDtDA,iFACE,qBD6JJ,CACF,CE5HI,sCD1BA,uCACE,qBDyJJ,CACF,CGvSA,cAGE,6BAKE,YAAA,CAGA,mDAAA,CACA,6DAAA,CACA,+DAAA,CACA,gEAAA,CACA,mDAAA,CACA,6DAAA,CACA,+DAAA,CACA,gEAAA,CAGA,gDAAA,CACA,gDAAA,CAGA,uCAAA,CACA,iCAAA,CACA,kCAAA,CACA,mCAAA,CACA,mCAAA,CACA,kCAAA,CACA,iCAAA,CACA,+CAAA,CACA,6DAAA,CACA,gEAAA,CACA,4DAAA,CACA,4DAAA,CACA,6DAAA,CAGA,6CAAA,CAGA,+CAAA,CAGA,2CAAA,CAGA,uDAAA,CACA,6DAAA,CACA,2DAAA,CAGA,yDAAA,CAGA,0DAAA,CAGA,qDAAA,CACA,wDHgRF,CG7QE,oHAIE,4BH4QJ,CGxQE,qDACE,YH0QJ,CGtQE,oDACE,eHwQJ,CACF","file":"palette.css"}

samples/react-interactive-map/docs/site/index.html

@@ -0,0 +1,491 @@
+
+<!doctype html>
+<html lang="en" class="no-js">
+  <head>
+    
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width,initial-scale=1">
+      
+      
+      
+      <link rel="icon" href="assets/images/favicon.png">
+      <meta name="generator" content="mkdocs-1.2.3, mkdocs-material-8.2.1">
+    
+    
+      
+        <title>SharePoint Interactive Map Webpart</title>
+      
+    
+    
+      <link rel="stylesheet" href="assets/stylesheets/main.e8d9bf0c.min.css">
+      
+        
+        <link rel="stylesheet" href="assets/stylesheets/palette.e6a45f82.min.css">
+        
+      
+    
+    
+    
+      
+        
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
+        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
+      
+    
+    
+    <script>__md_scope=new URL(".",location),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
+    
+      
+
+    
+    
+  </head>
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    <body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="blue-grey" data-md-color-accent="">
+  
+    
+    
+      <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
+    
+    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
+    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
+    <label class="md-overlay" for="__drawer"></label>
+    <div data-md-component="skip">
+      
+        
+        <a href="#sharepoint-interactive-map-webpart" class="md-skip">
+          Skip to content
+        </a>
+      
+    </div>
+    <div data-md-component="announce">
+      
+    </div>
+    
+      <div data-md-component="outdated" hidden>
+        <aside class="md-banner md-banner--warning">
+          
+        </aside>
+      </div>
+    
+    
+      
+
+<header class="md-header" data-md-component="header">
+  <nav class="md-header__inner md-grid" aria-label="Header">
+    <a href="." title="SharePoint Interactive Map Webpart" class="md-header__button md-logo" aria-label="SharePoint Interactive Map Webpart" data-md-component="logo">
+      
+  <img src="https://spfx-app.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1629447472494%2FdGmmXf-Id.png%3Fw%3D1000%26h%3D250%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1080&q=75" alt="logo">
+
+    </a>
+    <label class="md-header__button md-icon" for="__drawer">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
+    </label>
+    <div class="md-header__title" data-md-component="header-title">
+      <div class="md-header__ellipsis">
+        <div class="md-header__topic">
+          <span class="md-ellipsis">
+            SharePoint Interactive Map Webpart
+          </span>
+        </div>
+        <div class="md-header__topic" data-md-component="header-topic">
+          <span class="md-ellipsis">
+            
+              Home
+            
+          </span>
+        </div>
+      </div>
+    </div>
+    
+      <form class="md-header__option" data-md-component="palette">
+        
+          
+          
+          <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="blue-grey" data-md-color-accent=""  aria-label="Switch to light mode"  type="radio" name="__palette" id="__palette_1">
+          
+            <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_2" hidden>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31z"/></svg>
+            </label>
+          
+        
+          
+          
+          <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent=""  aria-label="Switch to dark mode"  type="radio" name="__palette" id="__palette_2">
+          
+            <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22z"/></svg>
+            </label>
+          
+        
+      </form>
+    
+    
+    
+      <label class="md-header__button md-icon" for="__search">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
+      </label>
+      <div class="md-search" data-md-component="search" role="dialog">
+  <label class="md-search__overlay" for="__search"></label>
+  <div class="md-search__inner" role="search">
+    <form class="md-search__form" name="search">
+      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
+      <label class="md-search__icon md-icon" for="__search">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
+      </label>
+      <nav class="md-search__options" aria-label="Search">
+        
+        <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+        </button>
+      </nav>
+      
+    </form>
+    <div class="md-search__output">
+      <div class="md-search__scrollwrap" data-md-scrollfix>
+        <div class="md-search-result" data-md-component="search-result">
+          <div class="md-search-result__meta">
+            Initializing search
+          </div>
+          <ol class="md-search-result__list"></ol>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+    
+    
+      <div class="md-header__source">
+        <a href="https://github.com/SPFxAppDev/sp-map-webpart/" title="Go to repository" class="md-source" data-md-component="source">
+  <div class="md-source__icon md-icon">
+    
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
+  </div>
+  <div class="md-source__repository">
+    GitHub
+  </div>
+</a>
+      </div>
+    
+  </nav>
+  
+</header>
+    
+    <div class="md-container" data-md-component="container">
+      
+      
+        
+          
+            
+<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
+  <div class="md-tabs__inner md-grid">
+    <ul class="md-tabs__list">
+      
+        
+  
+  
+    
+  
+
+
+  <li class="md-tabs__item">
+    <a href="." class="md-tabs__link md-tabs__link--active">
+      Home
+    </a>
+  </li>
+
+      
+    </ul>
+  </div>
+</nav>
+          
+        
+      
+      <main class="md-main" data-md-component="main">
+        <div class="md-main__inner md-grid">
+          
+            
+              
+              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
+                <div class="md-sidebar__scrollwrap">
+                  <div class="md-sidebar__inner">
+                    
+
+  
+
+
+  
+
+<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
+  <label class="md-nav__title" for="__drawer">
+    <a href="." title="SharePoint Interactive Map Webpart" class="md-nav__button md-logo" aria-label="SharePoint Interactive Map Webpart" data-md-component="logo">
+      
+  <img src="https://spfx-app.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1629447472494%2FdGmmXf-Id.png%3Fw%3D1000%26h%3D250%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1080&q=75" alt="logo">
+
+    </a>
+    SharePoint Interactive Map Webpart
+  </label>
+  
+    <div class="md-nav__source">
+      <a href="https://github.com/SPFxAppDev/sp-map-webpart/" title="Go to repository" class="md-source" data-md-component="source">
+  <div class="md-source__icon md-icon">
+    
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
+  </div>
+  <div class="md-source__repository">
+    GitHub
+  </div>
+</a>
+    </div>
+  
+  <ul class="md-nav__list" data-md-scrollfix>
+    
+      
+      
+      
+
+  
+  
+    
+  
+  
+    <li class="md-nav__item md-nav__item--active">
+      
+      <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
+      
+      
+        
+      
+      
+        <label class="md-nav__link md-nav__link--active" for="__toc">
+          Home
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <a href="." class="md-nav__link md-nav__link--active">
+        Home
+      </a>
+      
+        
+
+<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
+  
+  
+  
+    
+  
+  
+    <label class="md-nav__title" for="__toc">
+      <span class="md-nav__icon md-icon"></span>
+      Table of contents
+    </label>
+    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
+      
+        <li class="md-nav__item">
+  <a href="#installation" class="md-nav__link">
+    Installation
+  </a>
+  
+</li>
+      
+        <li class="md-nav__item">
+  <a href="#configuration" class="md-nav__link">
+    Configuration
+  </a>
+  
+    <nav class="md-nav" aria-label="Configuration">
+      <ul class="md-nav__list">
+        
+          <li class="md-nav__item">
+  <a href="#how-to-add-a-new-marker" class="md-nav__link">
+    How to add a new marker
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#how-to-change-the-marker-position" class="md-nav__link">
+    How to change the marker position
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#how-to-manage-marker-categories" class="md-nav__link">
+    How to manage marker categories
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#how-to-change-the-tile-layer" class="md-nav__link">
+    How to change the tile layer
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#how-to-change-the-tile-layer_1" class="md-nav__link">
+    How to change the tile layer
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#how-to-cluster-the-markers-in-groups" class="md-nav__link">
+    How to cluster the markers in groups
+  </a>
+  
+</li>
+        
+      </ul>
+    </nav>
+  
+</li>
+      
+    </ul>
+  
+</nav>
+      
+    </li>
+  
+
+    
+  </ul>
+</nav>
+                  </div>
+                </div>
+              </div>
+            
+            
+          
+          <div class="md-content" data-md-component="content">
+            <article class="md-content__inner md-typeset">
+              
+                
+<a href="https://github.com/SPFxAppDev/sp-map-webpart/edit/master/docs/index.md" title="Edit this page" class="md-content__button md-icon">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
+</a>
+
+
+
+<h1 id="sharepoint-interactive-map-webpart">SharePoint Interactive Map Webpart<a class="headerlink" href="#sharepoint-interactive-map-webpart" title="Permanent link">&para;</a></h1>
+<p><img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/SPFxAppDev/sp-map-webpart" /></p>
+<p>The "Interactive Map" wepart for Microsoft Teams/SharePoint is a solution, that contains one webpart.</p>
+<h2 id="installation">Installation<a class="headerlink" href="#installation" title="Permanent link">&para;</a></h2>
+<ol>
+<li>Download the latest SharePoint Framework packages <strong>spfxappdev-webparts-map.sppkg</strong> from the <a href="https://github.com/SPFxAppDev/sp-map-webpart/releases">GitHub repository</a>.</li>
+<li>Add <strong>spfxappdev-webparts-map.sppkg</strong> to the global tenant app catalog or a site collection app catalog. If you don't have an app catalog, follow this <a href="https://docs.microsoft.com/en-us/sharepoint/use-app-catalog">procedure</a> to create one.</li>
+</ol>
+<blockquote>
+<ul>
+<li>
+<p>The packages are deployed in the general Office 365 CDN meaning <strong>I do not host any code</strong>.</p>
+</li>
+<li>
+<p>For this package, you can choose to make the solution available in <a href="https://docs.microsoft.com/en-us/sharepoint/dev/spfx/tenant-scoped-deployment">all sites</a> or force to install an app to the site every time.</p>
+</li>
+</ul>
+</blockquote>
+<ol>
+<li>If the solution was not installed globally (available in all sites), install the app in the site</li>
+<li>Add the webpart to a SharePoint Page or Teams Tab</li>
+</ol>
+<p><img alt="Preview" src="images/MapWPOverview.gif" /></p>
+<h2 id="configuration">Configuration<a class="headerlink" href="#configuration" title="Permanent link">&para;</a></h2>
+<p>Documentation is still being prepared. But I think the animated picture above shows all functions/configurations :)</p>
+<h3 id="how-to-add-a-new-marker">How to add a new marker<a class="headerlink" href="#how-to-add-a-new-marker" title="Permanent link">&para;</a></h3>
+<p>Documentation is still being prepared</p>
+<h3 id="how-to-change-the-marker-position">How to change the marker position<a class="headerlink" href="#how-to-change-the-marker-position" title="Permanent link">&para;</a></h3>
+<p>Documentation is still being prepared</p>
+<h3 id="how-to-manage-marker-categories">How to manage marker categories<a class="headerlink" href="#how-to-manage-marker-categories" title="Permanent link">&para;</a></h3>
+<p>Documentation is still being prepared</p>
+<h3 id="how-to-change-the-tile-layer">How to change the tile layer<a class="headerlink" href="#how-to-change-the-tile-layer" title="Permanent link">&para;</a></h3>
+<p>Documentation is still being prepared</p>
+<h3 id="how-to-change-the-tile-layer_1">How to change the tile layer<a class="headerlink" href="#how-to-change-the-tile-layer_1" title="Permanent link">&para;</a></h3>
+<p>Documentation is still being prepared</p>
+<h3 id="how-to-cluster-the-markers-in-groups">How to cluster the markers in groups<a class="headerlink" href="#how-to-cluster-the-markers-in-groups" title="Permanent link">&para;</a></h3>
+<p>Documentation is still being prepared</p>
+
+              
+            </article>
+          </div>
+        </div>
+        
+      </main>
+      
+        <footer class="md-footer">
+  
+  <div class="md-footer-meta md-typeset">
+    <div class="md-footer-meta__inner md-grid">
+      <div class="md-copyright">
+  
+    <div class="md-copyright__highlight">
+      Copyright &copy; 2021 - 2022 Sergej Schwabauer
+    </div>
+  
+  
+    Made with
+    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
+      Material for MkDocs
+    </a>
+  
+</div>
+      
+        <div class="md-social">
+  
+    
+    
+      
+      
+    
+    <a href="https://www.linkedin.com/in/sergej-schwabauer-a26b5267/" target="_blank" rel="noopener" title="www.linkedin.com" class="md-social__link">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
+    </a>
+  
+    
+    
+      
+      
+    
+    <a href="https://github.com/SPFxAppDev" target="_blank" rel="noopener" title="github.com" class="md-social__link">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+    </a>
+  
+    
+    
+      
+      
+    
+    <a href="https://spfx-app.dev/" target="_blank" rel="noopener" title="spfx-app.dev" class="md-social__link">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M35.19 171.1c-46.91 46-46.91 122.9 0 169.8L171.1 476.8c46 46.9 122.9 46.9 169.8 0l135.9-135.9c46.9-46.9 46.9-123.8 0-169.8L340.9 35.19c-46.9-46.91-123.8-46.91-169.8 0L35.19 171.1zM315.5 315.5c-32.9 32.8-86.1 32.8-118.9 0-32.9-32.9-32.9-86.1 0-118.9 32.8-32.9 86-32.9 118.9 0 32.8 32.8 32.8 86 0 118.9z"/></svg>
+    </a>
+  
+</div>
+      
+    </div>
+  </div>
+</footer>
+      
+    </div>
+    <div class="md-dialog" data-md-component="dialog">
+      <div class="md-dialog__inner md-typeset"></div>
+    </div>
+    <script id="__config" type="application/json">{"base": ".", "features": ["toc.integrate", "navigation.tabs", "navigation.sections", "content.code.annotate"], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "search": "assets/javascripts/workers/search.bd0b6b67.min.js", "version": {"provider": "mike"}}</script>
+    
+    
+      <script src="assets/javascripts/bundle.8aa65030.min.js"></script>
+      
+    
+  </body>
+</html>

samples/react-interactive-map/docs/site/search/search_index.json

@@ -0,0 +1 @@
+{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"SharePoint Interactive Map Webpart \u00b6 The \"Interactive Map\" wepart for Microsoft Teams/SharePoint is a solution, that contains one webpart. Installation \u00b6 Download the latest SharePoint Framework packages spfxappdev-webparts-map.sppkg from the GitHub repository . Add spfxappdev-webparts-map.sppkg to the global tenant app catalog or a site collection app catalog. If you don't have an app catalog, follow this procedure to create one. The packages are deployed in the general Office 365 CDN meaning I do not host any code . For this package, you can choose to make the solution available in all sites or force to install an app to the site every time. If the solution was not installed globally (available in all sites), install the app in the site Add the webpart to a SharePoint Page or Teams Tab Configuration \u00b6 Documentation is still being prepared. But I think the animated picture above shows all functions/configurations :) How to add a new marker \u00b6 Documentation is still being prepared How to change the marker position \u00b6 Documentation is still being prepared How to manage marker categories \u00b6 Documentation is still being prepared How to change the tile layer \u00b6 Documentation is still being prepared How to change the tile layer \u00b6 Documentation is still being prepared How to cluster the markers in groups \u00b6 Documentation is still being prepared","title":"Home"},{"location":"#sharepoint-interactive-map-webpart","text":"The \"Interactive Map\" wepart for Microsoft Teams/SharePoint is a solution, that contains one webpart.","title":"SharePoint Interactive Map Webpart"},{"location":"#installation","text":"Download the latest SharePoint Framework packages spfxappdev-webparts-map.sppkg from the GitHub repository . Add spfxappdev-webparts-map.sppkg to the global tenant app catalog or a site collection app catalog. If you don't have an app catalog, follow this procedure to create one. The packages are deployed in the general Office 365 CDN meaning I do not host any code . For this package, you can choose to make the solution available in all sites or force to install an app to the site every time. If the solution was not installed globally (available in all sites), install the app in the site Add the webpart to a SharePoint Page or Teams Tab","title":"Installation"},{"location":"#configuration","text":"Documentation is still being prepared. But I think the animated picture above shows all functions/configurations :)","title":"Configuration"},{"location":"#how-to-add-a-new-marker","text":"Documentation is still being prepared","title":"How to add a new marker"},{"location":"#how-to-change-the-marker-position","text":"Documentation is still being prepared","title":"How to change the marker position"},{"location":"#how-to-manage-marker-categories","text":"Documentation is still being prepared","title":"How to manage marker categories"},{"location":"#how-to-change-the-tile-layer","text":"Documentation is still being prepared","title":"How to change the tile layer"},{"location":"#how-to-change-the-tile-layer_1","text":"Documentation is still being prepared","title":"How to change the tile layer"},{"location":"#how-to-cluster-the-markers-in-groups","text":"Documentation is still being prepared","title":"How to cluster the markers in groups"}]}

samples/react-interactive-map/docs/site/sitemap.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+         <loc>None</loc>
+         <lastmod>2022-03-04</lastmod>
+         <changefreq>daily</changefreq>
+    </url>
+</urlset>

samples/react-interactive-map/fast-serve/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json",
+  "cli": {
+    "isLibraryComponent": false
+  }
+}

samples/react-interactive-map/fast-serve/webpack.extend.js

@@ -0,0 +1,47 @@
+/*
+* User webpack settings file. You can add your own settings here.
+* Changes from this file will be merged into the base webpack configuration file.
+* This file will not be overwritten by the subsequent spfx-fast-serve calls.
+*/
+
+// you can add your project related webpack configuration here, it will be merged using webpack-merge module
+// i.e. plugins: [new webpack.Plugin()]
+
+const path = require("path");
+
+const webpackConfig = {
+  resolve: {
+    alias: {
+      "@webparts": path.resolve(__dirname, "..", "src/webparts"),
+      "@src": path.resolve(__dirname, "..", "src"),
+    }
+  }
+}
+
+// for even more fine-grained control, you can apply custom webpack settings using below function
+const transformConfig = function (initialWebpackConfig) {
+  // transform the initial webpack config here, i.e.
+  // initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.
+
+  initialWebpackConfig.module.rules.push(
+    {
+      test: /node_modules[\/\\]@?react-leaflet[\/\\].*.js$/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['@babel/preset-env', { targets: "defaults" }]
+          ],
+          plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
+        }
+      }
+    }
+  );
+
+  return initialWebpackConfig;
+}
+
+module.exports = {
+  webpackConfig,
+  transformConfig
+}

samples/react-interactive-map/gulpfile.js

@@ -0,0 +1,61 @@
+'use strict';
+
+const build = require('@microsoft/sp-build-web');
+
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+build.addSuppression(/Warning - \[sass\] The local CSS class/gi);
+
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+/* fast-serve */
+const { addFastServe } = require("spfx-fast-serve-helpers");
+addFastServe(build);
+/* end of fast-serve */
+
+
+/* CUSTOM ALIAS */
+const path = require('path');
+build.configureWebpack.mergeConfig({
+  additionalConfiguration: (generatedConfiguration) => {
+    if(!generatedConfiguration.resolve.alias){
+      generatedConfiguration.resolve.alias = {};
+    }
+
+    // webparts folder
+    generatedConfiguration.resolve.alias['@webparts'] = path.resolve( __dirname, 'lib/webparts')
+
+    //root src folder
+    generatedConfiguration.resolve.alias['@src'] = path.resolve( __dirname, 'lib')
+
+
+    //Nullish Operator
+    generatedConfiguration.module.rules.push(
+      {
+        test: /node_modules[\/\\]@?react-leaflet[\/\\].*.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env', { targets: "defaults" }]
+            ],
+            plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
+          }
+        }
+      }
+    );
+
+    return generatedConfiguration;
+  }
+});
+
+/* CUSTOM ALIAS END */
+
+build.initialize(require('gulp'));
+

samples/react-interactive-map/map-pin-svgrepo-com.svg

@@ -0,0 +1 @@
+<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" overflow="inherit"><path d="M25.015 2.4c-7.8 0-14.121 6.204-14.121 13.854 0 7.652 14.121 32.746 14.121 32.746s14.122-25.094 14.122-32.746c0-7.65-6.325-13.854-14.122-13.854z"/></svg>

samples/react-interactive-map/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "spfxappdev-webparts-map",
+  "version": "1.0.0",
+  "private": true,
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test",
+    "serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
+  },
+  "dependencies": {
+    "@microsoft/sp-core-library": "1.14.0",
+    "@microsoft/sp-lodash-subset": "1.14.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
+    "@microsoft/sp-property-pane": "1.14.0",
+    "@microsoft/sp-webpart-base": "1.14.0",
+    "@pnp/spfx-controls-react": "3.6.0",
+    "@pnp/spfx-property-controls": "3.5.0",
+    "@spfxappdev/utility": "^1.1.0",
+    "leaflet": "^1.7.1",
+    "office-ui-fabric-react": "7.174.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-leaflet": "^3.2.5",
+    "react-leaflet-markercluster": "^3.0.0-rc1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
+    "@microsoft/sp-build-web": "1.14.0",
+    "@microsoft/sp-module-interfaces": "1.14.0",
+    "@microsoft/sp-tslint-rules": "1.14.0",
+    "@types/leaflet": "^1.7.9",
+    "@types/react": "16.9.51",
+    "@types/react-dom": "16.9.8",
+    "@types/webpack-env": "1.13.1",
+    "ajv": "~5.2.2",
+    "babel-loader": "^8.2.3",
+    "gulp": "~4.0.2",
+    "spfx-fast-serve-helpers": "~1.14.0"
+  }
+}

samples/react-interactive-map/src/components/autocomplete/Autocomplete.module.scss

@@ -0,0 +1,5 @@
+
+
+.autocomplete {
+    display: block;
+}

samples/react-interactive-map/src/components/autocomplete/Autocomplete.tsx

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import styles from './Autocomplete.module.scss';
+import { TextField, ITextFieldProps, Callout, ICalloutProps, DirectionalHint, ITextField, TextFieldBase } from 'office-ui-fabric-react';
+import { isNullOrEmpty, cssClasses, getDeepOrDefault, isFunction } from '@spfxappdev/utility';
+
+
+export interface IAutocompleteProps extends Omit<ITextFieldProps, "componentRef"> {
+    showSuggestionsOnFocus?: boolean;
+    minValueLength?: number;
+    onLoadSuggestions?(newValue: string): void;
+    onRenderSuggestions?(inputValue: string): JSX.Element;
+    textFieldRef?(fluentUITextField: ITextField, autocompleteComponent: Autocomplete, htmlInput?: HTMLInputElement);
+    onUpdated?(newValue: string);
+    calloutProps?: Omit<ICalloutProps, "hidden" | "target" | "preventDismissOnScroll" | "directionalHint" | "directionalHintFixed" | "isBeakVisible">;
+}
+
+interface IAutocompleteState {
+    currentValue: string;
+    isFlyoutVisible: boolean;
+}
+
+export class Autocomplete extends React.Component<IAutocompleteProps, IAutocompleteState> {
+
+    public state: IAutocompleteState = {
+        currentValue: isNullOrEmpty(this.props.defaultValue) ? "" : this.props.defaultValue,
+        isFlyoutVisible: false,
+    };
+
+    public static defaultProps: IAutocompleteProps = {
+        showSuggestionsOnFocus: false,
+        minValueLength: 3,
+        calloutProps: {
+            gapSpace: 0
+        }
+    };
+
+    private textFieldReference: ITextField = null;
+
+    private textFieldDomElement: HTMLInputElement = null;
+
+    private userIsTyping: boolean = false;
+
+    private lastValue: string = "";
+
+    private onUpdateValueText: string = "";
+    
+    public render(): React.ReactElement<IAutocompleteProps> {
+
+        return (<>
+        <TextField {...this.props}
+        autoComplete={"off"}
+        className={cssClasses(styles.autocomplete, this.props.className)}
+        componentRef={(input: ITextField) => {
+            this.textFieldReference = input;
+            this.textFieldDomElement = getDeepOrDefault<HTMLInputElement>(input, "_textElement.current", null);
+            
+            if(isFunction(this.props.textFieldRef)) {
+                this.props.textFieldRef(input, this, this.textFieldDomElement);
+            }
+            
+        }}
+        onFocus={(ev: any) => {
+            if(this.props.showSuggestionsOnFocus) {
+                this.handleSuggestionListVisibility();
+            }
+
+            if(isFunction(this.props.onFocus)) {
+                this.props.onFocus(ev);
+            }
+        }}
+        onBlur={(ev: any) => {
+
+            this.onTextFieldBlur();
+
+            if(isFunction(this.props.onBlur)) {
+                this.props.onBlur(ev);
+            }
+        }}
+        onChange={(ev: any, newValue: string) => {
+            this.onValueChanged(ev, newValue);
+        }}
+        defaultValue={this.state.currentValue}
+        />
+
+        {this.renderSuggesstionsFlyout()}
+        </>);
+    }
+
+    public updateValue(newValue: string): void {
+        this.onUpdateValueText = newValue;
+        
+        this.setState({
+            currentValue: newValue
+        }, () => {
+            (this.textFieldReference as TextFieldBase).setState({
+                uncontrolledValue: this.onUpdateValueText
+            });
+    
+            if(isFunction(this.props.onUpdated)) {
+                this.props.onUpdated(newValue);
+            }
+        });        
+    }
+
+    private renderSuggesstionsFlyout(): JSX.Element {
+        let minWidth: number = getDeepOrDefault<number>(this.props, "calloutProps.calloutMinWidth", -1);
+
+        if(minWidth <= 0) {
+            minWidth = getDeepOrDefault<number>(this, "textFieldDomElement.clientWidth", -1);
+        }
+
+        if(minWidth > 0) {
+            this.props.calloutProps.calloutMinWidth = minWidth;
+        }
+
+        return (<Callout
+            {...this.props.calloutProps}
+            hidden={!this.state.isFlyoutVisible}
+            directionalHintFixed={true}
+            isBeakVisible={false}
+            target={this.textFieldDomElement}
+            onDismiss={(ev?: any) => {
+                this.hideSuggesstionsFlyout();
+                
+                if(isFunction(this.props.calloutProps.onDismiss)) {
+                    this.props.calloutProps.onDismiss(ev);
+                }
+            }}
+            preventDismissOnScroll={true}
+            directionalHint={DirectionalHint.bottomCenter}>
+                {isFunction(this.props.onRenderSuggestions) && this.props.onRenderSuggestions(this.state.currentValue)}
+        </Callout>
+        );
+    }
+
+    private onValueChanged(ev: any, newValue: string): void {
+        this.userIsTyping = true;
+
+        this.state.currentValue = newValue;
+        this.setState({
+            currentValue: newValue
+        });
+
+        this.handleSuggestionListVisibility();
+
+        if(isFunction(this.props.onChange)) {
+            this.props.onChange(ev, newValue);
+        }
+    }
+
+    private onTextFieldBlur(): void {
+        this.userIsTyping = false;
+        window.setTimeout(() => {
+            this.hideSuggesstionsFlyout();
+        }, 150);
+    }
+
+    private handleSuggestionListVisibility(): void {
+        let val = this.state.currentValue;
+
+        if(isNullOrEmpty(val)) {
+            this.hideSuggesstionsFlyout();
+            return;
+        }
+
+        if(val.length < this.props.minValueLength) {
+            this.hideSuggesstionsFlyout();
+            return;
+        }
+
+        let valueWasChanged = false;
+
+        if(!val.Equals(this.lastValue)) {
+            this.userIsTyping = false;
+            valueWasChanged = true;
+        }
+
+        if(!valueWasChanged) {
+            this.showSuggesstionsFlyout();
+            return;
+        }
+
+        window.setTimeout(() => {
+            if(this.userIsTyping) {
+               return; 
+            }
+
+            this.showSuggesstionsFlyout();
+
+            if(isFunction(this.props.onLoadSuggestions)) {
+                this.props.onLoadSuggestions(this.state.currentValue);
+            }
+        }, 150);
+    }
+
+    private hideSuggesstionsFlyout(): void {
+        this.setState({
+            isFlyoutVisible: false
+        });
+    }
+
+    private showSuggesstionsFlyout(): void {
+        this.setState({
+            isFlyoutVisible: true
+        });
+    }
+}

samples/react-interactive-map/src/components/iconPicker/IconPicker.module.scss

@@ -0,0 +1,36 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+
+.iconpicker {
+    display: block;
+}
+
+.suggesstion {
+    display: block;
+
+    &-item {
+        display: flex;
+        padding: 5px 20px;
+        border-bottom: solid 1px $ms-color-themeLighter;
+        border-top: solid 1px $ms-color-themeLighter;
+        align-items: center;
+        cursor: pointer;
+
+        &:first-child {
+            border-top-width: 0;
+        }
+
+        &:last-child {
+            border-bottom-width: 0;
+        }
+
+        i {
+            padding-right: 20px;
+            font-size: 2em;
+        }
+
+        span {
+            font-size: 1em;
+        }
+    }
+}

samples/react-interactive-map/src/components/iconPicker/IconPicker.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import styles from './IconPicker.module.scss';
+import { Icon, ITextField } from 'office-ui-fabric-react';
+import { allIcons } from './availableIcons';
+import { isNullOrEmpty, cssClasses, isFunction } from '@spfxappdev/utility';
+import { Autocomplete, IAutocompleteProps } from '@src/components/autocomplete/Autocomplete';
+
+
+export interface IIconPickerProps extends Omit<IAutocompleteProps, "onUpdated" | "onChange"> {
+    enableDialogPicker?: boolean;
+    dialogPickerIconName?: string;
+    onIconChanged?(iconName: string): void;
+}
+
+interface IIconPickerState {
+    currentValue: string;
+}
+
+export class IconPicker extends React.Component<IIconPickerProps, IIconPickerState> {
+
+    public state: IIconPickerState = {
+        currentValue: isNullOrEmpty(this.props.defaultValue) ? "" : this.props.defaultValue
+    };
+
+    public static defaultProps: IIconPickerProps = {
+        dialogPickerIconName: "GroupedList",
+        enableDialogPicker: true,   
+        showSuggestionsOnFocus: false,
+        minValueLength: 0
+    };
+
+    private inputValueOnClick: string = "";
+
+    private textFieldReference: ITextField = null;
+
+    private textFieldDomElement: HTMLInputElement = null;
+
+    private autocompleteRef: Autocomplete = null;
+    
+    public render(): React.ReactElement<IIconPickerProps> {
+
+        return (<>
+        <Autocomplete {...this.props}
+        textFieldRef={(fluentUITextField: ITextField, autocompleteComponent: Autocomplete, htmlInput: HTMLInputElement) => {
+            this.textFieldReference = fluentUITextField;
+            this.textFieldDomElement = htmlInput;
+            this.autocompleteRef = autocompleteComponent;
+            if(isFunction(this.props.textFieldRef)) {
+                this.props.textFieldRef(fluentUITextField, autocompleteComponent, this.textFieldDomElement);
+            }
+        }}
+        onChange={(ev: any, name: string) => {
+            if(isFunction(this.props.onIconChanged)) {
+                this.props.onIconChanged(name);
+            }
+        }}
+        onUpdated={(name: string) => {
+            if(isFunction(this.props.onIconChanged)) {
+                this.props.onIconChanged(name);
+            }
+        }}
+        className={cssClasses(styles.iconpicker)}
+        defaultValue={this.state.currentValue}
+        onLoadSuggestions={(newValue: string) => {
+            this.setState({
+                currentValue: newValue
+            });
+        }}
+        onRenderSuggestions={() => {
+            return this.renderSuggesstionsFlyout();
+        }}
+        iconProps={{
+            iconName: this.state.currentValue
+        }} />
+
+        
+        </>);
+    }
+
+    private renderSuggesstionsFlyout(): JSX.Element {
+
+        return (
+            <div className={styles["suggesstion"]}>
+            {allIcons.Where(icon => icon.StartsWith(this.state.currentValue)).map((iconName: string): JSX.Element => {
+                return (<div 
+                    key={`Icon_${iconName}`}
+                    onClick={() => {
+                        this.inputValueOnClick = iconName;
+                        
+                        this.setState({
+                            currentValue: iconName
+                        });
+                        
+                        this.autocompleteRef.updateValue(iconName);
+                    }}
+                    className={styles["suggesstion-item"]}>
+                        <Icon  iconName={iconName} />
+                        <span>{iconName}</span>
+                    </div>);
+            })}
+            </div>
+        );
+    }
+}

samples/react-interactive-map/src/components/inlineColorPicker/InlineColorPicker.module.scss

@@ -0,0 +1,21 @@
+
+.inline-color-picker {
+    padding: 5px; 
+    background: rgb(255, 255, 255); 
+    border-radius: 1px; 
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px; 
+    display: inline-block; 
+    border: 1px solid rgb(166, 166, 166); 
+    cursor: pointer;
+
+    &-inner {
+        width: 36px; 
+        height: 14px; 
+        border-radius: 2px;
+    }
+
+    &.disabled {
+        background: darkgrey;
+        cursor: not-allowed;
+    }
+}

samples/react-interactive-map/src/components/inlineColorPicker/InlineColorPicker.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { ColorPicker, IColorPickerProps, getColorFromString, IColor, Callout, Label } from 'office-ui-fabric-react';
+import styles from './InlineColorPicker.module.scss';
+import { isset, isNullOrEmpty } from '@spfxappdev/utility';
+
+export interface IInlineColorPickerProps extends IColorPickerProps {
+    label?: string;
+    isDisbaled?: boolean;
+}
+
+interface IInlineColorPickerState {
+    isPickerVisible: boolean;
+}
+
+export class InlineColorPicker extends React.Component<IInlineColorPickerProps, IInlineColorPickerState> {
+
+    public state: IInlineColorPickerState = {
+        isPickerVisible: false,
+    };
+
+    public static defaultProps: IInlineColorPickerProps = {
+        color: '#000000',
+        isDisbaled: false
+    };
+
+    private targetElement: HTMLDivElement = null;
+    
+    public render(): React.ReactElement<IInlineColorPickerProps> {
+
+
+        let bc: IColor = null;
+        
+        if(typeof this.props.color != "string") {
+            bc = this.props.color;
+        }
+        else {
+            bc = getColorFromString(this.props.color);
+        }
+
+        const customCss: React.CSSProperties = {
+            background: `rgba(${bc.r}, ${bc.g}, ${bc.b}, ${bc.a/100})`
+        };
+
+        return (
+            <>
+            {!isNullOrEmpty(this.props.label) && 
+            <Label>{this.props.label}</Label> 
+            }
+        <div 
+        className={styles['inline-color-picker'] + ` ${this.props.isDisbaled?styles['disabled']:''}`} 
+        ref={(r) => {
+            if(isset(r)) {
+                this.targetElement = r;
+            }
+        }} 
+        onClick={() => {
+
+            if(this.props.isDisbaled) {
+                return;
+            }
+
+            this.setState({ isPickerVisible: true });
+        }}>
+            <div className={styles['inline-color-picker-inner']} style={customCss}></div>
+        </div>
+        {this.state.isPickerVisible &&
+                <Callout target={this.targetElement} onDismiss={() => {
+                    this.setState({ isPickerVisible: false });
+                }}>
+                    <ColorPicker {...this.props} />
+                </Callout>
+        }
+        </>
+        );
+    }
+}

samples/react-interactive-map/src/index.ts

@@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler

samples/react-interactive-map/src/webparts/map/MapWebPart.manifest.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "3f860b48-1dc3-496d-bd28-b145672289cc",
+  "alias": "MapWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportsFullBleed": true,
+  "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsThemeVariants": true,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { 
+      "default": "Interactive Map",
+      "de-de": "Interaktive Karte"
+    },
+    "description": { 
+      "default": "An interactive map with which you can create markers",
+      "de-de": "Eine interactive Karte mit der man Markierungen erstellen kann" 
+    },
+    "officeFabricIconFontName": "MapPin",
+    "properties": {
+      "title": "",
+      "markerItems": [],
+      "markerCategories": [],
+      "center": [51.505, -0.09],
+      "startZoom": 13,
+      "maxZoom": 30,
+      "minZoom": 1,
+      "dragging": true,
+      "height": 400,
+      "scrollWheelZoom": true,
+      "plugins": {
+        "searchBox": false,
+        "markercluster": false,
+        "legend": false,
+        "zoomControl": true
+      },
+      "tileLayerUrl": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      "tileLayerAttribution": "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
+    }
+  }]
+}

samples/react-interactive-map/src/webparts/map/MapWebPart.ts

@@ -0,0 +1,280 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { DisplayMode, Version } from '@microsoft/sp-core-library';
+import {
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField,
+  PropertyPaneToggle,
+  PropertyPaneSlider,
+  PropertyPaneButton
+} from '@microsoft/sp-property-pane';
+import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+
+import * as strings from 'MapWebPartStrings';
+import Map from './components/Map';
+import { IMapProps, IMarker, IMarkerCategory } from './components/IMapProps';
+import ManageMarkerCategoriesDialog, { IManageMarkerCategoriesDialogProps } from './components/ManageMarkerCategoriesDialog';
+import { isNullOrEmpty } from '@spfxappdev/utility';
+import { Spinner, ISpinnerProps } from '@microsoft/office-ui-fabric-react-bundle';
+
+export interface IMapPlugins {
+  searchBox: boolean;
+  markercluster: boolean;
+  legend: boolean;
+  zoomControl: boolean;
+}
+
+export interface IMapWebPartProps {
+  markerItems: IMarker[];
+  markerCategories: IMarkerCategory[];
+  title: string;
+  center: [number, number];
+  startZoom: number;
+  maxZoom: number;
+  minZoom: number;
+  height: number;
+  scrollWheelZoom: boolean;
+  dragging: boolean;
+  showPopUp: boolean;
+  plugins: IMapPlugins;
+  tileLayerUrl: string;
+  tileLayerAttribution: string;
+    
+}
+
+export default class MapWebPart extends BaseClientSideWebPart<IMapWebPartProps> {
+
+  private _isDarkTheme: boolean = false;
+
+  protected onInit(): Promise<void> {
+    return super.onInit();
+  }
+
+  public render(): void {
+    const element: React.ReactElement<IMapProps> = React.createElement(
+      Map,
+      {
+        markerItems: this.properties.markerItems||[],
+        markerCategories: this.properties.markerCategories||[],
+        isEditMode: this.displayMode == DisplayMode.Edit,
+        zoom: this.properties.startZoom,
+        minZoom: this.properties.minZoom,
+        maxZoom: this.properties.maxZoom,
+        center: this.properties.center,
+        title: this.properties.title,
+        height: this.properties.height,
+        plugins: this.properties.plugins,
+        tileLayerUrl: isNullOrEmpty(this.properties.tileLayerUrl) ? "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" : this.properties.tileLayerUrl,
+        tileLayerAttribution: isNullOrEmpty(this.properties.tileLayerAttribution) ? "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors" : this.properties.tileLayerAttribution,
+        dragging: this.properties.dragging,
+        scrollWheelZoom: this.properties.scrollWheelZoom,
+        showPopUp: this.properties.showPopUp, 
+
+        onMarkerCollectionChanged: (markerItems: IMarker[]) => {
+          this.properties.markerItems = markerItems;
+        },
+        onMarkerCategoriesChanged: (markerCategories: IMarkerCategory[]) => {
+          this.onMarkerCategoriesChanged(markerCategories);
+        },
+        onStartViewSet: (zoomLevel: number, lat: number, lng: number) => {
+          this.properties.startZoom = zoomLevel;
+          this.properties.center = [lat, lng];
+        },
+        
+        onTitleUpdate: (value: string) => {
+          this.properties.title = value;
+        }
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected onDisplayModeChanged(oldDisplayMode: DisplayMode): void {
+      this.reload();
+  }
+
+  protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
+    super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
+
+    const reloadIfOneOfProps = ["height", "tileLayerUrl", "minZoom", "maxZoom", "tileLayerAttribution", "plugins.zoomControl"];
+    
+    if(reloadIfOneOfProps.Contains(p => p.Equals(propertyPath))) {
+      this.reload();
+    }
+  }
+
+  private reload(): void {
+    
+    setTimeout(() => {
+      const spinner: React.ReactElement<ISpinnerProps> = React.createElement(Spinner, {
+
+      });
+
+      ReactDom.render(spinner, this.domElement);
+
+      setTimeout(() => { this.render(); }, 300);
+    }, 500);
+    
+    
+  }
+
+  // protected get disableReactivePropertyChanges(): boolean {
+  //   return true;
+  // }
+
+  private onMarkerCategoriesChanged(markerCategories: IMarkerCategory[]): void {
+    this.properties.markerCategories = markerCategories;
+    this.render();
+  }
+  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
+    if (!currentTheme) {
+      return;
+    }
+
+    this._isDarkTheme = !!currentTheme.isInverted;
+    const {
+      semanticColors
+    } = currentTheme;
+    this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);
+    this.domElement.style.setProperty('--link', semanticColors.link);
+    this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);
+
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          groups: [
+            {
+              groupName: strings.WebPartPropertyGroupMapSettings,
+              groupFields: [
+                // PropertyPaneWebPartInformation({
+                //   description: `<div class='wp-settings-info'>${strings.WebPartPropertySettingsInfoLabel}</div>`,
+                //   key: 'Info_For_3f860b48-1dc3-496d-bd28-b145672289cc'
+                // }),
+                PropertyPaneSlider('minZoom', {
+                  label: strings.WebPartPropertyMinZoomLabel,
+                  max: 30,
+                  min: 0,
+                  step: 1
+                }),
+                PropertyPaneSlider('maxZoom', {
+                  label: strings.WebPartPropertyMaxZoomLabel,
+                  max: 30,
+                  min: 5,
+                  step: 1
+                }),
+                PropertyPaneSlider('height', {
+                  label: strings.WebPartPropertyHeightLabel,
+                  min: 100,
+                  max: 1200,
+                  step: 50
+                }),
+                PropertyPaneToggle('scrollWheelZoom', {
+                  label: strings.WebPartPropertyScrollWheelZoomLabel,
+                }),
+                PropertyPaneToggle('dragging', {
+                  label: strings.WebPartPropertyMapDraggingLabel,
+                }),
+                PropertyPaneToggle('showPopUp', {
+                  label: strings.WebPartPropertyShowPopUpLabel,
+                }),
+                
+              ]
+            },
+            {
+              isCollapsed: true,
+              groupName: strings.WebPartPropertyGroupTileLayerSettings,
+              groupFields: [
+                PropertyPaneWebPartInformation({
+                  description: `<div class='wp-settings-info'>${strings.WebPartPropertyTileLayerUrlInformationLabel}</div>`,
+                  key: 'Tile_For_3f860b48-1dc3-496d-bd28-b145672289cc'
+                }),
+                PropertyPaneTextField('tileLayerUrl', {
+                  label: strings.WebPartPropertyTileLayerUrlLabel
+                }),
+                PropertyPaneTextField('tileLayerAttribution', {
+                  label: strings.WebPartPropertyTileLayerAttributionLabel
+                }),                
+              ]
+            },
+            {
+              isCollapsed: true,
+              groupName: strings.WebPartPropertyGroupPlugins,
+              groupFields: [
+                PropertyPaneToggle('plugins.searchBox', {
+                  label: strings.WebPartPropertyPluginSearchboxLabel
+                }),
+                PropertyPaneToggle('plugins.markercluster', {
+                  label: strings.WebPartPropertyPluginMarkerClusterLabel,
+                }),
+                PropertyPaneToggle('plugins.zoomControl', {
+                  label: strings.WebPartPropertyPluginZoomControlLabel
+                }),
+              ]
+            },
+            {
+              isCollapsed: true,
+              groupName: strings.WebPartPropertyGroupCategories,
+              groupFields: [
+                PropertyPaneButton(null, {
+                  text: strings.WebPartPropertyButtonManageCategories,
+                  onClick: (val: any) => {
+                    const dummyElement: HTMLDivElement = document.createElement("div");
+                    document.body.appendChild(dummyElement);
+
+                    const element: React.ReactElement<IManageMarkerCategoriesDialogProps> = React.createElement(ManageMarkerCategoriesDialog, {
+                      markerCategories: this.properties.markerCategories,
+                      onDismiss: () => {
+                        dummyElement.remove();
+                      },
+                      onMarkerCategoriesChanged: (markerCategories: IMarkerCategory[]) => {
+                        dummyElement.remove();
+                        this.onMarkerCategoriesChanged(markerCategories);
+                      },
+                    });
+
+                    ReactDom.render(element, dummyElement);
+                    
+                    return null;
+                  }
+                }),
+                PropertyPaneToggle('plugins.legend', {
+                  label: strings.WebPartPropertyPluginLegendLabel
+                })
+              ]
+            },
+            {
+              groupName: strings.WebPartPropertyGroupAbout,
+              groupFields: [
+                PropertyPaneWebPartInformation({
+                  description: `<h3>Author</h3> 
+                                <a href='https://spfx-app.dev/' data-interception="off" target='_blank'>SPFx-App.dev</a>
+                                <h3>Version</h3>
+                                ${this.context.manifest.version}
+                                <h3>Web Part Instance id</h3>
+                                ${this.context.instanceId}`,
+                  moreInfoLink: `https://spfxappdev.github.io/sp-map-webpart/`,
+                  key: '3f860b48-1dc3-496d-bd28-b145672289cc'
+                })
+              ]
+            }
+          ],
+          displayGroupsAsAccordion: true,
+        }
+      ]
+    };
+  }
+}

samples/react-interactive-map/src/webparts/map/components/AddOrEditPanel.tsx

@@ -0,0 +1,387 @@
+
+import * as React from 'react';
+import { IMarker, IMarkerCategory, MarkerType } from './IMapProps';
+import './Map.module.scss';
+import { cloneDeep } from '@microsoft/sp-lodash-subset';
+import { Icon, Panel, TextField, IPanelProps, PrimaryButton, DefaultButton, IChoiceGroupOption, ChoiceGroup, IDropdownOption, Dropdown, getColorFromString, IColor, PanelType, Label, TooltipHost } from 'office-ui-fabric-react';
+import { Guid } from '@microsoft/sp-core-library';
+import { isNullOrEmpty, isFunction } from '@spfxappdev/utility';
+import { InlineColorPicker } from '@src/components/inlineColorPicker/InlineColorPicker';
+import { RichText } from "@pnp/spfx-controls-react/lib/RichText";
+import '@spfxappdev/utility/lib/extensions/StringExtensions';
+import '@spfxappdev/utility/lib/extensions/ArrayExtensions';
+import ManageMarkerCategoriesDialog from './ManageMarkerCategoriesDialog';
+import { MarkerIcon } from './MarkerIcon';
+import * as strings from 'MapWebPartStrings';
+import { IconPicker } from '@src/components/iconPicker/IconPicker';
+
+export interface IAddOrEditPanelProps {
+    markerItem: IMarker;
+    markerCategories: IMarkerCategory[];
+    onDismiss();
+    onMarkerChanged(markerItem: IMarker, isNewMarker: boolean);
+    onDeleteMarker(markerItem: IMarker);
+    onChangePositionClick(markerItem: IMarker);
+    onMarkerCategoriesChanged(markerCategories: IMarkerCategory[]);
+}
+
+interface IAddOrEditPanelState {
+    markerItem: IMarker;
+    markerCategories: IMarkerCategory[];
+    isSaveButtonDisabled: boolean;
+    isManageCategoriesDialogVisible: boolean;
+    
+}
+
+export default class AddOrEditPanel extends React.Component<IAddOrEditPanelProps, IAddOrEditPanelState> {
+
+    public state: IAddOrEditPanelState = {
+        markerItem: cloneDeep(this.props.markerItem),
+        markerCategories: cloneDeep(this.props.markerCategories),
+        isSaveButtonDisabled: false,
+        isManageCategoriesDialogVisible: false
+    };
+
+    private readonly isNewMarker: boolean;
+
+    private readonly headerText: string;
+    
+    private markerTypeOptions: IChoiceGroupOption[] = [
+        { key: 'Panel', text: strings.ChoiceGroupPanelLabel, iconProps: { iconName: 'SidePanel' } },
+        { key: 'Dialog', text: strings.ChoiceGroupDialogLabel, iconProps: { iconName: 'Favicon' } },
+        { key: 'Url', text: strings.ChoiceGroupUrlLabel, iconProps: { iconName: 'Link' } },
+        { key: 'None', text: strings.ChoiceGroupNoneLabel, iconProps: { iconName: 'FieldEmpty' } },
+    ];
+
+    private urlOptions: IChoiceGroupOption[] = [
+        { key: '_self', text: strings.ChoiceGroupTargetSelfLabel },
+        { key: '_blank', text: strings.ChoiceGroupTargetBlankLabel },
+        { key: 'embedded', text: strings.ChoiceGroupTargetEmbeddedLabel },
+      ];
+
+    constructor(props: IAddOrEditPanelProps) {
+        super(props);
+
+        this.isNewMarker = this.props.markerItem.id.Equals(Guid.empty.toString());
+        this.headerText = this.isNewMarker ? strings.PanelHeaderNewLabel : strings.PanelHeaderEditLabel;
+    }
+
+    public componentDidUpdate(prevProps: Readonly<IAddOrEditPanelProps>, prevState: Readonly<IAddOrEditPanelState>, snapshot?: any): void {
+
+        if(!JSON.stringify(prevProps.markerCategories).Equals(JSON.stringify(this.props.markerCategories)) ||
+        !JSON.stringify(prevProps.markerItem).Equals(JSON.stringify(this.props.markerItem))) {
+            this.setState({
+              markerCategories: cloneDeep(this.props.markerCategories),
+              markerItem: cloneDeep(this.props.markerItem),
+              isSaveButtonDisabled: false
+            });
+        }
+    }
+    
+    public render(): React.ReactElement<IAddOrEditPanelProps> {
+
+        const selectedCatId: string = this.state.markerCategories.Contains(cat => cat.id.Equals(this.state.markerItem.categoryId)) ? this.state.markerItem.categoryId : Guid.empty.toString();
+
+        return (
+            <Panel
+              type={PanelType.medium}
+              isOpen={true}
+              onDismiss={() => { this.onConfigPanelDismiss(); }}
+              headerText={this.headerText}
+              closeButtonAriaLabel={strings.CloseLabel}
+              onRenderFooterContent={(props: IPanelProps) => {
+                return this.renderPanelFooter();
+              }}
+              // Stretch panel content to fill the available height so the footer is positioned
+              // at the bottom of the page
+              isFooterAtBottom={true}
+            >
+                <Label>
+                    {strings.LabelCategory} 
+                    <span 
+                        onClick={() => {
+                            this.setState({
+                                isManageCategoriesDialogVisible: true
+                            });
+                        }} 
+                        className='manage-categories-label'>
+                            ({strings.LabelManage})
+                    </span>
+                </Label> 
+              <Dropdown
+                placeholder={strings.PlaceholderSelectACategory}
+                defaultSelectedKey={selectedCatId}
+                onChange={(ev: any, option: IDropdownOption) => {
+                  this.state.markerItem.categoryId = option.key.toString();
+                  this.setState({
+                    markerItem: this.state.markerItem,
+                    isSaveButtonDisabled: false
+                  });
+      
+                }}
+                options={this.categoryOptions}
+              />
+              <ChoiceGroup 
+                label={strings.LabelMarkerType}
+                defaultSelectedKey={this.state.markerItem.type} 
+                onChange={(ev: any, option: IChoiceGroupOption) => {
+                  this.state.markerItem.type = option.key.toString() as MarkerType;
+
+                //   if( this.state.markerItem.type == "None") {
+                //     this.state.markerItem.markerClickProps = undefined;
+                //   }
+      
+                  this.setState({
+                    markerItem: this.state.markerItem,
+                    isSaveButtonDisabled: false
+                  });
+                }}
+                options={this.markerTypeOptions} />
+      
+                {this.renderNonCategorySettings()}      
+                {this.renderUrlSettings()}
+                {this.renderPanelOrDialogSettings()}
+                {this.renderManageCategoriesDialog()}
+            </Panel>
+          );
+    }
+
+    private renderPanelFooter(): JSX.Element {
+        return (<div className='panel-footer'>
+            <PrimaryButton 
+                text={strings.SaveLabel}
+                disabled={this.state.isSaveButtonDisabled} 
+                onClick={() => {
+
+                    if(this.isNewMarker) {
+                        this.state.markerItem.id = Guid.newGuid().toString();
+                    }
+                    
+                    this.onSaveMarkerClick(this.state.markerItem);
+                }} 
+            />
+
+            {!this.isNewMarker &&
+            <>
+            <DefaultButton text={strings.DeleteLabel} onClick={() => { this.onDeleteMarkerClick(this.state.markerItem); }} />
+            <DefaultButton text={strings.ChangePositionLabel} onClick={() => { this.onChangePositionClick(this.state.markerItem); }} />
+            </>
+            }
+
+            <DefaultButton text={strings.CancelLabel} onClick={() => { this.onConfigPanelDismiss(); }} />
+          </div>);
+    }
+
+    private renderNonCategorySettings(): JSX.Element {
+
+        if(this.state.markerCategories.Contains(cat => cat.id.Equals(this.state.markerItem.categoryId))) {
+            return (<></>);
+        }
+
+        return (
+            <>
+                <InlineColorPicker 
+                label={strings.LabelMarkerColor} 
+                alphaType='none'
+                color={getColorFromString(this.state.markerItem.iconProperties.markerColor)} 
+                onChange={(ev: any, color: IColor) => {
+                    this.state.markerItem.iconProperties.markerColor = "#" + color.hex;
+                    this.setState({
+                    markerItem: this.state.markerItem,
+                    isSaveButtonDisabled: false
+                    });
+                }} 
+                />
+    
+                {/* <TextField label={strings.LabelIcon} description={strings.LabelLeaveEmpty} defaultValue={this.state.markerItem.iconProperties.iconName} onChange={(ev: any, iconName: string) => {
+                    this.state.markerItem.iconProperties.iconName = iconName;
+                    this.setState({
+                    markerItem: this.state.markerItem,
+                    isSaveButtonDisabled: false
+                    });
+                }} /> */}
+
+                <IconPicker
+                    label={strings.LabelIcon}
+                    description={strings.LabelLeaveEmpty}
+                    defaultValue={this.state.markerItem.iconProperties.iconName}
+                    onIconChanged={(iconName: string) => {
+                        this.state.markerItem.iconProperties.iconName = iconName;
+                        this.setState({
+                            markerItem: this.state.markerItem,
+                            isSaveButtonDisabled: false
+                        });
+                    }} 
+                />
+
+                <InlineColorPicker 
+                    label={strings.LabelIconColor}
+                    alphaType='none'
+                    color={getColorFromString(this.state.markerItem.iconProperties.iconColor)} 
+                    onChange={(ev: any, color: IColor) => {
+                        this.state.markerItem.iconProperties.iconColor = "#" + color.hex;
+                        this.setState({
+                        markerItem: this.state.markerItem,
+                        isSaveButtonDisabled: false
+                        });
+                    }}
+                    isDisbaled={isNullOrEmpty(this.state.markerItem.iconProperties.iconName)}
+                />
+    
+                <Label>
+                    {strings.LabelTooltip}
+                    <TooltipHost content={strings.TooltipInfo}>
+                        <Icon className='info-tooltip' iconName='Info' />
+                    </TooltipHost>
+                </Label>
+                <TextField description={strings.LabelLeaveEmptyTooltip} defaultValue={this.state.markerItem.popuptext} onChange={(ev: any, popuptext: string) => {
+                    this.state.markerItem.popuptext = popuptext;
+                    this.setState({
+                    markerItem: this.state.markerItem,
+                    isSaveButtonDisabled: false
+                    });
+                }} />
+
+                <Label>{strings.LabelPreview}</Label>
+                <div style={{position: "relative", height: "36px", }}>
+                    <div style={{position: "absolute"}}>
+                        <MarkerIcon {...this.state.markerItem.iconProperties} />
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    private renderPanelOrDialogSettings(): JSX.Element {
+
+        if(!(this.state.markerItem.type == "Dialog" || this.state.markerItem.type == "Panel")) {
+            return (<></>);
+        }
+
+        const headerLabel: string = this.state.markerItem.type == "Dialog" ? strings.LabelDialogHeader : strings.LabelPanelHeader;
+
+        return (<>
+        <TextField label={headerLabel} defaultValue={this.state.markerItem.markerClickProps.content.headerText} onChange={(ev: any, headerText: string) => {
+            this.state.markerItem.markerClickProps.content.headerText = headerText;
+            this.setState({
+              markerItem: this.state.markerItem,
+              isSaveButtonDisabled: false
+            });
+          }} />
+
+          <Label>{strings.LabelContent}</Label>
+          <RichText isEditMode={true} value={this.state.markerItem.markerClickProps.content.html} onChange={(content: string): string => {
+            this.state.markerItem.markerClickProps.content.html = content;
+            this.setState({
+              markerItem: this.state.markerItem,
+              isSaveButtonDisabled: false
+            });
+
+            return content;
+          }} />
+
+        </>);
+    }
+
+    private renderUrlSettings(): JSX.Element {
+
+        if(this.state.markerItem.type != "Url") {
+            return (<></>);
+        }
+
+        return (
+            <>
+                <TextField label={strings.LabelUrl} type='url' defaultValue={this.state.markerItem.markerClickProps.url.href} onChange={(ev: any, url: string) => {
+                    this.state.markerItem.markerClickProps.url.href = url;
+                    this.setState({
+                    markerItem: this.state.markerItem,
+                    isSaveButtonDisabled: false
+                    });
+                }} />
+
+                <ChoiceGroup 
+                    defaultSelectedKey={this.state.markerItem.markerClickProps.url.target} 
+                    options={this.urlOptions} 
+                    onChange={(ev: any, option: IChoiceGroupOption) => {
+                        (this.state.markerItem.markerClickProps.url.target as any) = option.key;
+                        
+                        this.setState({
+                            markerItem: this.state.markerItem,
+                            isSaveButtonDisabled: false
+                        });
+                    }} 
+                />
+            </>
+        );
+    }
+
+    private renderManageCategoriesDialog(): JSX.Element {
+
+        if(!this.state.isManageCategoriesDialogVisible) {
+            return (<></>);
+        }
+
+        return (
+        <>
+        <ManageMarkerCategoriesDialog 
+            markerCategories={this.props.markerCategories} 
+            onDismiss={() => {
+                this.setState({
+                    isManageCategoriesDialogVisible: false
+                });
+            }}
+            onMarkerCategoriesChanged={(markerCategories: IMarkerCategory[]) => {
+                
+                this.setState({
+                    isManageCategoriesDialogVisible: false,
+                    markerCategories: markerCategories
+                });
+
+                if(isFunction(this.props.onMarkerCategoriesChanged)) {
+                    this.props.onMarkerCategoriesChanged(markerCategories);
+                }
+            }}
+        />
+        </>
+        );
+    }
+
+    private onConfigPanelDismiss(): void {
+        if(isFunction(this.props.onDismiss)) {
+            this.props.onDismiss();
+        }
+    }
+
+    private onSaveMarkerClick(marker: IMarker): void {
+
+        if(isFunction(this.props.onMarkerChanged)) {
+            this.props.onMarkerChanged(marker, this.isNewMarker);
+        }
+    }
+
+    private onDeleteMarkerClick(marker: IMarker): void {
+
+        if(isFunction(this.props.onDeleteMarker)) {
+            this.props.onDeleteMarker(marker);
+        }
+    }
+
+    private onChangePositionClick(marker: IMarker): void {
+
+        if(isFunction(this.props.onChangePositionClick)) {
+            this.props.onChangePositionClick(marker);
+        }
+    }
+
+    private get categoryOptions(): IDropdownOption[] {
+        const categories: IDropdownOption[] = [
+            { key: Guid.empty.toString(), text: 'None' }
+        ];
+
+        this.state.markerCategories.forEach((category: IMarkerCategory) => {
+            categories.push({ key: category.id, text: category.name });
+        });
+
+        return categories;
+    }
+}

samples/react-interactive-map/src/webparts/map/components/IMapProps.ts

@@ -0,0 +1,86 @@
+import { Guid } from '@microsoft/sp-core-library';
+import * as L from 'leaflet';
+import { IMapPlugins } from '../MapWebPart';
+
+export type MarkerType = "Panel"|"Dialog"|"Url"|"None";
+
+export interface IMarkerClickProps {
+  url: IMarkerUrlProperties;
+  content: IMarkerContentProperties;
+}
+
+export interface IMarkerUrlProperties {
+  href: string;
+  target: '_self'|'_blank'|'embedded';
+}
+
+export interface IMarkerContentProperties {
+  headerText: string;
+  html: string;
+}
+
+export interface IMarkerIcon {
+  markerColor: string;
+  iconName: string;
+  iconColor: string;
+}
+
+export interface IMarkerCategory {
+  id: string;
+  name: string;
+  popuptext?: string;
+  iconProperties: IMarkerIcon;
+}
+
+export interface IMarker {
+  id: string;
+  longitude: number;
+  latitude: number;
+  type: MarkerType;
+  categoryId: string;
+  iconProperties?: IMarkerIcon;
+  popuptext?: string;
+  markerClickProps?: IMarkerClickProps;
+}
+
+export interface IMapProps {
+  markerItems: IMarker[];
+  markerCategories: IMarkerCategory[];
+  isEditMode: boolean;
+  zoom?: number;
+  center?: [number, number];
+  maxZoom?: number;
+  minZoom?: number;
+  title?: string;
+  height: number;
+  dragging: boolean;
+  scrollWheelZoom: boolean;
+  plugins: IMapPlugins;
+  tileLayerUrl: string;
+  tileLayerAttribution: string;
+  showPopUp: boolean; 
+  
+
+  onMarkerCollectionChanged(markerItems: IMarker[]);
+  onMarkerCategoriesChanged(markerCategories: IMarkerCategory[]);
+  onStartViewSet(zoomLevel: number, lat: number, lng: number);
+  onTitleUpdate?: (value: string) => void;
+}
+
+export const emptyMarkerItem: IMarker = {
+  id: Guid.empty.toString(),
+  latitude: 0,
+  longitude: 0,
+  type: "Panel",
+  markerClickProps: {
+    url: { href: "", target: '_blank' },
+    content: { html: '', headerText: ''  }
+  },
+  categoryId: Guid.empty.toString(),
+  iconProperties: {
+    markerColor: "#000000",
+    iconName: "FullCircleMask",
+    iconColor: "#ffffff"
+  },
+  popuptext: null
+};

samples/react-interactive-map/src/webparts/map/components/ManageMarkerCategoriesDialog.tsx

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import { IMarkerCategory } from './IMapProps';
+import './Map.module.scss';
+import { cloneDeep } from '@microsoft/sp-lodash-subset';
+import { Icon, Dialog, TextField, PrimaryButton, DefaultButton, getColorFromString, IColor, DialogFooter, DialogContent, DialogType, MessageBar, TooltipHost } from 'office-ui-fabric-react';
+import { Guid } from '@microsoft/sp-core-library';
+import { isNullOrEmpty, isFunction } from '@spfxappdev/utility';
+import { InlineColorPicker } from '@src/components/inlineColorPicker/InlineColorPicker';
+import '@spfxappdev/utility/lib/extensions/StringExtensions';
+import '@spfxappdev/utility/lib/extensions/ArrayExtensions';
+import { IconButton } from '@microsoft/office-ui-fabric-react-bundle';
+import { MarkerIcon } from './MarkerIcon';
+import * as strings from 'MapWebPartStrings';
+import { IconPicker } from '@src/components/iconPicker/IconPicker';
+
+export interface IManageMarkerCategoriesDialogProps {
+    markerCategories: IMarkerCategory[];
+    onDismiss();
+    onMarkerCategoriesChanged(markerCategories: IMarkerCategory[]);
+}
+
+interface IManageMarkerCategoriesDialogState {
+    markerCategories: IMarkerCategory[];
+    isSaveButtonDisabled: boolean;
+    isNewFormVisible: boolean;
+    isDialogVisible: boolean;
+}
+
+export default class ManageMarkerCategoriesDialog extends React.Component<IManageMarkerCategoriesDialogProps, IManageMarkerCategoriesDialogState> {
+
+    public state: IManageMarkerCategoriesDialogState = {
+        markerCategories: cloneDeep(this.props.markerCategories),
+        isSaveButtonDisabled: false,
+        isNewFormVisible: false,
+        isDialogVisible: true
+    };
+
+    constructor(props: IManageMarkerCategoriesDialogProps) {
+        super(props);
+
+    }
+
+    public componentDidMount(): void {
+        this.validateForm();
+    }
+    
+    public render(): React.ReactElement<IManageMarkerCategoriesDialogProps> {
+        return (
+        <Dialog 
+            hidden={!this.state.isDialogVisible}
+            onDismiss={() => { this.onDialogDismiss(); }}
+            dialogContentProps={{
+                title: strings.DialogTitleManageCategories,
+                type: DialogType.close
+            }}
+            minWidth={800}
+            modalProps={{
+                isBlocking: true,
+                className: "categories-dialog"
+                
+            }}
+        >
+            <DialogContent>
+                
+                <div className='spfxappdev-grid'>
+                    <MessageBar className='category-messagebar'>
+                    {isNullOrEmpty(this.state.markerCategories) && <>{strings.InfoTextNoCategories} </>}{strings.InfoTextCategories}
+                    </MessageBar>
+
+                {!isNullOrEmpty(this.state.markerCategories) &&
+                <>
+                    <div className='spfxappdev-grid-row grid-header'>
+                        <div className='spfxappdev-grid-col spfxappdev-sm1'></div>
+                        <div className='spfxappdev-grid-col spfxappdev-sm3'>{strings.LabelCategoryHeaderName}</div>
+                        <div className='spfxappdev-grid-col spfxappdev-sm1'>{strings.LabelMarkerColor}</div>
+                        <div className='spfxappdev-grid-col spfxappdev-sm3'>
+                            {strings.LabelIcon} 
+                            <TooltipHost content={strings.LabelLeaveEmpty}>
+                                <Icon className='info-tooltip' iconName='Info' />
+                            </TooltipHost></div>
+                        <div className='spfxappdev-grid-col spfxappdev-sm1'>{strings.LabelIconColor}</div>
+                        <div className='spfxappdev-grid-col spfxappdev-sm2'>
+                            {strings.LabelTooltip}
+                            <TooltipHost content={strings.TooltipInfoCategory}>
+                                <Icon className='info-tooltip' iconName='Info' />
+                            </TooltipHost>
+                        </div>
+                        <div className='spfxappdev-grid-col spfxappdev-sm1'></div>
+                    </div>
+                    {this.state.markerCategories.map((cat: IMarkerCategory, index: number): JSX.Element => {
+                        return (<div key={cat.id} className='spfxappdev-grid-row categories-grid' data-catid={cat.id}>
+                            {this.renderForm(cat, index)}
+                        </div>);
+                    })}
+                </>
+                }
+                    <div className='spfxappdev-grid-row grid-footer'>
+
+                        <div className='spfxappdev-grid-col spfxappdev-sm12'>
+                            <PrimaryButton 
+                            text={strings.AddLabel}
+                            onClick={() => {
+                                this.onAddNewCatagoryButtonClick();
+                            }} />
+                        </div>
+                        
+                    </div>
+                </div>
+                
+
+            </DialogContent>
+
+            <DialogFooter>
+                <PrimaryButton 
+                    onClick={() => {
+
+                        if(isFunction(this.props.onMarkerCategoriesChanged)) {
+                            this.props.onMarkerCategoriesChanged(this.state.markerCategories);
+                        }
+
+                        this.setState({
+                            isDialogVisible: false
+                        }); 
+                    }} 
+                    text={strings.SaveLabel} 
+                    disabled={this.state.isSaveButtonDisabled} 
+                />
+                <DefaultButton onClick={() => {
+                    this.onDialogDismiss();
+                }} text={strings.CancelLabel} />
+            </DialogFooter>
+
+        </Dialog>);
+    }
+
+    private renderForm(categoryItem: IMarkerCategory, index: number): JSX.Element {
+
+        return (
+        <>
+            <div className='spfxappdev-grid-col spfxappdev-sm1'>
+                <IconButton iconProps={{iconName: "Delete"}} onClick={() => {
+                    this.state.markerCategories.RemoveAt(index);
+                    this.validateForm();
+                }} />
+            </div>
+            <div className='spfxappdev-grid-col spfxappdev-sm3'>
+                <TextField 
+                    required={true}
+                    defaultValue={categoryItem.name} 
+                    onChange={(ev: any, name: string) => {
+                        this.state.markerCategories[index].name = name;
+                        this.validateForm();
+                    }}  
+                />
+            </div>
+            <div className='spfxappdev-grid-col spfxappdev-sm1'>
+                <InlineColorPicker 
+                    alphaType='none'
+                    color={getColorFromString(categoryItem.iconProperties.markerColor)}
+                    onChange={(ev: any, color: IColor) => {
+                        this.state.markerCategories[index].iconProperties.markerColor = "#" + color.hex;
+                        this.validateForm();
+                    }}
+                />
+            </div>
+            <div className='spfxappdev-grid-col spfxappdev-sm3'>
+                <IconPicker
+                    defaultValue={categoryItem.iconProperties.iconName}
+                    onIconChanged={(name: string) => {
+                        this.state.markerCategories[index].iconProperties.iconName = name;
+                        this.validateForm();
+                    }} 
+                />
+            </div>
+            <div className='spfxappdev-grid-col spfxappdev-sm1'>
+                <InlineColorPicker
+                    alphaType='none'
+                    color={getColorFromString(categoryItem.iconProperties.iconColor)}
+                    onChange={(ev: any, color: IColor) => {
+                        this.state.markerCategories[index].iconProperties.iconColor = "#" + color.hex;
+                        this.validateForm();
+                    }}
+                    isDisbaled={isNullOrEmpty(categoryItem.iconProperties.iconName)}
+                />
+            </div>
+            <div className='spfxappdev-grid-col spfxappdev-sm2'>
+                <TextField
+                    defaultValue={categoryItem.popuptext} 
+                    onChange={(ev: any, popuptext: string) => {
+                        this.state.markerCategories[index].popuptext = popuptext;
+                        this.validateForm();
+                    }}  
+                />
+            </div>
+            <div className='spfxappdev-grid-col spfxappdev-sm1'>
+                <div style={{position: "absolute"}}>
+                    <MarkerIcon {...categoryItem.iconProperties} />
+                </div>
+            </div>
+        </>
+        );
+    }
+
+    private validateForm(): void {
+        
+        const isSaveBtnDisabled = this.state.markerCategories.Contains(cat => isNullOrEmpty(cat.name) || isNullOrEmpty(cat.iconProperties.markerColor));
+
+        this.setState({
+            markerCategories: this.state.markerCategories,
+            isSaveButtonDisabled: isSaveBtnDisabled
+        });
+    }
+
+    private onAddNewCatagoryButtonClick(): void {
+        this.state.markerCategories.push(this.createNewCatagoryItem());
+
+        this.validateForm();
+    }
+
+    private createNewCatagoryItem(): IMarkerCategory {
+        const category: IMarkerCategory = {
+            id: Guid.newGuid().toString(),
+            name: "",
+            iconProperties: {
+                markerColor: "#000000",
+                iconName: "FullCircleMask",
+                iconColor: "#ffffff"
+            }
+        };
+
+        return category;
+    }
+
+    private onDialogDismiss(): void {
+        this.setState({
+            isDialogVisible: false
+        }); 
+        this.props.onDismiss();
+    }
+}

samples/react-interactive-map/src/webparts/map/components/Map.module.scss

@@ -0,0 +1,223 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+
+.map {
+  display: block;
+  min-height: 400px;
+  position: relative;
+}
+
+:global {
+  .map-icon {
+    position: absolute;
+    left: 8px;
+    top: 5px;
+    color: #fff;
+
+    i {
+      font-size: 12px;
+    }
+  }
+
+
+  .display-mode .marker-type-none {
+    cursor: default !important;
+  }
+
+  .manage-categories-label {
+    font-size: 10px;
+    color: #1190F4;
+    padding-left: 5px;
+    cursor: pointer;
+  }
+
+  .spfxappdev-grid {
+    box-sizing: border-box;
+    zoom: 1;
+    padding: 0 8px;
+
+    &::before,
+    &::after {
+        display: table;
+        content: '';
+        line-height: 0;
+        -webkit-box-sizing: inherit;
+        box-sizing: inherit;
+    }
+
+    &::after {
+        clear: both;
+    }
+
+    &-row {
+        margin: 0 -8px;
+        box-sizing: border-box;
+        zoom: 1;
+
+        &::before,
+        &::after {
+            display: table;
+            content: '';
+            line-height: 0;
+            -webkit-box-sizing: inherit;
+            box-sizing: inherit;
+        }
+
+        &::after {
+            clear: both;
+        }
+        
+    }
+
+    &-col {
+        position: relative;
+        min-height: 1px;
+        // padding-left: 8px;
+        // padding-right: 8px;
+        box-sizing: border-box;
+        float: left;
+    }
+  }
+
+  .spfxappdev-sm1 {
+      width: 8.33%
+  }
+
+  .spfxappdev-sm2 {
+      width: 16.66%;
+  }
+
+  .spfxappdev-sm3 {
+      width: 25%;
+  }
+
+  .spfxappdev-sm4 {
+      width: 33.33%;
+  }
+
+  .spfxappdev-sm5 {
+      width: 41.66%;
+  }
+
+  .spfxappdev-sm6 {
+      width: 50%;
+  }
+
+  .spfxappdev-sm7 {
+      width: 58.33%;
+  }
+
+  .spfxappdev-sm8 {
+      width: 66.66%;
+  }
+
+  .spfxappdev-sm9 {
+      width:75%;
+  }
+
+  .spfxappdev-sm10 {
+      width: 83.33%;
+  }
+
+  .spfxappdev-sm11 {
+      width: 91.66%;
+  }
+
+  .spfxappdev-sm12 {
+      width: 100%;
+  }
+
+  .grid-header {
+    background: $ms-color-themePrimary;
+    color: #fff;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .grid-footer {
+    margin-top: 10px
+  }
+
+  .categories-grid {
+    .spfxappdev-grid-col {
+      padding: 10px 2px;
+    }
+
+    &.spfxappdev-grid-row {
+      border-bottom: solid 1px #aeaeae;
+
+      &:nth-child(odd) {
+        background: $ms-color-themeLighter;
+      }
+    }
+  }
+
+  .iframe-dialog,
+  .categories-dialog {
+    .ms-Dialog-content .ms-Dialog-header {
+      display: none;
+    }
+  }
+
+  .iframe-dialog {
+    iframe {
+      border: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .ql-editor[contenteditable='true'] {
+    border: solid 1px $ms-color-themeDarker !important;
+  }
+
+  .panel-footer {
+    button {
+      margin: 0 5px;
+    }
+  }
+
+  .leaflet-popup-close-button {
+    display: none;
+  }
+
+  .leaflet-popup-tip-container {
+    margin-top: -1px;
+  }
+
+  .change-position-popup {
+    text-align: center;
+
+    label {
+      font-size: 24px;
+      font-weight: 600;
+    }
+
+    button {
+      margin: 0 5px;
+    }
+
+  }
+
+  .info-tooltip {
+    font-size: 10px;
+    padding-left: 4px;
+    vertical-align: middle;
+    cursor:help;
+  }
+
+  .wp-settings-info {
+    font-weight: 600;
+    padding: 20px 0;
+    color: $ms-color-themeDarker;
+  }
+
+  .category-messagebar {
+    margin-bottom: 10px;
+  }
+
+  .CanvasControlToolbar {
+    z-index: 2000 !important;
+  }
+}

samples/react-interactive-map/src/webparts/map/components/Map.tsx

@@ -0,0 +1,582 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import styles from './Map.module.scss';
+import { IMapProps, IMarker, IMarkerCategory, IMarkerIcon, emptyMarkerItem } from './IMapProps';
+import { cloneDeep } from '@microsoft/sp-lodash-subset';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import "leaflet/dist/leaflet.css";
+import "react-leaflet-markercluster/dist/styles.min.css";
+import * as L from 'leaflet';
+import { ContextualMenu, IContextualMenuItem, Panel, Dialog, IPanelProps, DefaultButton, PanelType, DialogType, DialogContent, Label, Separator, PrimaryButton } from 'office-ui-fabric-react';
+import { isset, isNullOrEmpty, getDeepOrDefault, cssClasses } from '@spfxappdev/utility';
+import '@spfxappdev/utility/lib/extensions/StringExtensions';
+import '@spfxappdev/utility/lib/extensions/ArrayExtensions';
+import { DisplayMode } from '@microsoft/sp-core-library';
+import { RichText } from "@pnp/spfx-controls-react/lib/RichText";
+import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
+import AddOrEditPanel from './AddOrEditPanel';
+import { isFunction } from 'lodash';
+import { MarkerIcon } from './MarkerIcon';
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+import * as strings from 'MapWebPartStrings';
+import SearchPlugin from './plugins/search/SearchPlugin';
+import LegendPlugin from './plugins/legend/LegendPlugin';
+
+interface IMapState {
+  markerItems: IMarker[];
+  markerCategories: IMarkerCategory[];
+  rightMouseTarget?: any;
+  showAddOrEditMarkerPanel: boolean;
+  currentMarker?: IMarker;
+  showClickContent: boolean;
+  changePositionMarkerId: string;
+}
+
+export default class Map extends React.Component<IMapProps, IMapState> {
+
+  public state: IMapState = {
+    markerItems: cloneDeep(this.props.markerItems),
+    markerCategories: cloneDeep(this.props.markerCategories),
+    showAddOrEditMarkerPanel: false,
+    showClickContent: false,
+    changePositionMarkerId: '-1'
+  };
+
+  private allCatagories: Record<string, IMarkerCategory> = {};
+
+  private menuItems: IContextualMenuItem[] = [
+    {
+      key: 'newItem',
+      text: strings.ContextMenuAddNewMarkerLabel,
+      onClick: () => {
+        this.onCreateNewMarkerContextMenuItemClick();
+      }
+    },
+    {
+      key: 'setStartView',
+      text: strings.ContextMenuSetStartPositionLabel,
+      onClick: () => {
+        this.onSetStartView();
+      }
+    }
+  ];
+
+  private map: L.Map = null;
+
+  private allLeafletMarker: Record<string, L.Marker> = {};
+
+  private lastLatLngRightClickPosition: L.LatLng;
+
+
+  constructor(props: IMapProps) {
+    super(props);
+    this.setAllCatagoriesDictionary();
+  }
+
+  public componentDidUpdate(prevProps: Readonly<IMapProps>, prevState: Readonly<IMapState>, snapshot?: any): void {
+
+    if(!JSON.stringify(prevProps.markerCategories).Equals(JSON.stringify(this.props.markerCategories))) {
+      this.setState({
+        markerCategories: cloneDeep(this.props.markerCategories)
+      }, () => {
+        this.setAllCatagoriesDictionary();
+      });
+    }
+
+  }
+
+  public render(): React.ReactElement<IMapProps> {
+   
+    this.allLeafletMarker = {};
+    // const isZoomControlEnabled: boolean = this.props.isEditMode ? true : getDeepOrDefault<boolean>(this.props, "plugins.zoomControl", true);
+    const isZoomControlEnabled: boolean = getDeepOrDefault<boolean>(this.props, "plugins.zoomControl", true);
+    const isScrollWheelZoomEnabled: boolean = this.props.isEditMode ? true : getDeepOrDefault<boolean>(this.props, "scrollWheelZoom", true);
+    const isDraggingEnabled: boolean = this.props.isEditMode ? true : getDeepOrDefault<boolean>(this.props, "dragging", true);
+    //
+    return (
+      <div className={styles.map}>
+        {(this.props.isEditMode || (!this.props.isEditMode && !isNullOrEmpty(this.props.title))) &&
+          <WebPartTitle displayMode={this.props.isEditMode?DisplayMode.Edit:DisplayMode.Read}
+                title={this.props.title}
+                updateProperty={this.props.onTitleUpdate} />
+        }      
+        
+      <MapContainer
+        className={this.props.isEditMode ? "edit-mode" : "display-mode"}
+        zoomControl={isZoomControlEnabled} 
+        center={this.props.center} 
+        zoom={this.props.zoom} 
+        maxZoom={this.props.maxZoom}
+        minZoom={this.props.minZoom} 
+        scrollWheelZoom={isScrollWheelZoomEnabled}
+        touchZoom={isScrollWheelZoomEnabled}
+        doubleClickZoom={isScrollWheelZoomEnabled}
+        dragging={isDraggingEnabled}
+        whenCreated={(map: L.Map) => {
+            map.on("contextmenu", (ev: L.LeafletEvent) => {
+
+              if (!this.props.isEditMode) {
+                return;
+              }
+
+              this.lastLatLngRightClickPosition = (ev as any).latlng;
+
+              this.setState({
+                rightMouseTarget: {
+                  x: ((ev as any).originalEvent as MouseEvent).clientX, 
+                  y: ((ev as any).originalEvent as MouseEvent).clientY 
+                }
+              });
+
+            });
+
+            this.map = map;
+          }
+        }  
+        style={{height: isNullOrEmpty(this.props.height) ? "400px" : `${this.props.height}px`}}
+        >
+        <TileLayer
+          attribution={`<a href="https://spfx-app.dev/">SPFx-App.dev</a> | ${this.props.tileLayerAttribution}`}
+          url={this.props.tileLayerUrl}
+        />
+
+
+        {this.props.plugins.markercluster &&
+          <MarkerClusterGroup>
+            {this.renderMarker()}
+          </MarkerClusterGroup>
+        }
+
+        {!this.props.plugins.markercluster &&
+            this.renderMarker()
+        }
+        
+        {this.renderSearchBox()}
+        {this.renderLegend(isZoomControlEnabled)}
+      </MapContainer>
+      
+      
+
+        {this.props.isEditMode &&
+          <ContextualMenu
+            items={this.menuItems}
+            hidden={typeof this.state.rightMouseTarget == "undefined"}
+            target={this.state.rightMouseTarget}
+            onItemClick={() => {
+
+            }}
+            onDismiss={() => {
+              this.setState({
+                rightMouseTarget: undefined
+              });
+            }}
+          />
+        }
+        {this.showAddOrEditMarkerPanel()}
+        {this.showClickContent()}
+      </div>
+    );
+  }
+
+  private renderMarker(): JSX.Element {
+    return (
+      <>
+      {this.state.markerItems.map((marker: IMarker, index: number): JSX.Element => {
+      const useCategory: boolean = isset(this.allCatagories[marker.categoryId]);
+      const markerCategory: IMarkerCategory = useCategory ? this.allCatagories[marker.categoryId] : null;
+      const popupText: string = !useCategory ? marker.popuptext : isNullOrEmpty(markerCategory.popuptext) ? markerCategory.name : markerCategory.popuptext;
+      const isDraggable: boolean = marker.id.Equals(this.state.changePositionMarkerId);
+
+      return (
+        <Marker 
+          draggable={isDraggable}  
+          position={[marker.latitude, marker.longitude]} 
+          key={`marker_${marker.id}`} 
+          icon={this.createIcon(marker, markerCategory)}
+          ref={(ref: L.Marker) => {
+
+            if(!isset(ref)) {
+              return;
+            }
+
+            this.allLeafletMarker[marker.id] = ref;
+
+            if(this.state.changePositionMarkerId.Equals(marker.id)) {
+              setTimeout(() => {
+                ref.openPopup();
+              }, 300);
+            }
+
+          }}
+          eventHandlers={
+          {
+           
+            click: (ev: L.LeafletMouseEvent) => {
+
+                if(this.state.changePositionMarkerId.length >= 32) {
+                  return;
+                }
+
+                let showEditPanel: boolean = this.props.isEditMode;
+
+                this.setState({
+                  currentMarker: marker,
+                  showClickContent: !showEditPanel,
+                  showAddOrEditMarkerPanel: showEditPanel
+                });
+            },
+            mouseover: (ev: L.LeafletMouseEvent) => {
+
+              if(!this.props.showPopUp) {
+                return;
+              }
+
+              if(this.state.changePositionMarkerId.length >= 32) {
+                  return;
+              }
+
+              (ev.target as any).openPopup();                  
+            },
+            mouseout: (ev: L.LeafletMouseEvent) => {
+
+              if(!this.props.showPopUp) {
+                return;
+              }
+
+              if(this.state.changePositionMarkerId.length >= 32) {
+                return;
+              }
+
+              (ev.target as any).closePopup();                  
+            },
+            dragend: (ev: L.DragEndEvent) => {
+              const currentMarker = (ev.target as any);
+
+              setTimeout(() => {
+                if(isset(marker)) {
+                  currentMarker.openPopup();
+                }
+              }, 300);
+            }
+          }
+        } 
+        >
+          {this.props.showPopUp && this.state.changePositionMarkerId != marker.id && !isNullOrEmpty(popupText) &&
+            <Popup>
+              {popupText}
+            </Popup>
+          }
+
+          {this.state.changePositionMarkerId == marker.id &&
+            <Popup>
+              <div className="change-position-popup">
+              <Label>{strings.LabelChangePosition}</Label>
+              <Separator />
+              <PrimaryButton
+                text={strings.SaveLabel}
+                onClick={() => {
+
+                  const currentMarker = this.allLeafletMarker[marker.id];
+                  const latLng: L.LatLng = currentMarker.getLatLng();
+
+                  this.state.markerItems[index].latitude = latLng.lat;
+                  this.state.markerItems[index].longitude = latLng.lng;
+
+                  currentMarker.dragging.disable();
+
+                  this.setState({
+                    changePositionMarkerId: "-1",
+                    showAddOrEditMarkerPanel: true,
+                    markerItems: this.state.markerItems
+                  });
+
+                  if(isFunction(this.props.onMarkerCollectionChanged)) {
+                    this.props.onMarkerCollectionChanged(this.state.markerItems); 
+                  }
+
+                }}
+              />
+              <DefaultButton
+                text={strings.CancelLabel} 
+                onClick={() => {
+
+                  const currentMarker = this.allLeafletMarker[marker.id];
+                  currentMarker.setLatLng([marker.latitude, marker.longitude]);
+
+                  currentMarker.dragging.disable();
+
+                  this.setState({
+                    changePositionMarkerId: "-1",
+                    showAddOrEditMarkerPanel: true
+                  });
+                }}
+              />
+              </div>
+            </Popup>
+          }
+        </Marker>
+      );
+    })}
+    </>
+    );
+  }
+
+  private renderLegend(isZoomControlEnabled: boolean): JSX.Element {
+    if(!getDeepOrDefault<boolean>(this.props, "plugins.legend", false) || isNullOrEmpty(this.state.markerCategories)) {
+      return (<></>);
+    }
+
+    return (
+      <LegendPlugin isZoomControlVisible={isZoomControlEnabled} markerCategories={this.state.markerCategories} />
+    );
+  }
+
+  private renderSearchBox(): JSX.Element {
+
+    if(!this.props.plugins.searchBox) {
+      return (<></>);
+    }
+
+    return (
+      <SearchPlugin onLocationSelected={(lat: number, lon: number) => {
+        this.map.setView([lat, lon], this.props.maxZoom > 18 ? 18 : this.props.maxZoom);
+
+        const defaultRadius = 12;
+        const circleOptions = {
+            inner: {
+                color: '#136AEC',
+                fillColor: '#2A93EE',
+                fillOpacity: 1,
+                weight: 1.5,
+                opacity: 0.7,
+                radius: defaultRadius / 4
+            },
+            outer: {
+                color: "#136AEC",
+                fillColor: "#136AEC",
+                fillOpacity: 0.15,
+                opacity: 0.3,
+                weight: 1,
+                radius: defaultRadius
+            }
+        };
+
+        L.circle([lat, lon], circleOptions.outer).addTo(this.map);
+        L.circle([lat, lon], circleOptions.inner).addTo(this.map);
+      }} />
+    );
+  }
+
+  private showClickContent(): JSX.Element {
+    if(!this.state.showClickContent || isNullOrEmpty(this.state.currentMarker)) {
+      return (<></>);
+    }
+
+    if(this.state.currentMarker.type == "None") {
+      return (<></>);
+    }
+
+    if(this.state.currentMarker.type == "Url" && this.state.currentMarker.markerClickProps.url.target != "embedded") {
+      window.open(this.state.currentMarker.markerClickProps.url.href, this.state.currentMarker.markerClickProps.url.target);
+      return (<></>);
+    }
+
+    if (this.state.currentMarker.type == "Panel") {
+      return (<Panel
+        type={PanelType.medium}
+        isOpen={true}
+        onDismiss={() => { this.onContentPanelOrDialogDismiss(); }}
+        headerText={this.state.currentMarker.markerClickProps.content.headerText}
+        closeButtonAriaLabel="Close"
+        onRenderFooterContent={(props: IPanelProps) => {
+          return (<div>
+            <DefaultButton onClick={() => { this.onContentPanelOrDialogDismiss(); }}>Close</DefaultButton>
+          </div>);
+        }}
+        // Stretch panel content to fill the available height so the footer is positioned
+        // at the bottom of the page
+        isFooterAtBottom={true}
+      >
+        <RichText isEditMode={false} value={this.state.currentMarker.markerClickProps.content.html} />
+
+      </Panel>);
+    }
+
+    const width: number = window.innerWidth - 100;
+    const height: number = window.innerHeight - 300;
+    let dialogWidth = 900;
+    
+    if(width < dialogWidth || this.state.currentMarker.type == "Url") {
+      dialogWidth = width; 
+    }
+
+    return (
+      <Dialog 
+            hidden={false}
+            onDismiss={() => { this.onContentPanelOrDialogDismiss(); }}
+            dialogContentProps={{
+                title: this.state.currentMarker.markerClickProps.content.headerText,
+                type: DialogType.close
+            }}
+            minWidth={dialogWidth}
+            modalProps={{
+                isBlocking: true,
+                className: "iframe-dialog",
+            }}
+        >
+          <DialogContent>
+              {this.state.currentMarker.type == "Dialog" && <RichText isEditMode={false} value={this.state.currentMarker.markerClickProps.content.html} />}
+              {this.state.currentMarker.type == "Url" && 
+                <div style={{height: `${height}px`}}>
+                  <iframe src={this.state.currentMarker.markerClickProps.url.href}></iframe>
+                </div>
+              }
+          </DialogContent>
+        </Dialog>
+    );
+
+  }
+
+  private showAddOrEditMarkerPanel(): JSX.Element {
+
+    if(!this.state.showAddOrEditMarkerPanel || !this.props.isEditMode) {
+      return (<></>);
+    }
+
+    return (
+      <AddOrEditPanel 
+        markerCategories={this.state.markerCategories} 
+        markerItem={this.state.currentMarker} 
+        onDismiss={() => { this.onConfigPanelDismiss(); }}
+        onDeleteMarker={(markerItem: IMarker) => {
+
+          const markerIndex: number = this.state.markerItems.IndexOf(m => m.id == markerItem.id);
+
+
+          this.state.markerItems.RemoveAt(markerIndex);
+          
+          if(isFunction(this.props.onMarkerCollectionChanged)) {
+            this.props.onMarkerCollectionChanged(this.state.markerItems); 
+          }
+
+          this.state.rightMouseTarget = undefined;
+          this.onConfigPanelDismiss();
+
+          
+        }}
+        onChangePositionClick={(markerItem: IMarker) => {
+
+          this.setState({
+            changePositionMarkerId: markerItem.id,
+            showAddOrEditMarkerPanel: false
+          });
+
+
+          
+        }}
+        onMarkerCategoriesChanged={(markerCategories: IMarkerCategory[]) => {
+          this.state.markerCategories = markerCategories;
+
+          if(isFunction(this.props.onMarkerCategoriesChanged)) {
+            this.props.onMarkerCategoriesChanged(markerCategories); 
+          }
+
+          this.setAllCatagoriesDictionary();
+
+          this.setState({
+            markerCategories: markerCategories
+          });
+        }}
+        onMarkerChanged={(markerItem: IMarker, isNewMarker: boolean) => {
+
+          if(isNewMarker) {
+            this.state.markerItems.push(markerItem);
+          }
+          else {
+            const markerIndex: number = this.state.markerItems.IndexOf(m => m.id == markerItem.id);
+
+            if(markerIndex >= 0) {
+              this.state.markerItems[markerIndex] = markerItem;
+            }
+          }
+
+          this.state.rightMouseTarget = undefined;
+
+          if(isFunction(this.props.onMarkerCollectionChanged)) {
+            this.props.onMarkerCollectionChanged(this.state.markerItems); 
+          }
+
+          this.onConfigPanelDismiss();
+        }}
+      />
+    );
+  }
+
+  private onConfigPanelDismiss(): void {
+    this.setState({
+      showAddOrEditMarkerPanel: false,
+      currentMarker: null
+    });
+  }
+
+  private onContentPanelOrDialogDismiss(): void {
+    this.setState({
+      showClickContent: false,
+      currentMarker: null
+    });
+  }
+
+  private createIcon(marker: IMarker, markerCategory: IMarkerCategory ): L.Icon {
+    const markerIcon = new L.Icon({
+      iconAnchor: [13, 36],
+      popupAnchor: [0, -36],
+      shadowUrl: null,
+      shadowSize: null,
+      shadowAnchor: null,
+      iconSize: new L.Point(27, 36),
+      className: cssClasses('leaflet-div-icon', `marker-type-${marker.type.toLowerCase()}`)
+    });
+    
+    markerIcon.createIcon = (oldIcon: HTMLElement) => {
+      const wrapper = document.createElement("div");    
+      wrapper.classList.add("leaflet-marker-icon");
+      wrapper.classList.add(`marker-type-${marker.type.toLowerCase()}`);
+
+      wrapper.dataset.markerid = marker.id;
+    
+      wrapper.style.marginLeft = (markerIcon.options.iconAnchor[0] * -1) + "px";
+      wrapper.style.marginTop = (markerIcon.options.iconAnchor[1] * -1) + "px";
+      const iconProperties: IMarkerIcon = isNullOrEmpty(markerCategory) ? marker.iconProperties : markerCategory.iconProperties;
+      ReactDom.render(<MarkerIcon {...iconProperties} />, wrapper);
+    
+      return wrapper;
+    };
+
+    return markerIcon as any as L.Icon;
+  }
+
+  private onCreateNewMarkerContextMenuItemClick(): void {
+    this.state.currentMarker = cloneDeep(emptyMarkerItem);
+    this.state.currentMarker.latitude = this.lastLatLngRightClickPosition.lat;
+    this.state.currentMarker.longitude = this.lastLatLngRightClickPosition.lng;
+    this.state.showAddOrEditMarkerPanel = true;
+
+    this.setState({...this.state});
+  }
+
+  private onSetStartView(): void {
+
+    if(isFunction(this.props.onStartViewSet)) {
+      const zoom: number = this.map.getZoom();
+      const latLng: L.LatLng = this.map.getCenter();
+      this.props.onStartViewSet(zoom, latLng.lat, latLng.lng);
+    }
+  }
+
+  private setAllCatagoriesDictionary(): void {
+    this.allCatagories = {};
+    this.state.markerCategories.forEach((category: IMarkerCategory) => {
+      this.allCatagories[category.id] = category;
+    });
+  }
+}

samples/react-interactive-map/src/webparts/map/components/MarkerIcon.tsx

@@ -0,0 +1,21 @@
+import { Icon } from 'office-ui-fabric-react';
+import * as React from 'react';
+import { IMarkerIcon } from './IMapProps';
+
+
+export const MarkerIcon: React.FunctionComponent<IMarkerIcon> = (iconProperties): JSX.Element => {
+    
+    const iconColor: React.CSSProperties = {
+        color: iconProperties.iconColor.slice()
+    };
+
+    return (
+    <span>
+        <svg height="36px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill={iconProperties.markerColor}>
+          {/* Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */}
+          <path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"/>
+        </svg>
+        <span className="map-icon" style={iconColor}><Icon iconName={iconProperties.iconName} /></span>
+    </span>
+    );
+};

samples/react-interactive-map/src/webparts/map/components/plugins/legend/LegendPlugin.module.scss

@@ -0,0 +1,60 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+
+.map-plugin-legend {
+    display: block;
+    
+
+    &-bottom {
+        top: 80px;
+    }
+
+    button {
+        outline: none;
+        border-radius: 2px;
+        height: 32px;
+        border: 2px solid rgba(0,0,0,0.2);
+        background-clip: padding-box;
+        font-size: 1.4em;
+        background: #fff;
+        cursor: pointer;
+    }
+}
+
+:global {
+    .map-legend {
+        margin: 10px;
+
+        &-title {
+            font-weight: 700;
+            text-align: center;
+            font-size: 1.5em;
+        }
+
+        &-marker-item {
+            display: flex;
+            padding: 5px 10px;
+            align-items: center;
+
+            &-icon {
+                width: 35px;
+            }
+
+            label {
+                margin: 0 10px;
+                padding: 1px 0;
+                font-size: 12px;
+            }
+        }
+
+        &-marker-wrapper {
+            position: relative; 
+            height: 36px; 
+            //   float: left;
+            
+                & > div {
+                    position: absolute;
+                }    
+        }
+      }
+}

samples/react-interactive-map/src/webparts/map/components/plugins/legend/LegendPlugin.tsx

@@ -0,0 +1,82 @@
+import { Callout } from '@microsoft/office-ui-fabric-react-bundle';
+import { randomString } from '@spfxappdev/utility';
+import * as strings from 'MapWebPartStrings';
+import { Icon, Label, Separator } from 'office-ui-fabric-react';
+import * as React from 'react';
+import { IMarkerCategory } from '../../IMapProps';
+import { MarkerIcon } from '../../MarkerIcon';
+import styles from './LegendPlugin.module.scss';
+
+
+
+export interface ILegendPluginProps {
+    markerCategories: IMarkerCategory[];
+    isZoomControlVisible: boolean;
+}
+
+interface ILegendPluginState {
+    isCalloutVisible: boolean;
+}
+
+export default class LegendPlugin extends React.Component<ILegendPluginProps, ILegendPluginState> {
+
+    public state: ILegendPluginState = {
+        isCalloutVisible: false
+    };
+
+    private randomId: string;
+
+    constructor(props: ILegendPluginProps) {
+        super(props);
+        this.randomId = `map_legend_${randomString(6)}`;
+    }
+    
+    public render(): React.ReactElement<ILegendPluginProps> {
+
+        let cssClass = styles['map-plugin-legend'];
+        if(this.props.isZoomControlVisible) {
+            cssClass += ' ' + styles['map-plugin-legend-bottom'];
+        }
+
+        return (
+            <div className={`leaflet-top leaflet-left ${cssClass}`}>
+                <div className="leaflet-control leaflet-bar">
+                <button 
+                    type="button" 
+                    id={this.randomId} 
+                    onClick={() => {
+                        const isVisible: boolean = this.state.isCalloutVisible ? false : true;
+
+                        this.setState({
+                            isCalloutVisible: isVisible
+                        });
+                    }}
+                >
+                    <Icon iconName="Info" />
+                </button>
+                <Callout 
+                    target={`#${this.randomId}`} 
+                    onDismiss={() => { this.setState({ isCalloutVisible: false }); }}
+                    hidden={!this.state.isCalloutVisible}>
+                    <div className='map-legend'>
+                        <Label className="map-legend-title">{strings.LegendLabel}</Label>
+                        <Separator />
+                        {this.props.markerCategories.map((cat: IMarkerCategory): JSX.Element => {
+                        return (
+                        <div key={`legend_${cat.id}`} className="map-legend-marker-item">
+                            <div className='map-legend-marker-item-icon'>
+                                <div className='map-legend-marker-wrapper'>
+                                    <div style={{}}>
+                                        <MarkerIcon {...cat.iconProperties} /> 
+                                    </div>
+                                </div>
+                            </div>
+                            <Label>{cat.name}</Label>
+                        </div>);
+                        })}
+                    </div>
+                </Callout>
+                </div>
+            </div>);
+    }
+}

samples/react-interactive-map/src/webparts/map/components/plugins/search/SearchPlugin.module.scss

@@ -0,0 +1,61 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+
+.map-plugin-search {
+    display: block;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    position: absolute;
+
+    button {
+        outline: none;
+        border-radius: 2px;
+        height: 32px;
+        border: 2px solid rgba(0,0,0,0.2);
+        background-clip: padding-box;
+        font-size: 1.4em;
+        background: #fff;
+        cursor: pointer;
+    }
+
+    .textbox {
+        display: inline-block !important;
+        border-width: 0px;
+        padding: 0;
+
+        div {
+            border-width: 0px;
+        }
+    }
+}
+
+.suggesstion {
+    display: block;
+
+    &-item {
+        display: flex;
+        padding: 5px 20px;
+        border-bottom: solid 1px $ms-color-themeLighter;
+        border-top: solid 1px $ms-color-themeLighter;
+        align-items: center;
+        cursor: pointer;
+
+        &:first-child {
+            border-top-width: 0;
+        }
+
+        &:last-child {
+            border-bottom-width: 0;
+        }
+
+        i {
+            padding-right: 20px;
+            font-size: 2em;
+        }
+
+        span {
+            font-size: 1em;
+        }
+    }
+}

samples/react-interactive-map/src/webparts/map/components/plugins/search/SearchPlugin.tsx

@@ -0,0 +1,106 @@
+import { isFunction, isNullOrEmpty } from '@spfxappdev/utility';
+import { Autocomplete } from '@src/components/autocomplete/Autocomplete';
+import * as strings from 'MapWebPartStrings';
+import { Icon } from 'office-ui-fabric-react';
+import * as React from 'react';
+import styles from './SearchPlugin.module.scss';
+
+export interface ISearchPluginProps {
+    nominatimUrl?: string;
+    resultLimit?: number;
+    onLocationSelected?(latitude: number, longitude: number): void;
+}
+
+interface ISearchResult {
+    place_id: number;
+    display_name: string;
+    lat: string;
+    lon: string;
+}
+
+interface ISearchPluginState {
+    searchResult: Array<ISearchResult>;
+    isSearchBoxVisible: boolean;
+}
+
+export default class SearchPlugin extends React.Component<ISearchPluginProps, ISearchPluginState> {
+
+    public state: ISearchPluginState = {
+        searchResult: [],
+        isSearchBoxVisible: false
+    };
+
+    public static defaultProps: ISearchPluginProps = {
+        nominatimUrl: "https://nominatim.openstreetmap.org/search",
+        resultLimit: 3
+    };
+    
+    
+    public render(): React.ReactElement<ISearchPluginProps> {
+        return (
+        <div className={styles["map-plugin-search"]}>
+            {this.state.isSearchBoxVisible &&
+                <Autocomplete
+                    className={styles['textbox']} 
+                    onRenderSuggestions={(searchTerm: string) => {
+                        return this.renderSuggesstionsFlyout(searchTerm);
+                    }}
+                    onChange={async (ev: any, searchTerm: string) => {
+                        const result = await this.makeSearchRequest(searchTerm);
+                        this.setState({
+                            searchResult: result
+                        });
+                }} />
+            }
+
+            <button type="button" onClick={() => {
+                const isVisible: boolean = this.state.isSearchBoxVisible ? false : true;
+
+                this.setState({
+                    isSearchBoxVisible: isVisible
+                });
+            }}>
+                <Icon iconName="Search" />
+            </button>
+        </div>);
+    }
+
+    private renderSuggesstionsFlyout(searchTerm: string): JSX.Element {
+        
+        const results = this.state.searchResult;
+
+        if(isNullOrEmpty(results)) {
+            return (<>
+            {strings.NoSearchResultsLabel}
+                </>);
+        }
+
+        return (<div className={styles["suggesstion"]}>
+        {results.map((location: ISearchResult, index: number): JSX.Element => {
+            return (<div 
+                key={`Icon_${index}_${location.place_id}`}
+                onClick={() => {
+
+                    if(isFunction(this.props.onLocationSelected)) {
+                        this.props.onLocationSelected(parseFloat(location.lat), parseFloat(location.lon));
+                    }
+
+                    this.setState({
+                        isSearchBoxVisible: false
+                    });
+                }}
+                className={styles["suggesstion-item"]}>
+                    {location.display_name}
+                </div>);
+        })}
+        </div>);
+        
+    }
+
+    private async makeSearchRequest(searchTerm: string): Promise<ISearchResult[]> {
+
+        const response = await fetch(`${this.props.nominatimUrl}?format=json&limit=${this.props.resultLimit}&q=${searchTerm}`);
+        const responseJson = await response.json();
+        return responseJson;
+    }
+}

samples/react-interactive-map/src/webparts/map/loc/en-us.js

@@ -0,0 +1,65 @@
+define([], function() {
+  return {
+  "WebPartPropertyGroupMapSettings": "General settings",
+  "WebPartPropertyGroupTileLayerSettings": "Tile Layer",
+  "WebPartPropertyGroupPlugins": "Plugins/Controls",
+  "WebPartPropertyGroupCategories": "Categories",
+  "WebPartPropertyGroupAbout": "About",
+  "WebPartPropertyPluginSearchboxLabel": "Show Searchbox",
+  "WebPartPropertyPluginMarkerClusterLabel": "Enable marker cluster",
+  "WebPartPropertyPluginLegendLabel": "Show legend",
+  "WebPartPropertyButtonManageCategories": "Manage categories",
+  "WebPartPropertyPluginZoomControlLabel": "Show zoom control",
+  "WebPartPropertyScrollWheelZoomLabel": "Enable zoom on mouse wheel/touch (only in display mode)",
+  "WebPartPropertyMapDraggingLabel": "Enable dragging in map (only in display mode)",
+  "WebPartPropertyShowPopUpLabel": "Show tooltip when hovering the marker",
+  "WebPartPropertySettingsInfoLabel": "Most of these settings take effect only after a page refresh and only in display mode",
+  "WebPartPropertyMinZoomLabel": "Minimum zoom level (zoom out)",
+  "WebPartPropertyMaxZoomLabel": "Maximum zoom level (zoom in, depends on Tile layer)",
+  "WebPartPropertyHeightLabel": "Map height (in px)",
+  "WebPartPropertyTileLayerUrlInformationLabel": "In this section you can change the tile layer and attribution. You can find more tile layers e.g. <a href='https://leaflet-extras.github.io/leaflet-providers/preview/' data-interception='off' target='_blank'>here</a>",
+  "WebPartPropertyTileLayerUrlLabel": "Tile layer URL",
+  "WebPartPropertyTileLayerAttributionLabel": "Tile layer attribution",
+  "ContextMenuAddNewMarkerLabel": "Add a new marker here",
+  "ContextMenuSetStartPositionLabel": "Make this view as start position",
+  "LabelChangePosition": "Change position",
+  "SaveLabel": "Save",
+  "CancelLabel": "Cancel",
+  "CloseLabel": "Close",
+  "LegendLabel": "Legend",
+  "ChoiceGroupPanelLabel": "Panel",
+  "ChoiceGroupDialogLabel": "Dialog",
+  "ChoiceGroupUrlLabel": "Url",
+  "ChoiceGroupNoneLabel": "None (not clickable)",
+  "ChoiceGroupTargetSelfLabel": "Open in same window",
+  "ChoiceGroupTargetBlankLabel": "Open in new window",
+  "ChoiceGroupTargetEmbeddedLabel": "Embedded (Dialog/iFrame)",
+  "PanelHeaderNewLabel": "Create new marker",
+  "PanelHeaderEditLabel": "Edit marker",
+  "LabelCategory": "Category",
+  "LabelManage": "Manage",
+  "PlaceholderSelectACategory": "Select a category",
+  "LabelMarkerType": "Type of marker (on click)",
+  "DeleteLabel": "Delete",
+  "ChangePositionLabel": "Change Position",
+  "LabelMarkerColor": "Marker color",
+  "LabelIcon": "Icon",
+  "LabelLeaveEmpty": "Leave blank to show no icon",
+  "LabelIconColor": "Icon color",
+  "LabelTooltip": "Tooltip text",
+  "TooltipInfoCategory": "For categories, the name of the category is displayed when hovering over the marker (if enabled in the web part settings). This text can be overwritten here.",
+  "TooltipInfo": "When hovering over the marker, this text is displayed (if enabled in the webpart settings)",
+  "LabelLeaveEmptyTooltip": "Leave blank to show no tooltip",
+  "LabelPreview": "Preview",
+  "LabelPanelHeader": "Panel Header",
+  "LabelDialogHeader": "Dialog Header",
+  "LabelContent": "Content",
+  "LabelUrl": "Url",
+  "DialogTitleManageCategories": "Manage categories",
+  "InfoTextNoCategories": "Currently there are no categories.",
+  "InfoTextCategories": "Markers can be assigned to categories. If you change the category, this change will be applied to all markers assigned to this category. If you delete a category, the default configuration is used.",
+  "LabelCategoryHeaderName": "Name",
+  "AddLabel": "Add",
+  "NoSearchResultsLabel": "No Results"
+  }
+});

samples/react-interactive-map/src/webparts/map/loc/mystrings.d.ts

@@ -0,0 +1,68 @@
+declare interface IMapWebPartStrings {
+  WebPartPropertyGroupMapSettings: string;
+  WebPartPropertyGroupTileLayerSettings: string;
+  WebPartPropertyGroupPlugins: string;
+  WebPartPropertyGroupCategories: string;
+  WebPartPropertyGroupAbout: string;
+  WebPartPropertyPluginSearchboxLabel: string;
+  WebPartPropertyPluginMarkerClusterLabel: string;
+  WebPartPropertyPluginLegendLabel: string;
+  WebPartPropertyButtonManageCategories: string;
+  WebPartPropertyPluginZoomControlLabel: string;
+  WebPartPropertyScrollWheelZoomLabel: string;
+  WebPartPropertyMapDraggingLabel: string;
+  WebPartPropertyShowPopUpLabel: string;
+  WebPartPropertySettingsInfoLabel: string;
+  WebPartPropertyMinZoomLabel: string;
+  WebPartPropertyMaxZoomLabel: string;
+  WebPartPropertyHeightLabel: string;
+  WebPartPropertyTileLayerUrlInformationLabel: string;
+  WebPartPropertyTileLayerUrlLabel: string;
+  WebPartPropertyTileLayerAttributionLabel: string;
+  ContextMenuAddNewMarkerLabel: string;
+  ContextMenuSetStartPositionLabel: string;
+  LabelChangePosition: string;
+  SaveLabel: string;
+  CancelLabel: string;
+  CloseLabel: string;
+  LegendLabel: string;
+  ChoiceGroupPanelLabel: string;
+  ChoiceGroupDialogLabel: string;
+  ChoiceGroupUrlLabel: string;
+  ChoiceGroupNoneLabel: string;
+  ChoiceGroupTargetSelfLabel: string;
+  ChoiceGroupTargetBlankLabel: string;
+  ChoiceGroupTargetEmbeddedLabel: string;
+  PanelHeaderNewLabel: string;
+  PanelHeaderEditLabel: string;
+  LabelCategory: string;
+  LabelManage: string;
+  PlaceholderSelectACategory: string;
+  LabelMarkerType: string;
+  DeleteLabel: string;
+  ChangePositionLabel: string;
+  LabelMarkerColor: string;
+  LabelIcon: string;
+  LabelLeaveEmpty: string;
+  LabelIconColor: string;
+  LabelTooltip: string;
+  TooltipInfoCategory: string;
+  TooltipInfo: string;
+  LabelLeaveEmptyTooltip: string;
+  LabelPreview: string;
+  LabelPanelHeader: string;
+  LabelDialogHeader: string;
+  LabelContent: string;
+  LabelUrl: string;
+  DialogTitleManageCategories: string;
+  InfoTextNoCategories: string;
+  InfoTextCategories: string;
+  LabelCategoryHeaderName: string;
+  AddLabel: string;
+  NoSearchResultsLabel: string;
+}
+
+declare module 'MapWebPartStrings' {
+  const strings: IMapWebPartStrings;
+  export = strings;
+}

samples/react-interactive-map/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
+  "compilerOptions": {
+    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "outDir": "lib",
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["src/*"],
+      "@webparts/*": ["src/webparts/*"]
+    },
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
+    "types": [
+      "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection",
+      "es2015.promise"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}

samples/react-interactive-map/tslint.json

@@ -0,0 +1,29 @@
+{
+  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
+  "rules": {
+    "class-name": false,
+    "export-name": false,
+    "forin": false,
+    "label-position": false,
+    "member-access": true,
+    "no-arg": false,
+    "no-console": false,
+    "no-construct": false,
+    "no-duplicate-variable": true,
+    "no-eval": false,
+    "no-function-expression": true,
+    "no-internal-module": true,
+    "no-shadowed-variable": true,
+    "no-switch-case-fall-through": true,
+    "no-unnecessary-semicolons": true,
+    "no-unused-expression": true,
+    "no-with-statement": true,
+    "semicolon": true,
+    "trailing-comma": false,
+    "typedef": false,
+    "typedef-whitespace": false,
+    "use-named-parameter": true,
+    "variable-name": false,
+    "whitespace": false
+  }
+}