How to browse iPortal maps by iClient for leaflet 9D(2019) API |
SuperMap iClient JavaScript 9D(2019) provides the API to browse maps in SuperMap iPortal to help you quickly create a iPortal map on your own Web page.
The following provide two examples, which helps you understand how to use iClient for leaflet 9D(2019) to browse the iPortal maps.
In Getting started with iClient for leaflet 9D, we've learnt how to use SuperMap iClient for leaflet 9D(2019) to build a simple map application to access SuperMap iServer maps. Here we introduce how to browse a public map in SuperMap iPortal.
Access any of the following open source community to get the SuperMap iClient Javascript 9D(2019) sourcecode:
Create a new folder in a disk and named as "MyFirst"; In the "MyFirst” folder, create a "iPortal_MapViewer.html page with a text editor (such as NotePad++) . And save the html to UTF-8 encoding. Add the following codes to it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SuperMap iPortal
Map</title>
<link rel="stylesheet"
href="libs/leaflet/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background:
#fff;width: 100%;height:95%;position: absolute;top: 0;">
<label>Input iPortal address:<input id="urlInput"
type="text" placeholder="http://<service>:<port>/iportal"/></label>
<br/>
<label>Input MapID:<input id="mapidInput"
type="text" placeholder="1"/></label>
<br/>
<button onclick="selectMap()">Open map</button>
<div id="map" style="margin:0 auto;width:
100%;height: 100%"></div>
<script type="text/javascript" src="libs/leaflet/leaflet.js"></script>
<script type="text/javascript" src="dist/iclient9-leaflet.min.js"></script>
<script>
function selectMap(){
var mapId = document.getElementById("mapidInput").value;
var mapUrl = document.getElementById("urlInput").value;
if(mapId && mapUrl){
L.supermap.webmap(mapId, {server: mapUrl});
}else{
alert("Please input the iPortal map address and map ID");
}
}
</script>
</body>
</html>
Copy the libs and theme folders to the "MyFirst" folder. You can also put them to other places by modify relative path of the reference script.
Copy the "MyFirst" folder to the directory of %SuperMap iPortal_HOME%/webapps to publish the example. Start SuperMap iPortal and input: http://192.168.120.40:8090/MyFirst/iPortal_MapViewer.html to access it.
You can also copy the "MyFirst" folder to other middlewares (such as Tomcat), or SuperMap iServers or other iPortals to publish it. Start the corresponding middleware and input: http://ip:port/MyFirst/iPortal_MapViewer.html ("ip" and "port" is the ip and port number of the corresponding middleware) to access it. No need to reboot the middleware service if it's already started.
Input the iPortal address (It needs to be the same with IP in the address toolbox, that is, if the address bar is IP, here it should be IP; If the address bar is localhost, here it should be localhost) For example, http://192.168.120.40:8090/iportal, then input map id. For example: 7, and click Open Map button to browse the iPortal public map.
The maps in SuperMap iPortal have the access permissions. For the non-public map, only the users who have the access permission can access it after logging iPortal. The following is a simple example, you need to log in to iPortal first. After logging successfully, input the map id and click the Open Map button, then you can browse the maps which have access control in iPortal.
Based on Example 1, create a "iPortalSecurity.html" html page in the "MyFirst"folder with a text editor (such as NotePad++). And save the html to UTF-8 encoding. Add the following codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="libs/leaflet/leaflet.css">
<script type="text/javascript" src="libs/leaflet/leaflet.js"></script>
<script type="text/javascript" src="dist/iclient9-leaflet.min.js"></script>
<style>
.form-group,input {
width: 360px;
}
</style>
</head>
<body style=" margin: 0;overflow: auto;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div class="container">
<div class="page-header">
<h4></h4>
</div>
<div class="row">
<table class="table table-bordered col-md-6">
<thead>
</thead>
<tbody>
<!--login-->
<tr>
<td>
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="loginUrl_iportal" class="col-md-2 control-label">iPortal service address:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="loginUrl_iportal"
placeholder="service domain name/IP+port">
</div>
</div>
<div class="form-group">
<label for="username_iportal" class="col-md-2 control-label">User name</label>
<div class="col-md-8">
<input type="text" class="form-control" id="username_login">
</div>
</div>
<div class="form-group">
<label for="password_iportal" class="col-md-2 control-label">Password</label>
<div class="col-md-8">
<input type="password" class="form-control" id="password_login">
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="button" class="btn btn-success" onclick="loginPortal()">Sign in</button>
</div>
</div>
<div>
<div>
<label for="MapId">Map ID</label>
<div class="col-md-8">
<input type="text" id="MapId">
</div>
</div>
<div>
<button type="button" onclick="initMap()" title="Please click Open Map after logging successfully">Open Map</button>
</div>
</div>
</fieldset>
</form>
</div>
</td>
</tr>
</tbody>
</table>
<div id="map" style="height:600px;"></div>
</div>
</div>
<script>
/*login*/
function loginPortal() {
var loginUrl = document.getElementById("loginUrl_iportal").value;
var userName = document.getElementById('username_login').value;
var password = document.getElementById('password_login').value;
if (!checkUrl(loginUrl))
{
return;
}
SuperMap.SecurityManager.loginiPortal(loginUrl, userName, password).then(function (result) {
if(result.succeed)
window.alert("Login successful")
});
}
/*login end*/
/*Open map*/
function initMap() {
var mapUrl = document.getElementById("loginUrl_iportal").value;
var mapId = document.getElementById("MapId").value;
if(mapId && mapUrl){
L.supermap.webmap(mapId, {server: mapUrl});
}else{
alert("Please log in first,then input map ID and click Open Map to retry");
}
}
function checkUrl(url)
{
if (url
=== "") {
alert("Please input URL");
return false;
}
return true;
}
</script>
</body>
</html>
In Example 1, we have already referred the resource file in the "MyFirst" folder, and copied the "MyFirst" folder to the directory of %SuperMap iPortal_HOME%/webapps.
You can also copy the "MyFirst" folder to other middlewares (for example, the Tomcat) or SuperMap iServer , or iPortal to publish the sample service.
Start SuperMap iPortal (If it is deploy on other middleware, you need to start the middleware). Input http://192.168.120.40:8090/MyFirst/iPortalSecurity.html (If it is other middleware, it should be the ip+port). Then input the iPortal address (It should be the same with the IP in address bar, namely, if the address bar is IP, here it should be the IP; if the address bar is localhost, here it should be localhost). For example, http://192.168.120.40:8090/iportal, input the iPortal user account and password. Click the login button, it will prompt "Login successfully!" As shown in the figure below:
After logging in successfully, input map ID, click Open Map, then you can view the map which requries access permission. As shown in the figure below:
