1map Web Viewer

The Web viewer integrates with your software through the API to provide access to 1map layers within your application, quickly and easily delivering the spatial picture for the data you are using.

1. Before you access the Viewer
   User your 1map username and password to obtain a token, this token will be passed as a URL parameter to the online Viewer
   Make sure to get your token in the back end as not to expose your username and password in the front end.
   Here is sample code for retrieving your token (Adjust to the back end language you are using.):

   var 1mapUsername = "map_viewer@1map.co.za";
   
   var 1mapPassword = "map_viewer98";
   var token = "";
   
   var jqxhr = $.ajax({
       type: "GET",
       url: "https://www.1map.co.za/api/v1/auth/login/",
       dataType: "json",
       timeout: 60000 * 2, // 2 minutes
       data: {
       email: TEMPmapUsername,
       password: TEMPmapPassword,
   },
   error: function (xhr, status, error) {
       //  alert(error);
   },
   success: function (response) {
       if (response && response.result) {
       token = response.apiToken.token;
           if (response.result.maprestriction) {
               maprestriction = response.result.maprestriction;
           }
       }
   },
       async: false,
   });

    

2. Determine the LayerID needed for the viewer to start up with.
   Each 1map account has specific access to certain layers in 1map.
   There are currently two ways to access the list of Layer IDs per account:
   1. Using the API
      You can also run the following API in the back end to access the available layers per account:

      var jqxhr = $.ajax({
      
      type: "GET",
      
      url: "https://www.1map.co.za/api/v1/params/layer/",
      
      dataType: "json",
      
      timeout: 60000 * 2, // 2 minutes
      
      data: {
      
      token: "31dd6a5a-58cb-4619-b173-134b17ee81cf ",
      
      },
      
      error: function (xhr, status, error) {
      
      //  alert(error);
      
      },
      
      if (response && response.result) {
      
      //Get LayerID from result
      
      } async: false,
      
      });

      
      
      

   2. Using the Viewer tiptool:

      Access the viewer with a 1map account and retrieved token.

      Make the required layer Active in the Layer picker:
      
      Hover over the title of the Active Layer to see the LayerID as a tooltip.
      
3. Viewer URL
   

   Use the following URL to Access the Viewer: 

   http://viewer.1map.co.za/index.html?token=[place your token here]&LayerID=[Place your LayerID here]

   Example:
   http://viewer.1map.co.za/index.html?token= 31dd6a5a-58cb-4619-b173-134b17ee81cf&LayerID=1577

4. Sending additional Parameters to the Viewer for use on startup.

   You may need the map to open and auto navigate to a specific feature, for example a property.

   This can be achieved by passing the correct URL parameter in the URL relevant to the LayerID.

Example 1:

http://viewer.1map.co.za/index.html?token= 31dd6a5a-58cb-4619-b173-134b17ee81cf&LayerID=1577&allotmntno=C0460014

Result:

Example 2:

http://viewer.1map.co.za/index.html?token= 31dd6a5a-58cb-4619-b173-134b17ee81cf&LayerID=1577&allotmntno=C0460014 &standno=00007367

Result:

Example 3:

http://viewer.1map.co.za/index.html?token= 31dd6a5a-58cb-4619-b173-134b17ee81cf&LayerID=2450&mun_deed=T45341

Result:

Note:

To see the names of the parameters per layer, select a feature on the map and hover over the display name of the attribute. The parameter name will display in the tooltip.

Only parameters that have indexes in are valid parameters in the URL.

Should you require parameters to be indexed, kindly request this from our support team.

You may require the attribute information of a selected feature back in your application.

 To do this, provide the name of a hidden input field from your application in the URL as follows:

http://viewer.1map.co.za/index.html?token= 31dd6a5a-58cb-4619-b173-134b17ee81cf&LayerID=2450&mun_deed=T45341&openerAttributes=hdnAttributes

Every time the user selects a different feature the matching attributes will be passed back to your application’s hidden input field as a JSON string.

Here is our code to achieve this:

parent.document.getElementById(openerAttributes).value = JSONattributes;