DEV Community

InterSystems profile image InterSystems Developer
InterSystems Developer for InterSystems

Posted on Originally published at community.intersystems.com

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

#csp #python #javascript #tutorial

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"
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

*
Image description

  •  
  • Thanks

Top comments (0)