inmaa-map v0.3.36

Inmaa Map

Inmaa Digital Map Component Library

License

MIT © Usman Aleem(https://github.com/Usman Aleem)

Steps to run this library locally

1- Ensure you have Node.js installed. Any version above 18 is compatible.

2- Clone the repository to your local machine using Git. Navigate to the project directory.

3- Install Dependencies: Run yarn install in both the root directory and the example folder to install all required dependencies.

yarn install

4- Build the Package: Build the inmaa-map package in the root directory. This step is required only once when you first open the repository.

yarn build

5-Start Development Mode: Run the development server to test your package with live updates.

yarn dev

Steps to use this library

Install

npm install --save inmaa-map

Usage

import React, { Component } from 'react'

import { InmaaMap } from 'inmaa-map'
import 'inmaa-map/dist/index.css'

class Example extends Component {
  render() {
    return <Map />
  }
}

For Base Maps Add base map keys in index.html

 window.MAPTILER_API_KEY = 'Dg5ulQdwyQwfhHoHGZQM'

window.MAPBOX_API_KEY ='pk.eyJ1IjoiZGV2b21hbiIsImEiOiJjamc2dXN5dTQwMG1zMnFzMDV5d2RmcHJ1In0.gfG8Q1_b6GGyNJA9_W4ZHg'

Setting css when using MeeraMap Component

@import 'inmaa-map/dist/index.css';

To set the name of the map

name = 'Valuation'

Setting Default BaseMap Visible

This prop set Inmaa Map Default BaseMap Visible. By default there are 5 basemap available. you can set one of them to be default visible. There are 6 predefined ID's for default basemap Use one of them to Toggle between baseMaps.

{
BING_ROAD: 'Bing Road',
BING_AERIAL: 'Bing Aerial',
DEFAULT_BLUE: 'Default Blue',
STREET: 'Street',
SATELLITE: 'Satellite',
TERRAIN_3D: '3D Terrain'

}

baseMap={{
  BING_ROAD: 'Bing Road',
}}

Setting Map View Settings

const mapViewSettings = {
  Lon: 56.255937165097805,
  Lat: 19.985072265354404,
  zoom: 12,
  minZoom: 1,
  maxZoom: 24,
  pitch: 45,
  bearing: -17.6,
  minPitch: 0,
  maxPitch: 85
}

mapViewSettings = { mapViewSettings }

WMS Layers

Adding WMS it is must to provide ID, DisplayName, URL and LayerName from that server URL, id, displayName, url, lyrName are mandatory, rest are optional.

const WMSData = [
  {
    id: '32w2w327884455',
    visible: true,
    displayName: 'Dev Server Wells Correct',
    proxyUrl: true,
    url: 'https://was.test.meeraspace.com/geoserver/wms?',
    serverUrl: 'https://was.dev.meeraspace.com/geoserver/wms?',
    legendUrl:
      'https://was.dev.meeraspace.com/geoserver/wms?request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=rkms:ppdmproject_well',
    lyrName: 'rkms:ppdmproject_well',
    //groupName: "air",
    wfsUrl: 'http://geoserver2-18.dev-meeraspace-wasl:8080/geoserver/wfs?',
    wfsName: 'rkms:ppdmproject_well',
    // catalog: "bore",
    // catalogAttribute: "uwi",
    featureAttribute: 'UWI',
    geomName: 'THE_GEOM',
    cross: 'anonymous',
    attributes: [
      { name: 'UWI', type: 'string' },
      { name: 'DISPLAY_CLASS', type: 'string' },
      { name: 'LABEL', type: 'string' },
      { name: 'CREATED_DATE', type: 'date' }
    ]
  }
]

wmsData = { WMSData }

Symbol layer

Symbol Layer is a layer which shows point information with SVG icon on the Map.

const symbolLayerData ={
  id: 'Symbol-Layer-Id',
  visible: true,
  displayName: "Display Name In TOC",
  items:[{
    id: 'Unique Value Identifier',
    latitude: Number (In WGS84),
    longitude: Number (In WGS84),
    symbolText: 'Label Shows Under SVG Icon',
    svg: SVG File,
    popup: {
          'Well ID': '123456789',
          OtherInfo: 'Well Other Info',
          dsf: 'Well sdfasdfasfOther Info',
          sdf: 'Well Other Info',
          a: 'Well Othsdfsadfasfasdfsafer Info',
          sd: 'Well Other Info',
          OtherInfo: 'Well Othsdfasdfasdfer Info',
          sd: 'Well Other Info',
          ade: 'Well Otsdfasfasfsadfsadfsadfher Info',
          s: 'Well Other Info',
          ety: 'Well sdfsadfasfasd Info',
          Villa: '',
          Jumerah: 'Duabi',
          action: (id) =>
          actionBg: 'rgb(15,150,104)',
          actionTxt: 'ClickMe',
          actionTxtColor: 'rgb(255,255,255)'
        }
    }]
}

symbolData = { symbolLayerData }

WKT Layer

const wktData = [
  {
    id: 'wkt-2333',
    displayName: 'Plot Layer',
    visible: true,
    items: [
      {
        id: '2www3',
        wkt: 'POLYGON((44.37982306465471 33.57166851587003,44.37735158050169 33.5266970064954,44.41071661656739 33.530817507852774,44.444287609645855 33.530989191148166,44.45623311638543 33.55622292681707,44.443051867569345 33.57184011800713,44.41977872512845 33.57184011800713,44.37982306465471 33.57166851587003))'
      }
    ]
  }
]

wktData = { wktData }

Quantatative Layer

This layer will show Total Number of Quantity in a circle to show like total number of projects in Some region etc. Lat lon values with quantity values are must Type is must, DisplayName lat lon and Quantity are must.

const quantitativeData = [
  {
    type: 'quantitative',
    id: 'symbol-layer-id',
    displayName: 'CSR Quantative Layer',
    defaults: {
      scale: 0.5
    },
    items: [
      {
        id: '123456789',
        latitude: 20.127571,
        longitude: 56.166687,
        quantity: 250
      },
      {
        id: 'SWERIG08',
        latitude: 20.20956,
        longitude: 56.31579,
        quantity: 350
      },
      {
        id: 'SWERIG089',
        latitude: 19.63668,
        longitude: 55.988125,
        quantity: 150
      }
    ]
  }
]

quantitativeData = { quantitativeData }

Cluster Layer

This layer is used to show features as cluster of points.

const clusterData = [
  {
    id: 'symbol-layer-gov1',
    visible: true,
    displayName: 'Gov 1',
    // minResolution: 250,
    // maxResolution: 250,
    defaults: {
      scale: 0.5
    },
    clusterColor: '#C65151',
    fontColor: 'rgb(255, 255, 255)',
    items: [
      { id: '0', latitude: 22.3930338106098, longitude: 59.4867566786933 },
      {
        id: 'Hamdi123',
        wkt: 'POINT(59.2474020160665 21.5248924013614)' /*, svg: singleIconCluster*/,
        iconText: '200K',
        popup: {
          isComponent: true
          // val: <Container />,
        }
      },
      {
        id: '2',
        wkt: 'POINT(59.4486965889587 22.5710167633052)' /*, svg: singleIconCluster*/,
        iconText: '300K',
        popup: {
          isComponent: true
          // val: <Card />,
        }
      },
      {
        id: '3',
        wkt: 'POINT(59.7900865297015 22.2774678947923)' /*, svg: singleIconCluster*/,
        iconText: '180K'
      },
      { id: '4', latitude: 21.0226272453166, longitude: 58.7210356670484 },
      { id: '5', latitude: 22.0444701854961, longitude: 59.2424486901089 },
      { id: '6', latitude: 21.8510259898508, longitude: 59.0930764782799 },
      { id: '7', latitude: 21.6146379528288, longitude: 59.2949290813103 },
      { id: '8', latitude: 21.8490341344216, longitude: 59.1559430022003 },
      { id: '9', latitude: 21.6190853648195, longitude: 58.9639331216157 }
    ]
  }
]

clusterData = { clusterData }

HeatMap Layer

HeatMap is based on point data with weight value. In Props we use Quantity which represent weight.

const heatmapData = [
  {
    type: 'heatMap',
    id: 'heatMap-layer-id',
    // visible: true,
    displayName: 'HeatMap people',
    minResolution: 250,
    maxResolution: 20000,
    items: [
      {
        id: '123456789',
        latitude: 20.127571,
        longitude: 56.166687,
        weight: 0.5
      },
      {
        id: 'SWERIG08',
        latitude: 20.20956,
        longitude: 56.31579,
        weight: 0.8
      },
      {
        id: 'SWERIG089',
        latitude: 19.63668,
        longitude: 55.988125,
        weight: 1.0
      }
    ]
  }
]

heatmapData = { heatmapData }

Geojson layer

 const geojsonData=  [{
    id: 'geojson-line-above-ground',
    visible: true,
    displayName: 'Line above geojson layer',
    color: '0,148,255',

    items: [
      {
        id: 'pid154152',
        color: 'rgb(49,47,175)',
        geojson: LINE_ABOVE_GROUND_DATA
      }
    ]
  }],

geojsonData = { geojsonData }

PG Tile server Data

 const pgTileData=  [  {
    id: `facility-5035`,
    sourceId: 'public_facilities_source',
    visible: true,
    displayName: `facility-5035`,
    proxyUrl: true,
    url: `https://tiles.staging.siha.om/public.facility_map_fc.json`,
    attrConstraints: [{
      facility_no: 5035

    }],
    paint: {
      "fill-extrusion-height": 30,
      "fill-extrusion-color": "#FF0000",
      "fill-extrusion-opacity": 0.8,
      "fill-extrusion-base": 0,
    }
  }],

pgtileServData = { pgTileData }

Clear Map

When set to true, this property will remove all layers from the map, except for the base layers

 isClearMap={true || false}

Hide or show Icons

Below are the configuration options to hide or show various icons, controls, and toolbars in Inmaa Map. Each property allows for easy customization of the map's UI.

Each property can be toggled (true to enable, false to disable) based on your application requirements. These configurations allow for a fully customizable map interface in Inmaa Map.

Configuration icon: Hide or show configuration icon in Inmaa Map.

 isConfigurationIcon={true || false}

Title Field: Hide or show title bar in Inmaa Map.

 isShowTitleField={true || false}

AI Search Bar: Hide or show AI Search bar in Inmaa Map.

 isShowAISearch={true}

Layer tree: Hide or show Layer tree button in Inmaa Map.

  isShowLayerTreeIcon={true}

Map Zoom Controls: Hide or show Map zoom controls in Inmaa Map.

  isShowMapZoomControls={true}

Map tool bar: Hide or show mapp controls tool bar in Inmaa Map.

  isShowMapToolBar={true}

Tool bar controls: Customize the tools available in the toolbar using the toolBarControls object. Each property controls the visibility or functionality of a specific tool.

  toolBarControls={{
    pinControl: true,
    polygonControl: true,
    freeHandPolygon: true,
    drawRouteControl: true,
    uploadGeoDataControl: true,
    mapStylesControl: true,
    MapBoundsControl: true,
    panControl: true,
    selectControl: true,
    drawPointControl: true,
    drawRectangleControl: true,
    drawPolygonControl: true,
    drawCircleControl: true,
    drawFreeHandPolygon: true,
    isTextAnnotation: true,
    isMarkerAnnotation: true,
    isHighlighterAnnotation: true,
    isNoteAnnoation: true,
    isLinkAnnotation: true,
    isVideoAnnotation: true,
    shapesControls: true,
    annotationControls: true
  }}

Show popup on map onClick feature

Indicates whether the custom modal should be displayed. When set to true, the modal opens with the data available after a feature is clicked. This allows displaying detailed information about the selected feature.

 isShowPopup={true || false}

Callback for Feature Click Event

Callback function triggered when a feature is clicked on the map. Passes two parameters: e: The click event object. selectedFeatures: The data of the selected features. Useful for handling custom actions or displaying detailed information about the clicked features.

 onFeatureClick={(e, selectedFeatures) => {
    console.debug({e,selectedFeatures})

 }}

Show popup on map onClick feature

Specifies the latitude and longitude coordinates to center the map. The value should be provided as an array in the format longitude, latitude. The current example centers the map at the coordinates of Oman. You can replace these coordinates with the desired center point.

 mapCenterPoint={[56.255937165097805, 19.985072265354404]}

Zoom to fit

When set to true, the map will automatically zoom to fit the layer when it is rendered. This is particularly useful when working with a single layer to ensure that the entire layer is visible within the map view.

  isZoomTofit={true || false}

Higlight Feature

If set to true, it disables the popup (isShowPopup will default to false) and highlights the feature instead. This is useful for scenarios where a feature needs to be identified for further actions, such as opening a data table or performing additional operations, rather than displaying a popup.

  isFeatureIdentify={true || false}

Popup Content

A custom popup container that allows rendering custom content inside the popup. You can pass a React component to customize the popup's appearance and behavior. This prop enables displaying additional details or features in the popup.

popupContent={<PopupContent />}

Map Fit Bounds

Defines the geographical bounds that the map should fit within. The map view will be restricted to stay inside these bounds, preventing the user from panning or zooming outside the specified area.

mapFitBounds={[
    [53.392433166503906, 16.699281692504883],
    [59.47264099121094, 26.230289459228516]
  ]}