Pitney Bowes MapXtreme - Manual (Page 84)

Chapter 5: Web Applications, Controls, and Tools
Web Control Architecture
MapXtreme v7.1 84 Developer Guide
The MapXtremeWebResources folder included with the Visual Studio MapXtreme Web templates
contains dependencies for the web controls and map tools. Make sure to include these files when
deploying an application.
Map Tools Architecture
MapXtreme map tools are used to interact in some way with the map, such as panning to a different
view or selecting an area of the map to collect data for further analysis. A basic set of navigational
tools are provided in the MapXtreme Web application template. These tools, along with others for
selecting map features and creating a legend, are located in the Visual Studio toolbox.
The map tools are made up of client-side and server-side components. On the client side, the tools
have a JavaScript interaction component and a JavaScript client command component. On the
server side, the tools have server command class component.
The client-side map tool components are responsible for:
• Drawing and mouse operations (for example, rubber band rectangle, mouse click)
• Collecting data from mouse operations (for example, getting the screen coordinates for a zoom-
in operation)
• Sending the url request to the server
The server-side map tool components are responsible for:
• Carrying out the business logic of the tool (for example, calculating the distance between two
points)
Client Side Map Interaction
The client side map tool interaction is implemented with JavaScript classes. These are generic
classes that can be used by any user interface to perform an interaction on any HTML element. The
base Interaction class, located in Interaction.js, is extended to create all of the individual interactions
such as ClickInteraction and RectInteraction. The constructor for Interaction is:
Interaction(elementID, onComplete)
where elementID is the IMG tag of the map and onComplete is the function which is called
when the interaction is complete.
For example, the Interaction class can a draw a rubber band rectangle over the map and collect all
the point features that are contained within it.
Client Side Command Execution
A map tool has a client side JavaScript command object that is responsible for performing a specific
task. The base Command class, located in Command.js, is extended to create all of the individual
commands such as PanCommand and ZoomCommand. After the map tool interaction is complete,
the tool executes the client command The Command class constructor is:
Command(name, interaction)
where name is the server side Command class name and interaction is the data gathered
during the client interaction.