The Devtalk-section of the Merkator website is used by our developers to share milestones in projects or things they learned, … We started this series to share these posts internally, but decided that the outside world can read it too. Why not ? But remember, this blogpost is not the formal place for marketing and sales, so don’t take this too seriously. To the reader: Just Enjoy also if you, the reader, sees us as a potential competitor….
Web applications are slowly but surely changing the landscape of software development. The geospatial market is no exception and as we develop our “Marlin suite”, it’s important to stay ahead of the pack. When we started working on Marlin, back in 2014, we already had foreseen a web component using Microsoft Silverlight technology, mostly because of how easily we could convert and reuse our desktop client-code.
As Silverlight support diminished, it became clear Marlin would need to lay a new egg. This egg is what we call the Marlin Navigator. A native HTML5 web viewer, built from the ground up, using the latest technology and ready for any challenges to come.
We focused on reusing business logic
When users want to view the details of a certain asset, the navigator will send a request to the Marlin WebAPI which will trigger the exact same code used by our desktop client, meaning we apply all of the business logic on the server side and then simply send a lightweight JSON object back to the web client. Let’s see how that looks by inspecting some assets of a typical coax network.
Note that all positional and sizing parameters of the schematic drawings on the right-hand side of the screen are generated on the server and only the presentation is done on the HTML client.
Adding secondary views
Another important part of the Navigator is what we call the secondary view. This view allows the user to see both the map and any other view in a top-down and dynamic mode. The user has an overview of the available secondary views from which he can select. Let’s see that in action with panoramic images from Google’s Streetview. Note that the position and point-of-view of the panoramic image is also tracked on the map dynamically.
Efficient & attractive UI
As developers, we are able to create whatever the user needs. However, users are demanding more from us. It is no longer sufficient to deliver bugfree and functional software, it also needs to look good and work efficient. Merkator has some in-house UX/UI experience, but as we want to take over the geospatial world with our Marlin suite, we wanted to do better. The Navigator was our first experience working together with an external specialised UX design agency to identify how we could improve both the efficiency and the attractiveness of the user interface. Take a look at how much the user interface has improved.
What the future holds
As we continue working on our Marlin architecture, we want to expand the web viewer with basic editing capabilities and who knows, maybe someday the viewer could be a proper alternative to our desktop client providing the full range of editing tools.
What’s under the hood?
- CSS / SASS
- Bootstrap 4
- Angular 5
- Arcgis JS API 3.23
- Microsoft WebAPI v2 leveraging the existing Marlin codebase
- AutoFac for dependency injection
Robin De Nutte
Geo-ICT Consultant / Developer Navigator
Robin De Nutte joined Merkator NV/SA in September 2012 after an initial professional start at a Belgian IT services and IT helpdesk provider where he was part of the operations team for one of Belgian’s biggest financial institutions. Robin discovered GIS at Merkator and works today in our development department where he focuses on advanced User Interface design using technologies such as Microsoft WPF and on core development of Coaxial and Fiber networks. He is daily contributing on strategic tracks at customers such as Telenet NV and Fluxys Belgium. Robin holds a Bachelor in Multimedia & Communication Technology (Kortrijk – Belgium, 2008).