Koordinat2 WebApp for geo-coordinates conversion and display

Koordinat2 WebApp (https://dominoc925-pages.appspot.com/webapp/koordinat2/default.html) was developed using ReactJS and WebAssembly for converting geo-coordinates and showing them on a map. The WebApp uses Proj4 in the backend for performing the projection conversion and datum conversion; hence it supports over a thousand coordinate reference systems. 

Using the Koordinat2 WebApp is easy. The following shows what can be done with the WebApp.

Opening the WebApp

1. Using a modern browser, open up the the Koordinat2 WebApp at this url https://dominoc925-pages.appspot.com/webapp/koordinat2/default.html
   
   The WebApp page is displayed.
   
   
   

Choosing Coordinate Systems

1. To define the primary input coordinate system, click the gear icon in the Input Coordinates panel.
   
   The Select Source Coordinate System dialog appears.
   
   
   
2. In the Search field, type in a EPSG code e.g. 3414 for SVY21. Or type in part of a coordinate system name, e.g. Borneo.
   
   One or more entries are listed.
   
   
   
3. Click on a listed entry, e.g. Timbalai 1948 / RSO Borneo (m).
   
   The selected coordinate system is chosen.
   
   
   
4. To define the secondary or output coordinate system, click the gear icon in the Output Coordinates panel.
   
   
   
5. Choose the Output coordinate system e.g. EPSG 4326 using similar procedure as the previous steps 3 to 4.
   

Converting Coordinates

1. To convert coordinates in the Input Coordinate system, type in the Easting and Northing (or Latitude and Longitude) values in the corresponding entry fields.
   
   The converted coordinates are displayed immediately in the Output Coordinates Longitude and Latitude fields (or Easting and Northing fields).
   
   A corresponding marker is also created on the Map pointing to the location of the coordinate.
   
   
   
2. Optional. Clicking on the marker will pop up a moveable Information box.
   
   

 

Displaying Coordinates of Map Locations

1. To display coordinates of locations on the map, simply click the map location with the mouse.
   
   A marker is placed at the clicked location.
   
   The clicked location coordinates are displayed in the Input Coordinates and Output Coordinates panels.
    

  Displaying a Grid

1. On the toolbar on the top right, click the Grid icon.
   
   The Select Grid Settings dialog box appears.
   
   
   
2. Optional. Click the Line color field to choose a grid color.
   
   
3. In the Grid type field, choose the grid type to display e.g. UTM or Geographic.
   
   
4. Click Okay.
   
   The selected grid is displayed on the map.
   

Selecting a Base Layer

1. On the tool bar on the top right, click the Layer icon.
   
   The Select Base Layer dialog box appears.
   
    
2.  Choose a layer to display, e.g. Open Street Map Landscape.
   
   The base layer changes to the selected layer.