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)

Read next

biswasprasana001 profile image

GraphQL: A Beginner's Guide

Biswas Prasana Swain -

codemaker2015 profile image

Introducing uv: Next-Gen Python Package Manager

Vishnu Sivan -

biswajitfsd profile image

Design Patterns: Your Secret Weapon in Software Engineering

Biswajit Patra -

velan profile image

Postman vs Insomnia vs SoapUI vs Paw vs EchoAPI: A Comprehensive Comparison of API Testing Tools

Velan<> -