1. Practical Introduction to Fusion
Julien-Samuel Lacroix
Yewondwossen Assefa

2. History MapServer with limited interface
MapScript no limit but lots of code
Chameleon
<MapGuide with a static interface>
Fusion

3. Goals Offer an easy way to deploy high-end web-mapping application.
Easy for web designer to use
Basic HTML, CSS, and JavaScript skills needed
Easy for web developper to extend
PHP, MapServer/MapGuide, OpenLayers, etc.

4. Components Application contains: Fusion A map server HTML Template
ApplicationDefinition.xml

5. Map Server MapGuide with a ResourceId MapAgent cgi for map drawing
Web Tier API for widgets
MapServer
with a mapfile
CGI for the map drawing
PHP/MapScript for widgets

6. HTML template JavaScript include(s) onload function Div containers
Jx code
CSS
HTML
JavaScript

7. Jx JavaScript layout toolkit
Buttons, Tabs, Menus, Trees, Panels, Layout, etc.
Standard template is a good example
Won't see here since it's a Fusion lab
Check the CSS for more rendering details
(See Paul's for a more complete description)

8. Application Definition
XML file
ApplicationDefinition tag
MapSet
WidgetSet
Container
Widget
MapWidget

9. Widgets Configured via ApplicationDefinition.xml
Most are MapGuide and MapServer compatible
Some are MapGuide only
Contributions are welcome!!!

10. Map widget ApplicationDefinition.xml MapSet MapWidget HTML template
<MapGroup id="MyId" ...
Type (MapServer / MapGuide)
ResourceId / MapFile
MapWidget
MapId
HTML template
<div id="Map"></div>
DIV id is the same as widget Name
Size controled by CSS

11. Navigator Easy! ApplicationDefinition.xml
<Widget xsi:type="WidgetType">
<Name>Navigator</Name>
<Type>Navigator</Type>
<Extension xsi:type="CustomContentType">
</Extension>
</Widget>
HTML Template
<div id="Navigator"></div>
No customization needed

12. Map Navigation Pan Zoom In/Out Must define the Factor
<Extension xsi:type="CustomContentType">
<Factor>2</Factor>
</Extension>
ZoomByRectangle
Define a Tolerance
Define a Factor
jxskin-border.css needed for buttons

13. Container We can group widgets together Widgets with panels or buttons
Need CSS entry (default in jxskin-border.css)
ApplicationDefinition.xml
<Container xsi:type="UiItemContainerType">
<Name>Toolbar</Name>
<Type>Toolbar</Type>
<Item xsi:type="WidgetItemType">
<Function>Widget</Function>
<Widget>Pan</Widget>
</Item>
...

14. Legend Built from the Fusion layer array Contained in a DIV
Style the DIV with CSS
Firebug is your friend

15. Query Need two widgets: Selection Tool SelectionPanel Show results
Contained in a DIV
SelectionPanel show results per layer
Based on MapGuide old viewer

16. Custom selection results
Available from 1.1
Extend SelectionPanel
<Extension xsi:type="CustomContentType"> <SelectionRenderer>myFunction</SelectionRenderer>
</Extension>
myFunction receives the results object
Attribute names: getPropertyNames()
Renderer class for complex layout
From there it's between you, JavaScript and CSS

17. Custom legend Available from 1.1 Extend Legend
<Extension xsi:type="CustomContentType">
<LegendRenderer>myFunction</LegendRenderer>
</Extension>
myFunction access this.oLegend
Loop through Map, groups and layers
Renderer class for complex layout
Again! Between you, JavaScript and CSS
See Fusion.Maps.MapServer.Layer Class for more attributes

18. Future More ties to OpenLayers Possibility to combine OL layer types
Delicious integration
Jx enhancement
Performance enhancement

19. Questions?