Mapping online and use it


According to the contents of the last section, you have created a SuperMap account. After logging in to SuperMap Online, you can see it is empty in "my content" and "my map". This section will describe how to make your own map "my footprint" online and use the map in your web page.

Mapping online

Click "Create map" in the "My map" page to go to the map editor.

Step1 Choose a basic map

Choose a basic map on the left of the map editor, here we use "China".

Step2 Add the marker layer "Footprint"

Click on "Layer", select "add marker layer" under the "Add layer" selection, and set up your layer name in the pop-up dialog box, such as "Footprint" and click "OK" button.

Step3 Add features on the new layer

Click the relevant point symbol(p) of the "Hometown" layer, find you hometown location on the map by panning the map. Click the final location, a "Attributes editor" dialog will pop up, you can add the title and descriptions in it.

Continue adding other positions like the city your university is in, the city you worked, etc, and you can choose different symbols for them. Then connect these points by a line(l) to draw your growth footprint.

f

Step4 Save your Map

Click "Save" on the upper-left corner to save the map. You can set Title, Label or detailed descriptions for the map. Click "OK" to finish. After saving the map, you can see id of the map in the browser, e.g., here it is 893(viewer/893), which will be used when adding the map on the web page.

Step5 Share your map

You can click "Share" to share your map to other people. Or find the saved map in "My Map", click "share" and then the "Copy URL" button to share your map. In this example, the shared URL is: http://www.supermapol.com/apps/viewer/893/share?key=bjzr7NZmCw5a4NfVYdcUjlJo.

Add the map on the web page

You only need to set id of viewer.previewMapById(893) to your own map, here it is 893.

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

Online demo and code editing

<!DOCTYPE html>
<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(893);
    </script>
</body>
</html>

Where to go next

If you have your own GIS data, you may want to publish your GIS data as map service.