- Part 1: React/TypeScript/OpenLayers is awesome! Let's try building a MapGuide viewer with it
- Part 2: Setting the expectations for what I want to achieve
- Part 3: It's starting to already look like the AJAX Viewer
- Part 4: Time to redux-ify this thing before it's too unwieldy
- Part 5: Reduxification complete, back on track
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
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.
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!)
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.