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

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!)

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.


Friedrich Bayer said...

Awesome work!

MarkSender said...

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

Pierre Cardinal said...

where is the viewer.js file? In the files index.html, slate.html, etc in the viewer directory, you have the following code . I don't see any "dist" directory in the zip file from Github

Pierre Cardinal said...

Jackie, where is the viewer.js file? Thank you

Jackie Ng said...

I don't know what zip file you downloaded, but I see viewer/dist/viewer.js in every viewer.zip I downloaded.

Pierre Cardinal said...

I downloaded the file mapguide-react-layout-master.zip from the page "https://github.com/jumpinjackie/mapguide-react-layout" (green button Clone or Download and Download ZIP). Also in the directory "viewer" on the said page "https://github.com/jumpinjackie/mapguide-react-layout" there is no "dist" directory.

It is all my mistake because I finally found the viewer.zip file in the Releases section. Thank you

Jackie Ng said...

That download button means download the current commit snapshot of the source code in the repository. It does not mean download the latest release binaries (yes, very confusing).

mark chan said...

can the react layout do a select object and print? i can only see a quick plot. Or is there a way for me to select object and print?

mark chan said...

I have a current map the uses CS: XY-IN (Arbitrary X-Y Coordinates (U.S.Survey Inches))

that wont work?

Jackie Ng said...

Quick Plot is the only "printing" option provided by mapguide-react-layout.

If you are just after a map image that you can print from your web browser, you could setup an InvokeURL command to send a GETMAPIMAGE request to the mapagent with your desired parameters.

mark chan said...

Thanks Jackie, that what ive been using since MGOS 2.6. My only concern is the getting the correct scale. Im still an newbie on this, so computing the correct scale for the 'setviewscale' apral is always a hit or miss on my end. I just thought that maybe there was an easier way now with react or MGOS 3.1, that gets what is the selected feature(s) and generate an image for it.

Jackie Ng said...

mapguide-react-layout probably will not work on maps based on arbitrary coordinate systems. mapguide-react-layout deals completely in EPSG codes. Whatever coordinate system you have must have a non-zero EPSG code.