Step by step tutorial to add Interactive map and visualize geographic data

Article

Muhammad Waseem · Feb 9, 2023 2m read

Open Exchange

#CSP #Embedded Python #JavaScript #InterSystems IRIS #Open Exchange

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 :

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

Thanks

Step by step tutorial 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

We can pass address by :

Proper address like "3555 S Ocean Dr Hollywood FL 33019"

Part of the address

Place Name

City Name