Embed Maps, Data Visualization & Event Calendars

The CMS Lite allows two types of maps to be embedded from the following sources:  Google and DataBC.   DataBC visualization content may also be embedded. Visualization is the presentation of data in a pictorial or graphical format (e.g. charts, graphs, dashboards).  Event calendars may also be embedded.

Embed Map

  1. Place the cursor in the Rich Text Editor (WYSIWYG) where the map is to be inserted
  2. Click the Embed External Content Visualization icon icon on the toolbar
    The following options will be displayed
    embed icon options - embed maps or embed visualization
  3. Select Embed Map
    The Map Embed dialogue box will be displayed. Click image to view in full screen
    image of the Embed Map approval tab
  4. Check the box next to the statement "I confirm that I have consulted DataBC Enterprise Date Services and have received their approval." to enable the Map Embed tab
  5. Click on the Map Embed tab
    Map Embed Properties box
    1. To embed a map from DataBC, you may click the following page link provided see for information regarding the three DataBC Web Mapping Frameworks 
      • You may also email DataBC using the email link provided
    2. To embed a Google Map:
      • Search for a location on Google Maps
      • Click SHARE Map share icon
      • Click the Embed Map tab
      • Copy the URL provided into the Embed URL field (you have the correct link if the URL starts with <iframe scr=)
  6. Click on the [Map Embed] tab and paste the link into the mandatory Paste Map Embed URL field
  7. Enter an applicable title in the mandatory Title field that will be displayed above the map frame  
  8. If desired, enter a description in the Description field that will be displayed below the map frame
  9. The Size defaults to 640px x 360px. Use the drop-down box to choose another option:
    • 1120px x 630px
    • 700px x 700px
    • 560px x 315px
    • 400px x 225px
  10. Click the [OK] button 
    The dialogue box will be closed and a place holder image will be inserted at the cursor location. The map will be displayed in a browser window

Embed Visualization

  1. Place the cursor in the Rich Text Editor (WYSIWYG) where the visualization object is to be inserted
  2. Click the Embed External Content Visualization icon icon on the toolbar
    The following options will be displayed
    embed icon options - embed maps or embed visualization
  3. Select Embed Visualization
    The Embed DataBC Content dialogue box will be displayed. Click image to view in full screen
    data visualization instruction tab
  4. Click on the [Embed DataBC Content] tab
    data visualization embed DataBC content tab
  5. Enter a valid link into the mandatory Paste DataBC Visualization URL field
  6. Enter an applicable title in the mandaory Title field that will be displayed above the frame
  7. If desired, enter a description in the Description field that will be displayed below the frame
  8. The Size defaults to 640px x 360px. Use the drop-down box to choose another option:
    • 1120px x 630px
    • 700px x 700px
    • 560px x 315px
    • 400px x 225px
  9. Click the [OK] button 
    The dialogue box will be closed and a place holder image will be inserted at the cursor location. The visualization content will be displayed in a browser window

Embed Event Calendar

  1. Place the cursor in the Rich Text Editor (WYSIWYG) where the calendar is to be inserted
  2. Click the Embed External Content Visualization icon icon on the toolbar
    The following options will be displayed
    embed icon options - embed maps or embed visualization
  3. Select Embed Event Calendar
    The Embed Event Calendar dialogue box will be displayed. Click image to view in full screen
    embed event calendar instruction tab
  4. Click on the [Embed Event Calendar] tab
    embed event calendar tab
  5. Enter a valid link into the mandatory Paste Calendar Event URL field. This plug-in only supports URLs from https://events.gov.bc.ca/.  An error message will be displayed if the URL is invalid
  6. The Size defaults to 1120px x 630px. If desired, use the drop-down box to choose 700px x 700px
  7. Click the [OK] button 
    The dialogue box will be closed and a place holder image will be inserted at the cursor location. The calendar will be displayed in a browser window