- 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
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.
Posts
12 comments:
Awesome work!
Can not find "dist/viewer.js" (from viewer/index.html)
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
Jackie, where is the viewer.js file? Thank you
I don't know what zip file you downloaded, but I see viewer/dist/viewer.js in every viewer.zip I downloaded.
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
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).
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?
I have a current map the uses CS: XY-IN (Arbitrary X-Y Coordinates (U.S.Survey Inches))
that wont work?
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.
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.
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.
Post a Comment