Getting started with iClient for Leaflet

Feedback

SuperMap iClient for Leaflet development process is as follows:

Ajax development process

Figure 1 SuperMap iClient for Leaflet development process

The following demonstrates how to use SuperMap iClient for Leaflet to construct a simple map application.

Step 1: Download and Decompress Library File

  1. Get the SuperMap iClient Javascript source code from the open source community:

Gitee:  https://git.oschina.net/isupermap/iClient9

  1. The installation directory structure is as foollows:

  

Figure 2 SuperMap iClient Javascript package structure

Step 2: Create the HTML Page

Create a new folder in a disk and named as "MyFirst"; In the "MyFirst” folder, use a text editor (such as NotePad++) to create a "GettingStarted.html" html page. And save the html to UTF-8 encoding. Add the following codes to it:

HTML

   
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SuperMap REST service base map</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
</body>
</html>

Step 3: Reference Resource File

Copy the iclient9-leaflet.js to "MyFirst" folder:

Step 4: Copy iclient9-leaflet.js to "MyFirst" folder:

Add the following codes to <html> and <body> to implement the function of creating the map.

JavaScript

   
<head>
    <meta charset="UTF-8">
    <title>SuperMap REST Service Base Map</title>
<link rel="stylesheet"  href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="./iclient9-leaflet.min.js"></script>
</head>

Step 5: Use Chrome to View

Add the following codes to <body> to implement the function of creating the map.

JavaScript

   
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
 <script type="text/javascript">
    var map, url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
    map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [0, 0],
        maxZoom: 18,
        zoom: 1
    });
    L.supermap.tiledMapLayer(url).addTo(map);
</script></body>

Step 6: Run GettingStarted.html File, and Browse Map Data

Run SuperMap iServer and the GettingStarted.html file to browse the map data.

 

Figure 3 Access SuperMap iServer service world map