Getting Started with the GISEYE GIS Development Kit: Setup & Examples

Getting Started with the GISEYE GIS Development Kit: Setup & Examples

This guide walks you through installing the GISEYE GIS Development Kit, configuring a basic project, and building two practical examples: a simple map viewer and a feature-editor that adds and updates point data. Assumes familiarity with JavaScript/TypeScript and basic GIS concepts.

Prerequisites

• Node.js 16+ and npm or yarn
• Git
• A code editor (VS Code recommended)
• Basic knowledge of spatial data formats (GeoJSON, shapefile)
• Optional: an API key or local tile server if you plan to use commercial basemaps

Installation and Project Setup

1. Create a new project folder and initialize:

   bash
   Copy CodeCopied
   mkdir giseeye-demo cd giseeye-demo npm init -y 

2. Install the GISEYE SDK and common dependencies (assumes package name giseeye-sdk):

   bash
   Copy CodeCopied
   npm install giseeye-sdk mapbox-gl @types/mapbox-gl npm install –save-dev typescript webpack webpack-cli ts-loader 

3. Add a basic TypeScript configuration (tsconfig.json):

   json
   Copy CodeCopied
   {
   “compilerOptions”: {
       “target”: “ES2020”,
       “module”: “ESNext”,
       “moduleResolution”: “node”,
       “strict”: true,
       “esModuleInterop”: true,
       “skipLibCheck”: true,
       “outDir”: ”./dist”
     },
     “include”: [“src”]
   }
   

4. Create a minimal Webpack config (webpack.config.js):

   js
   Copy CodeCopied
   const path = require(‘path’);
   module.exports = {
     entry: ’./src/index.ts’,
     mode: ‘development’,
     devtool: ‘source-map’,
     module: {
       rules: [{ test: /.ts$/, use: ‘ts-loader’, exclude: /node_modules/ }]
     },
     resolve: { extensions: [’.ts’, ’.js’] },
     output: { filename: ‘bundle.js’, path: path.resolve(__dirname, ‘dist’) }
   };
   

5. Create HTML shell (dist/index.html): “`html