The Status Map Widget was developed as a reference application for creating mashups with the Telligent Evolution REST APIs . The widget combines usage of the status and user APIs with the Google Map API to map status updates of community members.

The widget uses Ajax, JavaScript and JQuery to retrieve results formatted as JSON directly from the status and user APIs. This article contains detailed implementation information for the widget to help you better understand the source code in the Telligent.Evolution.SDK.StatusMapWidget project of the Telligent Evolution Platform SDK.

In this Article

Status Map widget details

The source code for the Status Map widget contains the following files:

StatusMapWidget.cs is the core of the widget, the code-behind that implements ExternallyImplementedConfigurableContentFragmentBase. It has properties for the title, height, and widgth of the widget.

StatusMapWidget.ascx is the user control portion of the widget that contains the HTML markup and the JavaScript setup code that gets values from the widget's properties (search term, sort, and number of results to display). It defines the output: an IFrame with a source set to the StatusMapWidgetIFrame.aspx file.

StatusMapWidgetIFrame.aspx is a file that is used in the IFrame of the control. It sets up a container to be used by the map and links to the Google Maps API Javascript, the jQuery library, and a custom jQuery plug-in, "statusMap()."

StatusMapWidget.css is the style sheet used by the widget for custom formatting.

StatusMapWidget.js primarily contains the custom jQuery plugin for displaying the map, retrieving the statuses and user information as JSON from the platform APIs and showing the statuses and user information on the map. The JQuery $.ajax functions handle all of the communication with the platform APIs. Various other functions are used to assist in the formatting: date parsing and formatting and adding the custom security header to the API request.

top

Deploying the widget to your community

To deploy the widget to your site:

  1. Compile the Telligent.Evolution.SDK.StatusMapWidget project.
  2. Copy the Telligent.Evolution.SDK.StatusMapWidget.dll file to your Web site's bin folder.
  3. Copy the files in the project's Widgets folder to your Web site's /Utility/ContentFragments/Maps folder. More than likely, the Maps folder does not exist in the ContentFragments folder and you will need to create it.

top