Practical Introduction to Fusion Julien-Samuel Lacroix jlacroix@mapgears.com Yewondwossen Assefa yassefa@dmsolutions.ca

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

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.

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

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

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

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 email for a more complete description)

Application Definition XML file ApplicationDefinition tag MapSet WidgetSet Container Widget MapWidget

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

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

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

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

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> ...

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

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

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

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

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

Questions?