Step by step tutorial to add Interactive map and visualize geographic data to web application
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".png)
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 :
-
Proper address like "3555 S Ocean Dr Hollywood FL 33019"
-
Part of the address
-
Place Name
-
City Name
NOTE : System will get latitude and longitude values and mark the location on the map
Below is the final output
.png)
- Thanks
Discussion (0)0