Background

As an independent publishing platform, there are many very beautiful themes developed by Ghost team and 3rd party developers, but I found the plugin or extension market for Ghost is not really startup. Am I right? We are tying to fill the gap to make Ghost powered blog more attractive. Mapdoc is the first try.

Today short video and live video have big impact to traditional static content sites. The computing ability and network bandwidth increase very fast, that help videos are more and more widely accept by users. We focus on the interactive media types and we believe it will be another interesting area beyond video.

Mapdoc Compared with Other Solutions

The location related information is very common and useful. Recently, story map related technology bloomed. The main players are Google Earth and ArcGIS storymap platform from ESRI. Lately last year and early this year, Mapbox and Cesium are also pushing this product form more popular. Today, we bring the capability to Ghost, help all independent publisher tell stories with interactive 3d maps. Compared to the 3rd party solutions, Mapdoc has some advantages:

  • All the data on map are stored in Ghost database, except the base map layer which is the major dependency.
  • We have an powerful editor integrated in ghost admin client, the author does not need to use other tools to finish the related content and then embed the map in post.
  • Better functionalities like advanced drawing tool, VR support, etc. The list is still growing.

Mapdoc Overview

Mapdoc brings two types of customized "card" to Ghost editor in admin client: map card and scene card. You can easily add one or more maps into your post. As one map card may contains more than one scene, the scene card is used to control the current scene of the map according to the reading progress of the post.

Thanks to the mobiledoc-kit which is used in Ghost project, the whole Ghost post data structure is in open format and easy to extend.

Main Effort for Mapdoc v1.0

We have achieved the following improvements base on current Ghost release:

  1. A powerful map card of Ghost, both card viewer and editor are implemented with Vue.js, that means, we have successfully integrate a Vue.js component into a mature ember.js based application and handlebars based theme.
  2. The 3D map card is developed based on the world famous 3D GIS engine cesium.js, we bring the zero coding experience of map authoring and integrated VR experiences to a normal Ghost post.
  3. Hack Ghost server component so that the new Mapdoc cards could correctly rendered. At the time this post is written, Mapdoc is built upon Ghost version 3.12.0.
  4. Hack Ghost admin client so that the author could insert Mapdoc cards into the document. At the time this post is written, Mapdoc is built upon Ghost version 3.12.0, with some code merged from 3.12.1 in order to fix some small bugs.
  5. We also fix a long open issue which existed in Ghost over two years about the CJK IME, to achieve this target, the release package is compiled based on a customized mobiledoc-kit version.
  6. Customize two free themes come from Ghost, Casper and Lyra, so the Mapdoc cards could be correctly displayed and have correct interactive behaviors.
  7. Three layout schema of map card are taken into account: pin the map at the right sidecar, fix the map on the top of the content, or put it occupy the full width of the page. You can change the layout by choice different post template without modify the post content.
  8. Enhance Casper and Lyra, bring i18n support with Chinese translation as the first step, and enable PWA support, :) by the way, the locale of Mapdoc card UI is automatically selected via the browser language setting.

Future Consideration

Today, because the extension mechanism of Ghost is not very clear, so Mapdoc will be released a customized distribution with an enhanced built-in casper theme. And the enhanced Lyra theme could also be downloaded as a separated package.

I  hope that in the future, we could cooperate with Ghost team about the extension development, and we could focus on the extension cards and themes. Our target is going to introduce more interesting and interactive content into this awesome open blog platform.