How to install EURDEP Widget

Simple Installation (default settings)

Presentation Modes: The widget has two modes of presentation: build-in and pop-up.

  • Build-in Mode:  The widget is embeded in the page (see example 1).

Example 1

In order to embed the widget (build-in mode) the webmaster needs simply to copy and paste the following lines in the hosting page.
     1. Put this line in the head ( <HEAD></HEAD>) section
<script type="text/javascript" src="https://rewidget.jrc.ec.europa.eu/v3/loader.ashx?theme=eu-2015&lang=en"></script>

     2. Put these lines in the body ( <BODY></BODY>) section 
<div id="widget" style="height:500px"></div>
<script type="text/javascript">   
__eurdep_maps('widget');
</script>

N.B. If the widget is used in a build-in mode, a care should be taken (from the webmaster) about the correct positioning, sizing, spacing, etc. As a minimum the value of "height" parameter should be edited according your needs.


  • Pop-up Mode: The widget pops-up when a button is pressed (see example 2).

Example 2

In order to install the widget as a pop-up map (only the button is visible) the webmaster needs simply to copy and paste the following lines in the hosting page.
     1. Put this line in the head ( <HEAD></HEAD>) section if it is not already there

<script type="text/javascript" src="https://rewidget.jrc.ec.europa.eu/v3/loader.ashx?theme=eu-2015&lang=en"></script>

     2. Put these lines in the body ( <BODY></BODY>) section 
<div id="widget-button"></div>
<script type="text/javascript">
__eurdep_maps('widget-button', {button: true, label: 'Show EURDEP Radiation Monitoring Map' }); 
</script>
N.B. If the widget is used in pop-up mode there is only a button visible on the web page. When pressed a modal window pops up displaying the map and covering the content of the page until the map is closed.


Advanced Installation (custom settings)

The webmaster should edit the parameters in order to customize the functionality and appearance of the widget

1. Language: Currently there are only two available (BG, LV) but the widget could be translated in your own language if you take the initiative to do so. Please contact us at eurdep-comments@jrc.ec.europa.eu for more information.

If your language is one of the already translated (mentioned above), you could edit the value of the "lang" parameter by replacing it with a lower case two-letter country code.

For example if you would like to use Latvian as your widget language, change the "lang" parameter like this:

<script type="text/javascript" src="https://rewidget.jrc.ec.europa.eu/v3/loader.ashx?theme=eu-2015&lang=lv"></script>

2. Countries Selection: The widget allows to specify several countries which should be displayed and the widget will automatically adjust the zoom and center the map.

    For example in order to select Czech Republic one should specify "CZ" as a value of the parameter "countries" like this:

<div id="widget" style="height:500px"></div>
<script type="text/javascript">
   __eurdep_maps('widget', {countries: 'CZ'});
</script>


Example 3

3. Zoom and Center:  A "zoom" and "center" parameters could be used for more customized settings instead of "countries" parameter, e.g. the map could be zoomed to a particular region or a city. In order to achieve this (e.g. zoom and center to Paris), specify the latitude and longitude of the center of the map and add a zoom value. N.B. for latitude and longitude [degrees].[decimal degrees] notation should be used and the zoom level accepts integer values from 3 to 12 (higher the value bigger the zoom).

<div id="widget" style="height:500px"></div>
<script type="text/javascript"> 
  __eurdep_maps('widget', {center: [48.8443939,2.3771532], zoom: 11});

</script>



Example 4

4. Themes: Select a widget theme in order to match the color scheme of the hosting page. Theme parameter is part of the URL request. 

For example if you would like to use "redmond" as your widget theme chnage the URL request like this:

<script type="text/javascript" src="https://rewidget.jrc.ec.europa.eu/v3/loader.ashx?theme=redmond&lang=en"></script>
You can select the theme names (lowercase) that suits you most from the following list:

  • ui-lightness
  • ui-darkness
  • smoothness
  • start
  • redmond
  • sunny
  • overcast
  • le-frog
  • flick
  • pepper-grinder
  • eggplant
  • dark-hive
  • cupertino
  • south-street
  • blitzer
  • humanity
  • hot-sneaks
  • excite-bike
  • vader
  • dot-luv
  • mint-choc
  • black-tie
  • trontastic
  • swanky-purse