Hi Community,
In this article I will demonstrate below steps to add Interactive map and visualize geographic data to web application:
- Step1 : Install Application
- Step2 : Create CSP Page
- Step3 : Extend dc.IrisGeoMap.Folium class
- Step4 : Invoke DrawGeoDetails() Method
So Let us start.
Step1 : Install Application
First of all we need to install iris-geo-map application by using ZPM
zpm "install iris-geo-map"
Step2 : Create CSP Page
<html>
<head>
<!-- Put your page Title here -->
<title> Iris-Geo_Map app </title>
</head>
<body>
<!-- Put your page code here -->
My page body
</body>
</html>
Step3 : Extend dc.IrisGeoMap.Folium class
<html>
<head>
<title> Iris-Geo_Map app </title>
</head>
<body >
<csp:class encoded=1 super="%CSP.Page,dc.IrisGeoMap.Folium">
<!-- Put your page code here -->
My page body
</body>
</html>
Step4 : Invoke DrawGeoDetails() Method
in the final step we have to invoke DrawGeoDetails() method of dc.IrisGeoMapc.Foium class
In the below example we are passing the locations as a string seperated by ","
<html>
<head>
<title> Iris-Geo_Map app </title>
</head>
<body >
<csp:class encoded=1 super="%CSP.Page,dc.IrisGeoMap.Folium">
<h1>How to add Interactive Maps to CSP application by using Iris-Geo_Map app </h1>
<!-- Invoke DrawGeoDetails function and Pass location string seperated by "," -->
<div>
#(..DrawGeoDetails("3555 S Ocean Dr Hollywood FL 33019,Boston,NY,Las Vegas,University park Dallas,Denver,Chicago"))#
</div>
</body>
</html>
We can pass address by :
NOTE : System will get latitude and longitude values and mark the location on the map
Below is the final output
*
- Thanks
Top comments (0)