Our release of Mapdoc includes a prebuilt casper theme which has Mapdoc card enabled. It's very easy to enable Mapdoc card support in your own theme.

Add the following script in default.hbs if you want to enable Mapdoc card support for all post and pages. You can also enable Mapdoc card only for some of the posts via inject these scripts in Ghost admin in the post settings panel.

{{#is "page, post"}}
<script src="https://cdn.jsdelivr.net/npm/loaders.css@0.1.2/loaders.css.js"</script>
<script>
  $('.mapdoc-loading').addClass('loader-inner ball-pulse')
  $('.loader-inner').loaders()
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/gh/ilovebug/mapdoc@1.68.11/ddmap-viewer.js"></script>
{{/is}}

Because Mapdoc runtime relays on the base map layers from Cesium and Mapbox, you will need to register an API the set the API token in the post template. After you get the token, inject the following code

<script>
  window.mapdoc = {
    tokens: {
      cesium: YOUR_CESIUM_TOKEN,
      mapbox: YOUR_MAPBOX_TOKEN
    }
  }
</script>

Enable mapdoc card interactions in post template

As there are three different layout, so we need to create three customized template files.

Normally, the customized template will have the same content as the normal post, so we just do a copy and add some necessary actions.

  • Enable full width Mapdoc card support

Copy the post.hbs to custom-map-full-width.hbs, add the following code in the {{contentFor}} block

<script>
$(document).ready(function () {
  $('.kg-mapdoc').css('width', '100vw');
});
</script>
  • Enable Mapdoc card interactions for sidebar layout

Copy the post.hbs to custom-map-on-sidebar.hbs, add the following code in the {{contentFor}} block

<script>
$(document).ready(function () {
  window.mapdoc && window.mapdoc.mapdocSidecarScroll && window.mapdoc.mapdocSidecarScroll();
});
</script>
  • Enable Mapdoc card interactions for fix on top layout

Copy the post.hbs to custom-map-on-top.hbs, add the following code in the {{contentFor}} block

<script>
$(document).ready(function () {
  $('.kg-mapdoc').css('width', '100vw');
  window.mapdoc && window.mapdoc.mapdocFixTopScroll && window.mapdoc.mapdocFixTopScroll();
});
</script>