Hello 👋 welcome to the map. Please choose a view:

Map view

Group finder

Powerup campaign mode

Brand preview

To embed the map, place the script tag and the target div on the page, like this:

<div id="map-embed" data-app="powerup" data-campaigns="global-power-up"></div>
<script src="https://map.350.org/cjam-embed.js" defer></script>

Customizing your map embed

  • The `data-app` attribute refers to either "map", "groups" or "powerup" and determines which map will be displayed.
  • You can set the language for the map's interface with `data-lang="fr"`. Accepted language codes are: en, fr, pt, de, es, ru, tr, id, ja, uk
  • For event campaigns, you can control which campaign is retrieved and displayed with the attribute `data-campaigns="jta-doa"`
  • You can set the starting lat, lng, and zoom with attributes like `data-lng="-2" data-lat="20" data-zoom="6"`
  • You can tinker with your map settings without editing the embed code each time by overriding the embed attributes with URL arguments. So for example your embed code may not have a lat, lng, or zoom set, but you can load the page with `?zoom=6&lat=40&lng=10` to see what it will look like. (This applies to all attributes, including lang and campaigns.)

Advanced

The embed uses an iframe, which means sometimes it will have an ugly border or odd spacing. It is the responsibility of the site that the map is going on to make sure that the iframe is styled correctly. For example:

<style>
  #map-embed iframe {
    border: 0;
    width: 100%;
    max-width: 900px;
  }
</style>

The map will appear wherever the "div" goes, but the script tag can be placed anywhere. If the map is at the top of the page and needs to load immediately, remove the word "defer" from the script tag, and make sure it"s placed somewhere after/below the div.