apostrophe-raphael

Apostrophe's solution for simple vector maps. Subclasses apostrophe-snippets. Uses raphael.js.

Usage no npm install needed!

<script type="module">
  import apostropheRaphael from 'https://cdn.skypack.dev/apostrophe-raphael';
</script>

README

apostrophe-raphael

proof of concept!

Apostrophe's solution for simple vector maps. Subclasses apostrophe-snippets. Uses raphael.js.

Usage

Make sure you have the module installed in and required by your project:

npm install apostrophe-raphael --save

Now, in app.js when you're setting up your modules, simply add 'apostrophe-raphael' to the modules object.

modules: {
  'apostrophe-ui-2': { },
  'apostrophe-editor-2': { },
  'apostrophe-raphael': { },
  // ... and so on
}

And then make sure the 'raphael' page type is added with the others. It should look something like this:

pages: {
  types: [
    { name: 'default', label: 'Default (Two Column)' },
    { name: 'blog', label: 'Blog' },
    { name: 'raphael', label: 'US Map' }
  ]
}

Lastly, add the menu to the Apostrophe admin bar so our content can be edited. In views/global/outerLayout.html, include aposRaphaelMenu with the other menu calls:

{{ aposPagesMenu({ page: page, edit: edit }) }}

<!-- right in here -->
{{ aposRaphaelMenu(permissions) }}
          
{{ aposPeopleMenu(permissions) }}
{{ aposGroupsMenu(permissions) }}
{{ aposMediaMenu({ edit: permissions.guest })}}
{{ aposTagsMenu({ edit: permissions.admin }) }}

Map Types

By default, apostrophe-raphael renders a map of the United States but that's easy to change! You can pass a mapType option to the module. You'll probably also want to change the label and icon accordingly.

'apostrophe-raphael': {
  mapType: 'world',
  label: 'World Map',
  icon: 'globe',
}