EWX Map Snippet Configurator

To configure your EWX Map Snippet, select the desired dataset, region, periodicity, statistic and time period of coverage, below. Pan and zoom to your desired window. Resize the map to your desired width and height. Copy and paste the generated code into your web page.

  • Checking "latest" will configure your map to always display the most recent coverage in the selected series.
  • The optional time navigation controls will allow your users to navigate forward and backward through the configured time series. (The time navigation controls are disabled in the configurator map. But, they will work in your web page.)
  • Pan and zoom in the map to set the bounds and zoom level as you would like them to appear in your web page.
  • Use the resize control in the lower right of the map below to resize the map as you would like it to appear in your web page.
  • When you copy and paste the generated code into your web page, the map will appear exactly as it appears below.

 
Time navigation

This code [ produces this ] map

First, copy the line of code below [ and paste it above the intended location of the first EWX map in your web page. Make sure this line appears only once in your page.

<script src="http://ewx.chg.ucsb.edu/ewx-snippets/ewxmap/ewxmap.js"></script>

Next, copy the code below [ and paste it into your web page where you would like the map to appear. You can place as many maps in you page as you wish.

Optional optimization

Because of the way web browsers load content, your map snippets will load a bit faster if you place your scripts at the bottom of the page, with your map divs above.

Here's an example of a completed, optimized page containing three map snippets:

<!DOCTYPE html>
<html>
  <head>
    <title>My Snippets Page</title>
  </head>
  <body>
    <div id="ewx-map-4b42nl2le9"></div>
    <div id="ewx-map-i269qto2n1"></div>
    <div id="ewx-map-huirw9mwnw"></div>
    <script src="http://ewx.chg.ucsb.edu/ewx-snippets/ewxmap/ewxmap.js"></script>
    <script>
    new EwxMap({
      ewxUrl: 'http://ewx.chg.ucsb.edu:8080/EWX',
      id: 'ewx-map-4b42nl2le9',
      dataset: 'chirps',
      region: 'asia',
      periodicity: '1-dekad',
      period: { year: 2016, month: 2, dekad: 3 },
      showDekadControl: true,
      showYearControl: true,
      units: 'mm',
      statistic: 'data',
      width: 961,
      height: 590,
      zoom: 4,
      center: [20.67, 78.44],
    });
    </script>
    <script>
    new EwxMap({
      ewxUrl: 'http://ewx.chg.ucsb.edu:8080/EWX',
      id: 'ewx-map-i269qto2n1',
      dataset: 'chirpsclim',
      region: 'africa',
      periodicity: '3-month',
      period: { year: 2000, month: 6 },
      showMonthControl: true,
      showYearControl: true,
      units: 'mm',
      statistic: 'data',
      width: 531,
      height: 515,
      zoom: 3,
      center: [-0.18, 17.49],
    });
    </script>
    <script>
    new EwxMap({
      ewxUrl: 'http://ewx.chg.ucsb.edu:8080/EWX',
      id: 'ewx-map-huirw9mwnw',
      dataset: 'chirps',
      region: 'usa',
      periodicity: '1-month',
      period: { year: 2000, month: 6 },
      showMonthControl: true,
      showYearControl: true,
      units: 'mm',
      statistic: 'data',
      width: 531,
      height: 515,
      zoom: 3,
      center: [37.71, -96.50],
    });
    </script>
  </body>
</html>