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)