Use SuperMap Maps Online


This sample gets your started with SuperMap Online maps (http://www.supermapol.com/web/maps), and demonstrate how to insert a map into your web pages.

Step1 Create GettingStarted.html and add a map container

To start from scratch, you will:

  • Create a GettingStarted.html page first
  • And create a map container in your page: create a div, and set id = "map"
  • Set the styles, e.g. set the height to 600px
<!DOCTYPE html>
<html>
<head>
    <title>GetStarted</title>
    <style>
        .mapcontainer{
            height: 600px;
        }
    </style>
</head>
<body>
<div id = "map" class="mapcontainer"></div>
</body>
</html>

Step2 Include online js file

Insert the js file before the </body> section of GettingStarted.html:

<script src='http://www.supermapol.com/resources/api/libs/SuperMap.Include.js'></script>

SuperMap.Include.js is a js file provided by SuperMap Online and can be embedded to your map.

Step3 Insert SuperMap Online map to your page

In GettingStarted.html, insert “China Map” (id is 493) using the following code:

<script>
    var url="http://www.supermapol.com";
    var viewer=new SuperMap.Cloud.MapViewer(url,"map");
    viewer.previewMapById(493);
</script>

Here, SuperMap.Cloud.MapViewer(url,"map") is to create a map viewer window and the url is the address of SuperMap Online and "map" is the map container id that is created in Step1.

Online Demo and Code Editing

Save GettingStarted.html and open it in a browser to see the result of the demo. You can also edit the source code online and change the demo.

<html>
<head>
    <title>GetStarted</title>
    <style>
        .mapcontainer{
            height: 600px;
        }
    </style>
      <script src='http://www.supermapol.com/resources/api/libs/SuperMap.Include.js'></script>
</head>
<body>
    <div id="map" class="mapcontainer"></div>
    <script>
        var url="http://www.supermapol.com";
        var viewer=new SuperMap.Cloud.MapViewer(url,"map");
        viewer.previewMapById(493);
    </script>
</body>
</html>

Where to go next

Besides the existing maps provided by SuperMap Online, you can also create any new map and insert it to your page.

SuperMap Online provides a rich number of base maps and methods to add your data for you to implement your map project.

Before creating any map project, you must [have a SuperMap account] (/SignUp.html) first.