Tuesday, 27 September 2016

Introducing mapguide-react-layout. A modern viewer for MapGuide

Let's recap the story thus far:
Up until now, I have intentionally withheld the GitHub repo where all this development action was taking place as I wasn't going to reveal something that I didn't think was ready to be revealed. Well, it's now reached a point where I am comfortable with finally unveiling this project for general public consumption.

I'm proud to introduce mapguide-react-layout, the new modern map viewer for MapGuide Open Source and Autodesk Infrastructure Map Server.

mapguide-react-layout requires at a minimum MapGuide Open Source 3.0 or an equivalent version of Autodesk Infrastructure Map Server. As I've stated in part 2 of this series, this viewer will require a modern web browser, which practically speaking is any of the following:
  • Google Chrome (stable channel)
  • Mozilla Firefox (stable channel)
  • Internet Explorer 11. Older versions of IE will not be supported
  • Microsoft Edge
  • For iOS: Mobile Safari
  • For Android: Google Chrome or Mozilla Firefox
Overview

Conceptually speaking, you can think of mapguide-react-layout as the logical successor to Fusion and the AJAX viewer and it carries similar high-level concepts as well:
  • mapguide-react-layout has templates just like Fusion.
  • Your application consists of various components (as opposed to widgets in Fusion)
  • Components subscribe and dispatch actions to push data to a centralized redux store for application state. (as opposed to widgets having to explicitly subscribing to each other with event handler spaghetti). Application state is significantly easier to reason about in mapguide-react-layout as opposed to Fusion or the AJAX viewer.
  • mapguide-react-layout offers the same extension points for custom functionality for your MapGuide applications, such as InvokeURL commands.
  • Just like before, a mapguide-react-layout viewer is driven by a Web Layout or a Application Definition (this is not implemented at this stage, but is something I intend to complete).
It is the last point which is probably the most salient. Because a mapguide-react-layout viewer accepts a Web Layout or Application Definition, the authoring and development workflow for MapGuide applications using this viewer remains unchanged

Instead of pointing a Web Layout to an AJAX viewer URL or an Application Definition to a Fusion template URL, you just point either resource to your mapguide-react-layout viewer.

Templates

The mapguide-react-layout viewer includes the following layout templates out of the box:

1. AJAX Viewer



This template visually mimics the original MapGuide AJAX viewer (with much less frames!)

2. Sidebar


This template is a responsive layout based on the sidebar-v2 map viewer template. Well suited for phone/tablet sized displays.

In future releases (once I get the Application Definition support implemented), I'll look at bringing across the existing 5 Fusion templates as well.

Getting the viewer/code

The code to mapguide-react-layout can be found on my GitHub repo. There you will also find installation instructions and other various documentation/notes.

Feedback, questions and pull requests welcome.

2 comments:

Friedrich Bayer said...

Awesome work!

MarkSender said...

Can not find "dist/viewer.js" (from viewer/index.html)