geom_edit.js

/*
 Table creation scripts
 --=========================================
-- Part I: 
-- logon as dba to create a user; 
-- the db instance name may be different from what's shown below.

show con_name
show user;
alter session set container=pdb19c_2;  --pdb19c_2 on a dbhost
drop user mvtest cascade;

create user mvtest identified by mvtest;
grant create session, create view, connect, resource to mvtest;
--grant dba to mvtest;
grant unlimited tablespace to mvtest;

--======================================================
-- Part II
-- Create tables and populate table, metadata, and indexes

--  DDL for Table EDIT_LINES
--------------------------------------------------------
-- table 1 starts:

drop TABLE EDIT_LINES  purge;

CREATE TABLE EDIT_LINES
(ID    VARCHAR2(100)
,type        VARCHAR2(100)
,GEOM       MDSYS.SDO_GEOMETRY NOT NULL
);

Insert into EDIT_LINE (ID,TYPE,GEOM) values ('1','t1',MDSYS.SDO_GEOMETRY(2002, 3857, NULL, MDSYS.SDO_ELEM_INFO_ARRAY(1, 2, 1), MDSYS.SDO_ORDINATE_ARRAY(-13610729, 4513152,-13610580, 4513071)));
COMMIT;
-- TABLE 1 of 3 done!

delete user_sdo_geom_metadata
where TABLE_NAME = 'EDIT_LINES' and COLUMN_NAME = 'GEOM';
  
Insert into user_sdo_geom_metadata
(TABLE_NAME,COLUMN_NAME,DIMINFO,SRID)
 values ('EDIT_LINES','GEOM'
,MDSYS.SDO_DIM_ARRAY(
       MDSYS.SDO_DIM_ELEMENT('X', -100000, 10000, 0.005)
     , MDSYS.SDO_DIM_ELEMENT('Y', -100000, 10000, 0.005))
,'3857');

DROP INDEX EDIT_LINES_GEOM_SIDX FORCE;
CREATE INDEX EDIT_LINES_GEOM_SIDX ON EDIT_LINES(GEOM)
INDEXTYPE IS MDSYS.SPATIAL_INDEX_V2;
-- table 1 meta data done!

--===========================================
----------------------------

--------------------------------------------------------
--  DDL for Table EDIT_POINTS
--------------------------------------------------------
-- table 2 of 3 starts:

drop TABLE EDIT_POINTS  purge;

CREATE TABLE EDIT_POINTS
(ID        VARCHAR2(100)
,type      VARCHAR2(100)
,GEOM       MDSYS.SDO_GEOMETRY NOT NULL
);
REM INSERTING into EDIT_POINTS
SET DEFINE OFF;

Insert into EDIT_POINT (ID,TYPE,GEOM) values ('1','t2',MDSYS.SDO_GEOMETRY(2001, 3857, MDSYS.SDO_POINT_TYPE(-13610729, 4513152, NULL), NULL, NULL));
commit;
-- table 2 of 3 is done!
--------------------------

delete user_sdo_geom_metadata
where TABLE_NAME = 'EDIT_POINTS'
  and COLUMN_NAME = 'GEOM';
  
Insert into user_sdo_geom_metadata
(TABLE_NAME,COLUMN_NAME,DIMINFO,SRID)
 values ('EDIT_POINTS','GEOM'
,MDSYS.SDO_DIM_ARRAY(
       MDSYS.SDO_DIM_ELEMENT('X', -100000, 10000, 0.005)
     , MDSYS.SDO_DIM_ELEMENT('Y', -100000, 10000, 0.005))
,'3857');

DROP INDEX EDIT_POINTS_GEOM_SIDX FORCE;
CREATE INDEX EDIT_POINTS_GEOM_SIDX ON EDIT_POINTS(GEOM)
INDEXTYPE IS MDSYS.SPATIAL_INDEX;
-- table 2 meta data done!

--==============================================================
--------------------------------------------------------
--  DDL for Table EDIT_POLYGONS
--------------------------------------------------------
-- table 3 of 3 starts:


drop TABLE EDIT_POLYGONS  purge;

CREATE TABLE EDIT_POLYGONS
(ID        VARCHAR2(100)
,type   VARCHAR2(100)
,GEOM       MDSYS.SDO_GEOMETRY NOT NULL
);
REM INSERTING into EDIT_POLYGONS
SET DEFINE OFF;

Insert into EDIT_POLYGON (ID,TYPE,GEOM) values ('30','t1',MDSYS.SDO_GEOMETRY(2003, 3857, NULL, MDSYS.SDO_ELEM_INFO_ARRAY(1, 1003, 1), MDSYS.SDO_ORDINATE_ARRAY(-13610580, 4513071, -13610582, 4513115,  -13610536, 4513119,  -13610580, 4513071 )));
commit;
-- table 3 of 3 is done!
------------------------


delete user_sdo_geom_metadata
where TABLE_NAME = 'EDIT_POLYGONS'
  and COLUMN_NAME = 'GEOM';
  
Insert into user_sdo_geom_metadata
(TABLE_NAME,COLUMN_NAME,DIMINFO,SRID)
 values ('EDIT_POLYGONS','GEOM'
,MDSYS.SDO_DIM_ARRAY(
       MDSYS.SDO_DIM_ELEMENT('X', -100000, 10000, 0.005)
     , MDSYS.SDO_DIM_ELEMENT('Y', -100000, 10000, 0.005))
,'3857');

DROP INDEX EDIT_POLYGONS_GEOM_SIDX FORCE;
CREATE INDEX EDIT_POLYGONS_GEOM_SIDX ON EDIT_POLYGONS(GEOM)
INDEXTYPE IS MDSYS.SPATIAL_INDEX_V2;
-- table 3 meta data done!

----------------------------
--==========================



----------------------------
--==========================

-- Last step: verification:
select * from EDIT_LINES;
select * from EDIT_POINTS;
select * from EDIT_POLYGONS;

select *  from user_sdo_geom_metadata;
--desc all_indexes;
select owner, table_name, index_name from all_indexes where table_name like 'EDIT_%';


-- Part III
-- User MapBuilder to import mapviewer theme/style meta data in file: geometry_edit.dat

COMMIT;
 */
var SUB_POLYGON = 0;
      var SUB_RECTANGLE = 1;
      var SUB_CIRCLE = 2;
      var SUB_CUTOUT = 3;

      var m_oMap;
      var baseURL  = "http://"+document.location.host+"/mapviewer";

      var m_oColorStyleEdit;

      // style backup
      var m_oPointRenderStyle_backup,
          m_oPointHoverStyle_backup,
          m_oPointSelectStyle_backup;
      var m_oLineRenderStyle_backup,
          m_oLineHoverStyle_backup,
          m_oLineSelectStyle_backup;
      var m_oPolygonRenderStyle_backup,
          m_oPolygonHoverStyle_backup,
          m_oPolygonSelectStyle_backup;
  
      var m_oPointRenderStyle,
          m_oPointHoverStyle,
          m_oPointSelectStyle;
      var m_oPointEditStyle;
      var m_oLineRenderStyle,
          m_oLineHoverStyle,
          m_oLineSelectStyle;
      var m_oPolygonRenderStyle,
          m_oPolygonHoverStyle,
          m_oPolygonSelectStyle;
      //var m_oLineEditStyle;

      var m_oLayer_Line,
          m_oLayer_Point,
          m_oLayer_Polygon,
          m_oLayer_Active;
      var m_oLayer_SnapPoint;
      var layerStyle;
      var m_oMarkerSnapPointAtVertex;
      var m_oMarkerSnapPointOnSeg;
      var tool;
      var m_oSnapFeature;
      var m_iSnapTol = 5;  // pixels

      var m_iNewFeatCounter = 0;
      var m_iCurMode; // current mode: 0: select, 1: edit, or 2: draw/create      
      var m_iCurLayer; // current layer: 0: poiont, 1: linestring, or 2: polygon
      
      OM.gv.setResourcePath("../..");
      OM.gv.setHttpMethod('GET');
      OM.gv.setLogLevel("warning");  // output more logs

  
    function showMap() {
      var baseURL  = "http://"+document.location.host+"/mapviewer";
      m_oMap = new OM.Map(
      document.getElementById('map'),
      {
          mapviewerURL: baseURL
      }) ;

      var tileLayer = new OM.layer.ElocationTileLayer( "eloc", 
                                  {//"appID": "AppIDGC123456", // fake app id
                                    "layerName": "WORLD_MAP"
                                  });//  'WORLD_MAP', 'BI_WORLD_MAP', or 'BI_WORLD_MAP_LIGHT'.
      m_oMap.addLayer(tileLayer) ;

      // create vector layer needed styles
      createStyles();
      
      // create all layers and add them onto map
      addVectorLayers();
      setActiveLayer(m_oLayer_Point);  // the initial active layer is point
      m_oLayer_Point.enableFeatureSelection(true);
      m_oLayer_Line.enableFeatureSelection(false);
      m_oLayer_Polygon.enableFeatureSelection(false);
      enableSubTypes("hidden");
      setPointStyles_SelectMode();

      addListeners();

      m_oMap.setSnapTolerance(m_iSnapTol);

      m_oMap.setMapCenter(new OM.geometry.Point(-122.2640, 37.5297 ,8307) );
      m_oMap.setMapZoomLevel(15) ;
      addMapControls(m_oMap);
      m_oMap.addListener(OM.event.MapEvent.MAP_AFTER_REFRESH, backupStyles);

      m_oMap.init();
      
    let myhandler =function (evt) 
    {
      let x = m_oMap.getCursorLocation().getX().toFixed(2);
      let y = m_oMap.getCursorLocation().getY().toFixed(2);
      let z = m_oMap.getMapZoomLevel();
      document.getElementById("x").innerHTML="X: "+x;  
      document.getElementById("y").innerHTML="Y: "+y;  
      document.getElementById("z").innerHTML="Zoom level: "+z;
    }
     
      m_oMap.addListener("mouseMove", myhandler);
    }
      
      function backupStyles() {
        m_oMap.deleteListener(OM.event.MapEvent.MAP_AFTER_REFRESH, backupStyles);

        m_oPointRenderStyle_backup = m_oLayer_Point.getRenderingStyle();
        m_oLineRenderStyle_backup = m_oLayer_Line.getRenderingStyle();
        m_oPolygonRenderStyle_backup = m_oLayer_Polygon.getRenderingStyle();
      }
      
      function restoreStyles() {
        m_oMap.deleteListener(OM.event.MapEvent.MAP_AFTER_REFRESH, backupStyles);

        m_oLayer_Point.setRenderingStyle(m_oPointRenderStyle_backup);
        m_oLayer_Point.hoverStyle=null;//setHoverStyle(null);//m_oPointHoverStyle_backup);
        m_oLayer_Point.selectionStyle=null;//setSelectStyle(null);//m_oPointSelectStyle_backup);
        
        m_oLayer_Line.setRenderingStyle(m_oLineRenderStyle_backup);
        m_oLayer_Line.hoverStyle=null;//setHoverStyle(null);//m_oLineHoverStyle_backup);
        m_oLayer_Line.selectionStyle=null;//setSelectStyle(null);//m_oLineSelectStyle_backup);
        
        m_oLayer_Polygon.setRenderingStyle(m_oPolygonRenderStyle_backup);
        m_oLayer_Polygon.hoverStyle=null;//setHoverStyle(null);//m_oPolygonHoverStyle_backup);
        m_oLayer_Polygon.selectionStyle=null;//setSelectStyle(null);//m_oPolygonSelectStyle_backup);
    }

    function createStyles() {
      m_oColorStyleEdit = new OM.style.Color({fill:"#FF0000",fillOpacity:1,strokeThickness:3,stroke:"#000000"});

//      m_oPointRenderStyle = new OM.style.Color({fill:"#878c90",
//                                                fillOpacity:0.75,
//                                                strokeThickness:1,
//                                                stroke:"#ffffff"});
      var markerSize = 15;
      m_oPointRenderStyle = new OM.style.Marker({ width: markerSize, height: markerSize, 
                              vectorDef: [{ shape: { type: "circle", cx: 0, cy: 0 }, 
                                            style: { fill: "#878c90", fillOpacity: 0.75, stroke: "#ffffff", strokeThickness: 1 } }] });
      m_oPointHoverStyle = new OM.style.Marker({ width: markerSize, height: markerSize, 
                              vectorDef: [{ shape: { type: "circle", cx: 0, cy: 0 }, 
                                            style: { fill: "#85BBE7", fillOpacity: 0.75, stroke: "#ffffff", strokeThickness: 1 } }] });
      m_oPointSelectStyle = new OM.style.Marker({ width: markerSize, height: markerSize, 
                              vectorDef: [{ shape: { type: "circle", cx: 0, cy: 0 }, 
                                            style: { fill: "#027BC7", fillOpacity: 0.75, stroke: "ffffff", strokeThickness: 1 } }] });
      m_oPointEditStyle = new OM.style.Marker({ width: markerSize, height: markerSize, 
                              vectorDef: [{ shape: { type: "circle", cx: 0, cy: 0 }, 
                                            style: { fill: "#027BC7", stroke: "#ffffff", strokeThickness: 1 } }] });
      
      //m_oLineRenderStyle = new OM.style.Line({stroke:"#878c90",strokeThickness:2});
      m_oLineRenderStyle = new OM.style.Line({stroke:"#F1998B",strokeThickness:4});
      m_oLineHoverStyle = new OM.style.Line({stroke:"#85BBE7",strokeThickness:4});//, strokeDash:[6,4]});
      m_oLineSelectStyle = new OM.style.Line({stroke:"#027BC7",strokeThickness:4});
      //m_oLineEditStyle = new OM.style.Line({stroke:"#027BC7",strokeThickness:2});
      
      m_oPolygonRenderStyle = new OM.style.Color({stroke:"#ffffff",fill:"#878c90",fillOpacity:.75,strokeThickness:1});
      m_oPolygonHoverStyle = new OM.style.Color({stroke:"#85BBE7",fill:"#878c90",fillOpacity:.75,strokeThickness:2});
      m_oPolygonSelectStyle = new OM.style.Color({stroke:"#027BC7",fill:"#ffffff",fillOpacity:.75,strokeThickness:2});

      m_oMarkerSnapPointOnSeg = new OM.style.Marker({
              vectorDef:[
                { shape:{
                    type:"circle",
                    width: m_iSnapTol*4, 
                    height: m_iSnapTol*4,
                    cx: m_iSnapTol*2,
                    cy: m_iSnapTol*2
                  },
                  style:{
                    fill:"#ffffff",
                    fillOpacity:0.5,
                    stroke:"#bb0000",
                    strokeThickness:2}
                },
                { shape:{
                    type:"circle",
                    width: m_iSnapTol*2, 
                    height: m_iSnapTol*2,
                    cx: m_iSnapTol*2,
                    cy: m_iSnapTol*2
                  },
                  style:{
                    fill:"#ffffff",
                    fillOpacity:1,
                    stroke:"#bb0000",
                    strokeThickness:1}
                }
              ]
            });

            
      m_oMarkerSnapPointAtVertex = new OM.style.Marker({
              vectorDef:[
                { shape:{
                    type:"circle",
                    width: m_iSnapTol*4, 
                    height: m_iSnapTol*4,
                    cx: m_iSnapTol*2,
                    cy: m_iSnapTol*2
                  },
                  style:{
                    fill:"#ffffff",
                    fillOpacity:0.5,
                    stroke:"#00bb00",
                    strokeThickness:2}
                },
                { shape:{
                    type:"circle",
                    width: m_iSnapTol*2, 
                    height: m_iSnapTol*2,
                    cx: m_iSnapTol*2,
                    cy: m_iSnapTol*2
                  },
                  style:{
                    fill:"#ffffff",
                    fillOpacity:1,
                    stroke:"#00bb00",
                    strokeThickness:1}
                }
              ]
            });
  }
      
    function addListeners() {
      m_oLayer_Active.addListener(OM.event.MouseEvent.MOUSE_CLICK, featureClicked); 
      m_oLayer_Active.addListener(OM.event.LayerEvent.FEATURE_SELECTED, featureSelected);
      m_oLayer_Active.addListener(OM.event.LayerEvent.FEATURE_DESELECTED, featureDeselected);
    }
    function removeListenersAndDeselect() {
      m_oLayer_Active.clearSelectedFeatures(); 
      
      m_oLayer_Active.deleteListener(OM.event.MouseEvent.MOUSE_CLICK, featureClicked); 
      m_oLayer_Active.deleteListener(OM.event.LayerEvent.FEATURE_SELECTED, featureSelected);
      m_oLayer_Active.deleteListener(OM.event.LayerEvent.FEATURE_DESELECTED, featureDeselected);
    }
    
    function setActiveLayer(layer) {
      m_oLayer_Active = layer;
    }
    
    function featureMoving(fmv) {
    // here target can be the feature itself or feature shape or 'possible point'.
      var feature = fmv.target;
      if(OM.notNull(feature.parentFeature)) { // moving feature's vertex: line/polygon
        if(OM.notNull(m_oSnapFeature)) {
          m_oLayer_SnapPoint.removeFeature(m_oSnapFeature);
          m_oLayer_SnapPoint.redraw();
          m_oSnapFeature = null;
        }

        feature.parentFeature.pointToSnap = null;

        var pntObj = getLayerSnapPoint(feature.parentFeature);  //the feature under editing
        if(OM.notNull(pntObj)) {
          var snapPoint = pntObj.point;
          var location = pntObj.location;

          feature.parentFeature.pointToSnap = []; 
          feature.parentFeature.pointToSnap.push(snapPoint.getX()); // in data units
          feature.parentFeature.pointToSnap.push(snapPoint.getY()); // in data units 

          // update snap Feature to display
          if (location ===2) {  // on segment
          m_oSnapFeature = new OM.Feature("SnapPoint",snapPoint);
            m_oLayer_SnapPoint.setRenderingStyle(m_oMarkerSnapPointOnSeg);
          } else {  // at start or ending point
            m_oSnapFeature = new OM.Feature("SnapPoint",snapPoint);
            m_oLayer_SnapPoint.setRenderingStyle(m_oMarkerSnapPointAtVertex);
          }
          m_oLayer_SnapPoint.addFeature(m_oSnapFeature);
          m_oLayer_SnapPoint.redraw();
        }                  
      } else if (feature.geo && feature.geo.type === "Point") { //moving a point marger
        if(OM.notNull(m_oSnapFeature)) {
          m_oLayer_SnapPoint.removeFeature(m_oSnapFeature);
          m_oLayer_SnapPoint.redraw();
          m_oSnapFeature = null;
        }

        feature.pointToSnap = null;

        var pntObj = getLayerSnapPoint();  // application can define a snap vector layer 
        if(OM.notNull(pntObj)) {
          var snapPoint = pntObj.point;
          var location = pntObj.location;

          feature.pointToSnap = []; 
          feature.pointToSnap.push(snapPoint.getX()); // in data units
          feature.pointToSnap.push(snapPoint.getY()); // in data units 

          // update snap Feature to display
          if (location ===2) {  // on segment
          m_oSnapFeature = new OM.Feature("SnapPoint",snapPoint);
            m_oLayer_SnapPoint.setRenderingStyle(m_oMarkerSnapPointOnSeg);
          } else {  // at start or ending point
            m_oSnapFeature = new OM.Feature("SnapPoint",snapPoint);
            m_oLayer_SnapPoint.setRenderingStyle(m_oMarkerSnapPointAtVertex);
          }
          m_oLayer_SnapPoint.addFeature(m_oSnapFeature);
          m_oLayer_SnapPoint.redraw();
        }
      } else { // moving whole feature with snapping - (not supported yet).
        // here we can use a specific snap point defined for feature, and then when moving check
        // if this snap point match any other snap layer point. 
      }
    }
    
    function featureMoved() {
        if(OM.notNull(m_oSnapFeature))
        {
          m_oLayer_SnapPoint.removeFeature(m_oSnapFeature);
          m_oLayer_SnapPoint.redraw();
          m_oSnapFeature = null;
        }             
    }
    
    function featureDeselected(ctx) {
            var deselectedFeature = ctx.deselectedFeature;
            deselectedFeature.deleteListeners(OM.event.LayerEvent.FEATURE_MOVING);
            deselectedFeature.deleteListeners(OM.event.LayerEvent.FEATURE_MOVED);
    }
    function featureSelected(ctx) {
          var selFeature = ctx.selectedFeature;

          // to track when feature is being moved
          if(!(selFeature.hasListener(OM.event.LayerEvent.FEATURE_MOVING, featureMoving))) {
            selFeature.addListener(OM.event.LayerEvent.FEATURE_MOVING, featureMoving);
          }

          // to track when feature is moved
          if(!(selFeature.hasListener(OM.event.LayerEvent.FEATURE_MOVED, featureMoved))) {
            selFeature.addListener(OM.event.LayerEvent.FEATURE_MOVED, featureMoved);
          }
          // to track when feature is moved
          if(!(selFeature.hasListener(OM.event.LayerEvent.FEATURE_DESELECTED, featureDeselected))) {
            selFeature.addListener(OM.event.LayerEvent.FEATURE_DESELECTED, featureDeselected);
          }
    }
    function addVectorLayers() {
            m_oLayer_Point = new OM.layer.VectorLayer("Point_EDIT_POINTS",
                        {def: {type: OM.layer.VectorLayer.TYPE_PREDEFINED,
                                               dataSource: "mvtest",
                                               theme: "EDIT_POINTS",
                                               url: baseURL
                              },
//                        boundingTheme: true
                      });
            m_oLayer_Line = new OM.layer.VectorLayer("EDIT_LINES",
                        {def: {type: OM.layer.VectorLayer.TYPE_PREDEFINED,
                              dataSource: "mvtest",
                              theme: "EDIT_LINES",
                              url: baseURL
                              },
//                        boundingTheme: true
                      });
            m_oLayer_Polygon = new OM.layer.VectorLayer("EDIT_POLYGONS",
                        {def: {type: OM.layer.VectorLayer.TYPE_PREDEFINED,
                              dataSource: "mvtest",
                              theme: "EDIT_POLYGONS",
                              url: baseURL
                              },
//                        boundingTheme: true
                      });
                      
          m_oLayer_Line.enableEditingContextMenu(true);
          m_oLayer_Polygon.enableEditingContextMenu(true);
          
          m_oLayer_SnapPoint = new OM.layer.VectorLayer(
            "snap_layer", {
              def : {
                type : OM.layer.VectorLayer.TYPE_LOCAL
              }
            });
          
        m_oLayer_Polygon.enableInfoWindow(false);
        m_oLayer_Line.enableInfoWindow(false);
        m_oLayer_Point.enableInfoWindow(false);
        m_oMap.addLayer(m_oLayer_Polygon);
        //m_oLayer_Polygon.setHideEditCircleVertices(false); // test this method/option
        m_oMap.addLayer(m_oLayer_Line);
        m_oMap.addLayer(m_oLayer_Point);
        m_oMap.addLayer(m_oLayer_SnapPoint);
      }
      function setStylesAndMode() {
        restoreStyles();
        
        var mode = getCheckedMode();
        var n = getCheckedLayer();
        switch (mode) {
          case 0:  // select mode
            if (n===0) { // point
              setPointStyles_SelectMode();
            } else if(n===1) {
              setLineStyles_SelectMode();
            } else if(n===2) {
              setPolygonStyles_SelectMode();
            }
            break;
          case 1:  // edit mode
            if (n===0) {
              setPointStyles_EditMode();
            } else if (n===1) {
              setLineStyles_EditMode();
            } else if (n===2) {
              setPolygonStyles_EditMode();
            }
            m_oLayer_Active.enableFeatureEditing(true);
            break;
          case 2: // draw mode
            if (n===0) {
              setPointStyles_DrawMode();
            } else if (n===1){
              setLineStyles_DrawMode();
            } else if (n===2){
              setPolygonStyles_DrawMode();
            }
            startNewDrawing();
            break;
        }
        updateLayerEnableSelectionSetting();
        // keep track of current mode
        // mode change between edit <---> draw does not require a save() operation
        m_iCurMode = mode; 
        m_iCurLayer = n; 

      }

      function selectLayerPoint() {
        if (m_iCurLayer === 0) {
          return;
        }
        saveOrDiscardChanges();
        removeListenersAndDeselect();
        setActiveLayer(m_oLayer_Point);  
        addListeners();
        
        setStylesAndMode();
      }
      
      // radio checked handler
      function selectLayerLine() {
        if ( m_iCurLayer === 1) {
          return;
        }
        saveOrDiscardChanges();
        removeListenersAndDeselect();
        setActiveLayer(m_oLayer_Line);  
        addListeners();
        
        setStylesAndMode();
      }
      
      function selectLayerPolygon() {
        if (m_iCurLayer === 2) {
          return;
        }
        saveOrDiscardChanges();
        removeListenersAndDeselect();
        setActiveLayer(m_oLayer_Polygon);
        addListeners();
        setStylesAndMode();
      }
      //0: point; 1: line; 2: polygon
      function getCheckedLayer() {
        var layerPoint = document.getElementById("pointlayer");
        var layerLine = document.getElementById("linelayer");
        var layerPolygon = document.getElementById("polygonlayer");
        if (layerPoint.checked) {
          return 0;
        } else if (layerLine.checked) {
          return 1;
        } else if (layerPolygon.checked) {
          return 2;
        }
      }

      //0: point; 1: line; 2: polygon
      function getCheckedSnapLayer() {
        var layerPoint = document.getElementById("snapToPoint");
        var layerLine = document.getElementById("snapToLine");
        var layerPolygon = document.getElementById("snapToPolyggon");
        if (layerPoint.checked) {
          return 0;
        } else if (layerLine.checked) {
          return 1;
        } else if (layerPolygon.checked) {
          return 2;
        }
      }

      //0: point; 1: line; 2: polygon
      function getCheckedMode() {
        var disp = document.getElementById("display");
        var edit = document.getElementById("edit");
        var draw = document.getElementById("draw");
        if (disp.checked) {
          return 0;
        } else if (edit.checked) {
          return 1;
        } else if (draw.checked) {
          return 2;
        }
      }

      function modeSelect() {
        if (m_iCurMode === 0) {
          return;
        }
        saveOrDiscardChanges();
        removeTool();
        setStylesAndMode();

        m_oLayer_Active.enableFeatureEditing(false);
          
        updateSubtypeComboBox();
        buildAttributeTable();
      }

      function modeEdit() {
        if (m_iCurMode === 1) {
          return;
        }
        if (m_iCurMode === 0) {
          saveOrDiscardChanges();
        }
        removeTool();
        setStylesAndMode();

        m_oLayer_Active.enableFeatureEditing(true);  // this line maybe no need.
          
        enableEditingOrDrawing();
        
        updateSubtypeComboBox();
        buildAttributeTable();
      }

      // radio handler
      function modeDraw() {
        if (m_iCurMode === 2) {
          return;
        }
        if (m_iCurMode === 0) {
          saveOrDiscardChanges();
        }
        setStylesAndMode();        
        //startNewDrawing(); the function above has a call.
        updateSubtypeComboBox();        
     }
     
     function undo()
     {
        var iMode = getCheckedMode();
        if (iMode === 0) { //if in select mode
          return;
        }

        if(tool && tool instanceof OM.tool.RedlineTool && !(tool instanceof OM.tool.BreakLineTool) &&
          tool.status === OM.tool.Tool.STARTED) {    
         m_oMap.getUndoManager().undo();
        } else {
          m_oLayer_Active.getUndoManager().undo();
        }
      }

      function redo()
      {
        var iMode = getCheckedMode();
        if (iMode === 0) { //if in select mode
          return;
        }

        if(tool && tool instanceof OM.tool.RedlineTool && !(tool instanceof OM.tool.BreakLineTool) &&
           tool.status === OM.tool.Tool.STARTED) {
          m_oMap.getUndoManager().redo();
        } else {
          m_oLayer_Active.getUndoManager().redo();
        }
      }

      function duplicate()
      {
        var iMode = getCheckedMode();
        if (iMode === 0) { //if in display mode
          return;
        }
        
        var feats = m_oLayer_Active.getSelectedFeatures();
        if(OM.isNull(feats) || feats.length !== 1) {
          console.log("Select one feature first for duplication");
          return;
        }

        if(tool && !(tool instanceof OM.tool.DuplicateTool)) {
          removeTool();
        }
               
         if (!tool) {
            tool = new OM.tool.DuplicateTool(m_oMap, feats[0]);           
            tool.start();
         }
         
        tool.addListener(OM.event.ToolEvent.TOOL_END, function(ctx) {
                          removeTool();
                        });
      }

      function breakline()
      {
        var iMode = getCheckedMode();
        if (iMode === 0) { //if in display mode
          return;
        }
        
        var feats = m_oLayer_Active.getSelectedFeatures();
        if(OM.isNull(feats) || feats.length !== 1 || 
           (feats[0].geo.type !== "LineString"&& feats[0].geo.type !== "MultiLineString")
                 ) {
          console.log("Select one linestring or multi-linestring feature first to break a segment into two pieces.");
          return;
        }

        if(tool && !(tool instanceof OM.tool.BreakLineTool)) {
          removeTool();
        }
               
         if (!tool) {
            tool = new OM.tool.BreakLineTool(m_oMap, feats[0]);           
            tool.start();
         }
         
        tool.addListener(OM.event.ToolEvent.TOOL_END, function(ctx) {
                          removeTool();
                        });
      }

      // this is to ge the result back from saveEditing method (result witll contain true or false)
      function saveCallBack(result) {
        if(OM.notNull(result)) {
          if ( result ) {
            document.getElementById("SaveResponse").innerHTML="Success!";
          } else {
            document.getElementById("SaveResponse").innerHTML="Failed to save.";
          }
        } else {
          document.getElementById("SaveResponse").innerHTML="Failed to get server response.";
        }
        setTimeout(clearSaveStatus,3000);
      }   
     
    function setPointStyles_SelectMode() {
      m_oLayer_Point.setStyles(
              {//render: m_oPointRenderStyle,
               hover:  m_oPointHoverStyle,
               select: m_oPointSelectStyle,
               edit:   m_oPointEditStyle
              });
    }
    function setLineStyles_SelectMode() {
      
      m_oLayer_Line.setStyles(
              {//render: m_oLineRenderStyle,
               hover: m_oLineHoverStyle,
               select: m_oLineSelectStyle,
               //edit: m_oLineEditStyle
              });
    }

    function setPolygonStyles_SelectMode() {
      m_oLayer_Polygon.setStyles(
              {//render: m_oPolygonRenderStyle,
               hover:  m_oPolygonHoverStyle,
               select: m_oPolygonSelectStyle,
              });
    }
    function setPointStyles_EditMode() {
      m_oLayer_Point.setStyles(
              {render: m_oPointRenderStyle,
               hover:  m_oPointHoverStyle,
               select: m_oPointSelectStyle,
               edit_point: m_oPointEditStyle
              });
    }
    function setLineStyles_EditMode() {
      m_oLayer_Line.setStyles(
              {render: m_oLineRenderStyle,
               hover: m_oLineHoverStyle,
               select: m_oLineSelectStyle
              });
    }

    function setPolygonStyles_EditMode() {
      m_oLayer_Polygon.setStyles(
              {render: m_oPolygonRenderStyle,
               hover:  m_oPolygonHoverStyle,
               select: m_oPolygonSelectStyle
              });
    }
    
    function setMode(id) {
      if (id === 'select') {
        m_iCurMode = 0;
      } else if (id === 'edit') {
        m_iCurMode = 1;
      } else if (id === 'draw') {
        m_iCurMode = 2;
      } else {
        console.log ("invalid mode");
      }
      document.getElementById(id).checked = true;      
    }
    
    function setPointStyles_DrawMode() {
      m_oLayer_Point.setStyles(
              {render: m_oPointRenderStyle,
               hover:  m_oPointHoverStyle,
               select: m_oPointSelectStyle
              });
    }
    function setLineStyles_DrawMode() {
      m_oLayer_Line.setStyles(
              {render: m_oLineRenderStyle,
               hover: m_oLineHoverStyle,
               select: m_oLineSelectStyle
              });
    }

    function setPolygonStyles_DrawMode() 
    {
      m_oLayer_Polygon.setStyles(
              {render: m_oPolygonRenderStyle,
               hover:  m_oPolygonHoverStyle,
               select: m_oPolygonSelectStyle,
              });
    }
    
    /** 
     * for creating a new feature
     * @returns {undefined}
     */
    function startNewDrawing() {        
        removeTool();
        enableEditingOrDrawing();
        
        var nType = getCheckedLayer(); 
        if (!tool) {
           // rectangle tool does not have snap-to 
            if (nType === 2) {  // polygon
              var subType = getSubType();
              if (OM.isNull(subType)) {
                subType = 0;
              }
              if (subType===SUB_POLYGON) {  // polygon
                tool = new OM.tool.RedlineTool(m_oMap, OM.tool.RedlineTool.TYPE_POLYGON);
              } else if (subType === SUB_RECTANGLE) {
                tool = new OM.tool.RectangleTool(m_oMap);
                //tool.setZeroSizeAllowed(true);
              } else if (subType === SUB_CIRCLE) {
                tool = new OM.tool.CircleTool(m_oMap);
                //tool.setZeroSizeAllowed(true);
              } else if (subType === SUB_CUTOUT) { // cutout
                var feats = m_oLayer_Active.getSelectedFeatures();
                if(OM.isNull(feats) || feats.length !== 1) {
                  alert("Select a polygon feature first before adding a void into...");
                  setMode("edit");
                  return;
                  // enter a one time selection mode                  
                }

                newVoidPolygon();
              }
              setPolygonStyles_DrawMode();
            }
            else if(nType === 1) {
              tool = new OM.tool.RedlineTool(m_oMap, OM.tool.RedlineTool.TYPE_LINESTRING);
              setLineStyles_DrawMode();
            }
            else if(nType === 0) {
              tool = new OM.tool.RedlineTool(m_oMap, OM.tool.RedlineTool.TYPE_POINT);
              setPointStyles_DrawMode();
            }
            tool.addListener(OM.event.ToolEvent.SNAP_POINT, startNewDrawingSnapListener);

            tool.addListener(OM.event.ToolEvent.TOOL_END, onToolComplete);
            tool.start();
         }
     }
     
     function startNewDrawingSnapListener()
     {
        if(OM.notNull(m_oSnapFeature)) {
          m_oLayer_SnapPoint.removeFeature(m_oSnapFeature);
          m_oLayer_SnapPoint.redraw();
          m_oSnapFeature = null;
        }

        tool.snapPoint = null; //[]; 

        var pntObj = getLayerSnapPoint();  // application can define a vector of snap layers and check all. 
        if(OM.notNull(pntObj)) {
          var snapPoint = pntObj.point;
          var location = pntObj.location;
          var screenLoc = m_oMap.getScreenLocation(snapPoint);
          tool.snapPoint = []; 
          tool.snapPoint.push(screenLoc.x);  // in screen units
          tool.snapPoint.push(screenLoc.y);  // in screen units;

          m_oSnapFeature = new OM.Feature("SnapPoint",snapPoint);
          if (location ===2) {
            m_oLayer_SnapPoint.setRenderingStyle(m_oMarkerSnapPointOnSeg);
          } else {
            m_oLayer_SnapPoint.setRenderingStyle(m_oMarkerSnapPointAtVertex);
          }

          m_oLayer_SnapPoint.addFeature(m_oSnapFeature);
          m_oLayer_SnapPoint.redraw();                  
        }
      }
     
      function generateId() {
        var currentDate = new Date();
        var date = currentDate.getDate();
        var month = currentDate.getMonth(); 
        var year = currentDate.getFullYear();
        var timestamp = Math.trunc(currentDate.getTime()/1000); //seconds from 1970
        var nLayer = getCheckedLayer();
        var sLayer = nLayer===0 ? "point": (nLayer===1?"line":"polygon");

        var id= sLayer+"_"+year+"_"+(month+1)+"_"+date+"_"+(m_iNewFeatCounter++)+"_"+timestamp;
        return id;
    }
    
    function retrieveToolGeometry() {
      var geom;
      var oFeatureGeometry = tool.getGeometry();
      if (tool instanceof OM.tool.RectangleTool) {
          var nXMin = oFeatureGeometry.coordinates[0];
          var nYMin = oFeatureGeometry.coordinates[1];
          var nXMax = oFeatureGeometry.coordinates[2];
          var nYMax = oFeatureGeometry.coordinates[3];
          var sSRID = m_oMap.getMapContext().getUniverse().getSRID();
          //always draw the rectangle as a polygon with four axis-aligned vertices
          oFeatureGeometry = new OM.geometry.Polygon([[nXMin, nYMin, nXMax, nYMin, nXMax, nYMax, nXMin, nYMax, nXMin, nYMin]], sSRID);

          geom = new OM.geometry.Polygon([[nXMin, nYMin, nXMax, nYMin, nXMax, nYMax, nXMin, nYMax, nXMin, nYMin]], sSRID);