Categories
Web development

Embed the Coronavirus Live Map on your website

The live map by M Media uses the M Media Covid API to get live Coronavirus data. Developers can include it on their websites for free using the following methods.

Including the map on your website

M Media customers

If your website is built and/or managed by M Media, we can add this map for you anywhere on your website in accordance with our Website Maintenance pricing.

WordPress

If you have a WordPress website, you can easily include the map using our shortcode. Read about our Covid Watch WordPress plugin here.

Iframe embed

You can easily embed the map using an iFrame. Please note this method is subject to frequent change as we work out the most optimal way to embed code.

  1. Include the following code anywhere in the body:
    • <iframe src="https://mmedia-storage-bucket.s3.eu-west-3.amazonaws.com/public_shared_assets/covid-map/index.html" width="100%" frameborder="0" scrolling="no" style="border:none;">

Javascript

This is the best way to add the map to your webpage, but requires more development work. Using this method will ensure that the styling of the map will match your websites styles.

  1. Include the following scripts in the head section:
    • <link rel="stylesheet" href="https://mmedia-storage-bucket.s3.eu-west-3.amazonaws.com/public_shared_assets/covid-map/svgMap.css" media="all">
    • <script src="https://mmedia-storage-bucket.s3.eu-west-3.amazonaws.com/public_shared_assets/covid-map/svgMap.js">
  2. Include the following HTML anywhere in the body:
    • <div id="svgMapPopulation">
  3. Include the following scripts at the bottom of the page:
    • <script src="https://mmedia-storage-bucket.s3.eu-west-3.amazonaws.com/public_shared_assets/covid-map/data/all.js">
      • Take a look at what this script is doing. You can easily duplicate it and modify it to your needs.

Leave a Reply