Hexagon Geospatial
MENU

Developers Knowledge Base

WebGIS enables powerful geospatial web applications and services that securely share your organization’s rich geospatial data, and provides tools to deeply examine spatial data and create value added products, on demand.
Showing results for 
Search instead for 
Do you mean 

Extensions: Chart as MapTips

by Technical Evangelist on ‎10-15-2015 08:27 AM - edited on ‎04-07-2017 08:26 AM by Technical Evangelist (819 Views)

Overview

Geospatial Portal SDK provides the Dynamic Feature Events API to override/register different events for vector features. The following extension highlights this API to render charts as MapTips (ToolTips) on mouse hover over the vector features.
The code snippet in this article uses Ext4 JS 4.1 library to draw the charts. A wide variety of HTML5 and JavaScript chart libraries are available online, and they can also be used in a similar way.

Using Ext4 JS 4.1 with Geospatial Portal SDK 2015

Version 2.2.1 of Ext JS is provided with Geospatial Portal SDK 2015. In order to be able to use the Ext4 JS 4.1 with the SDK, the ext-all.js JavaScript file is modified by replacing all instances of 'Ext.' to 'Ext4.'. This is done to prevent the version clash between the two versions of Ext JS libraries. The zip File:Extjs.zip contains the modified library and other resources. Extract the zip to the SDK and reference the ext-all.js in the aspx page as below:

<script type="text/javascript" src="extjs/ext-all.js"></script>

Source Code

In the aspx page add the following div element on which the chart is rendered.

<div id="chartToolTip">
</div>

Place the following code snippet inside a js file and reference it in the aspx page. The code snippet is written to work on the US Sample Data WFS (http://demo.hexagongeospatial.com/GWM_WFS_NonTransactional/service.svc/get). To use any other WFS sources change the code accordingly wherever there is reference to the feature attribute information.

Code

Snapshot

1200px-MapTips_Snapshot.png

Overview