Publish GIS Services and Use it


SuperMap Online provides cloud data services and 500 MB free data storage space. Also, SuperMap Online supports uploading GIS data and publish data as services and data services. If you need to develop a small GIS application based on GIS services, you can conveniently publish GIS services. You do not need to purchase, install, maintain a GIS server, therefore saving development cost and shortening the development circle.

The example will lead you to upload your GIS data, publish GIS data as map services, and use the map services in Web applications.

Step1 Prepare your GIS Data

SuperMap Online supports uploading, publishing different formats of GIS data, such as SuperMap workspace. To ensure the upload speed, firstly, we compress the data into *.zip format. This example uses sample data World.sxwu, therefore, we compress World.sxwu to World.zip. You can download data from http://pan.baidu.com/s/1i4l2QDB.

Step2 Upload your Data

After you login SuperMap Online, access My Contents>My Data, click Upload Data. In the dialog box that pops up, select data type Workspace, click Select File and navigate the World.zip. You can then click OK.

Step3 Publish Data as Map Services

In My Data, you can view the uploading data World.zip. When the status changes to Finished:

  • Click the Publish button in the operation list (pub)
  • In the Publish Services dialog box that pops up, select the service type. In this example, we select REST Map Service. Click OK to publish the service.

After you publish the service, you can see the service name under World.zip, vm3sbiax in this example. Map service type is RESTMAP.

  • Click the View button (v) to the right of the service . The browser will redirect to REST map service.
  • Click to enter maps resource, and then we can view all maps of this map service.
  • Click to enter World map, you can view the basic information, supported operations, representation formats of the map. The address in the example now is the address for the map: http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World
  • Service publisher can click different representation formats to view the effect of the map. To allow others to access the map, they need authorization.

Step4 Development authorization

After you publish the map service, you can view it. However, to allow users of your applications to access the map service, you still need to implement development authorization (generating key).

Visit My Contents>My Keys, you can see the key is null when authorization has not been implemented. Click Add Key button to display Add key page. On this page, you can set application name, application type and other parameters such as referer. Then you can select the service which needs authorization, that is, vm3sbiax published in the previous step. Click OK to finish adding the key.

Note: Select service request access IP 0.0.0.0 is only for Demo, please do not use it in commercial applications.

You can check the key on the “May Keys” page. While accessing services, users can directly use services through adding key=your key. Such as: http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World.json?key=VZ88xbrMEMpGv4yiisTojgVq

Step5 Use your services in your web pages

To use the REST map service on web pages, you need to:

  • Initialize the map through the SuperMap.Map class to add controls for browsing, zooming, and display coordinates.
  var map,
  //Initialize map
  map = new SuperMap.Map("map",{controls:[
        new SuperMap.Control.Navigation() ,
        new SuperMap.Control.Zoom()]});
  map.addControl(new SuperMap.Control.MousePosition());
  ……
  //Load map asynchronously
  function addLayer(){
     map.addLayer(layer);
     //Display map bounds
     map.setCenter(new SuperMap.LonLat(0, 0), 0);
  }
  • Use SuperMap.Layer.TiledDynamicRESTLayer class to add REST map service layer. In this example, vm3sbiax is used.
  var layer,
  url = "http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World";
  //Initialize layer
  layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
  ……
  //Add listener for the layerInitialized event
  layer.events.on({"layerInitialized":addLayer});
  • Use the SuperMap.Credential class to implement security verification. in this example, the key is VZ88xbrMEMpGv4yiisTojgVq
  var value = "VZ88xbrMEMpGv4yiisTojgVq";
  var name = "key";
  //Set key
  SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, name);

Online demo and code editing

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .mapcontainer{
            height: 600px;
        }
    </style>
</head>
<body onLoad = "init()">
<div id = "map" class = "mapcontainer"></div>
    <script type="text/javascript">
        var map, layer,
        url = "http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World";
        var value = "VZ88xbrMEMpGv4yiisTojgVq";
        var name = "key";

        function init(){
            //Set key
            SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, name);
            //Initialize map
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Navigation() ,
                new SuperMap.Control.Zoom()]});
            map.addControl(new SuperMap.Control.MousePosition());
            //Initialize layer
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
            //Add listener for the layerInitialized event
            layer.events.on({"layerInitialized":addLayer});
        }
        //Load map asynchronously
        function addLayer(){
            map.addLayer(layer);
            //Display map bounds
            map.setCenter(new SuperMap.LonLat(0, 0), 0);
        }
   </script>
   <script src='http://www.supermapol.com/resources/api/libs/SuperMap.Include.js'></script>
</body>
</html>

Where to go next

You have done something really cool if you come here. You have realized following functions based on SuperMap Online:

  • Embedded online map provided by SuperMap Online in the web page
  • Registered your own SuperMap account
  • Made your own map in SuperMap Online and use it in a web page
  • Uploaded and published a copy of GIS data and used the map service in a web page

The above tutorial uses basic functions of SuperMap online. To get familiar with online Web development of SuperMap Online, you still need to [Learn More] (/LearnMore.html).