Child pages
  • Plugin - Highlighting map areas
Skip to end of metadata
Go to start of metadata

Plugin use is at your own risk. The National Library and/or plugin creators are not responsible for plugin operations in different web browsers and browser versions.

1. Basic information

The plugin highlights map locations by displaying the icon specified in the settings over the locations. Icons can be defined to blink X times over the location and then to either disappear or remain in place. You can define the number of blinks, the blink speed, the icon used, the minimum and maximum sizes of the highlighted areas, as well as the icon’s permanent display.

Table 1 presents the basic plugin information.

Name

animate-areas.js

Version

1.0

Date

4.11.2012

Description

Highlights map locations by displaying the icon specified in the settings over the locations.

Note

 

Author

Petteri Kivimäki (The National Library of Finland)

Table 1. Basic plugin information.

Table 2 presents the plugin settings that can be edited during initialisation.

Setting

Description

Default

Type

Required

level

Indicates whether the highlighting applies to maps of libraries, collections or shelves (no value = all). The plugin has no impact on Google Maps.

all

string

no

animate

Indicates whether icons blink over the areas.

true

boolean

no

delay

The time between blinks (in milliseconds) when the value of animate is true.

200

integer

no

repeatCount

Indicates the number of blinks when the value of animate is true.

2

integer

no

leaveIconVisible

Indicates whether the icon remains visible on the map after the number of blinks defined in repeatCount.

false

boolean

no

icon

Location Services offers five icons to choose from: arrow_red, arrow_yellow, arrow_orange, arrow_green, marker. These are displayed in Table 3.

marker

string

no

iconPath

You may also use an image file uploaded to Location Service. Images are loaded through the Images and Maps section. If you use an uploaded image, enter its location in the following format: owners/FI-TEST/images/icon.png, and replace FI-TEST with the ISIL identifier of your library. Do not specify the icon setting when using an uploaded icon.

 

string

no

iconWidth

The width of the icon in pixels. You need this setting only if you use an uploaded icon that is not 32 pixels wide or if you want to change the size of an icon provided with the plugin.

32

integer

no

iconHeight

The height of the icon in pixels. You need this setting only if you use an uploaded icon that is not 32 pixels high or if you want to change the size of an icon provided with the plugin.

32

integer

no

maxArea

The maximum size of highlighted areas. If the area is larger than the value defined in this setting, no icon will be displayed over the area. A value of 0 means that no maximum size has been defined. The size of the area is calculated by multiplying width by height.

0

integer

no

minArea

The minimum size of highlighted areas. If the area is smaller than the value defined in this setting, no icon will be displayed over the area. A value of 0 means that no minimum size has been defined. The size of the area is calculated by multiplying width by height.

0

integer

no

Table 2. Plugin settings.

Code

Icon

Size in pixels

arrow_red

32x32

arrow_yellow

32x32

arrow_orange

32x32

arrow_green

32x32

marker

32x32

Table 3. Icons provided with the plugin.

1.1 Initialisation

Initialisation of plugin with default settings:

$(window).load( function() {
  $.AnimateAreas();
});

Example of plugin initialisation with modified settings:

$(window).load( function() {
  $.AnimateAreas({
    'repeatCount' : 3,
    'leaveIconVisible': true,
    'level' : 'shelf'
  });
});

Example of plugin initialisation with modified settings when using an uploaded icon of 24x24 pixels in size:

$(window).load( function() {
  $.AnimateAreas({
    'repeatCount' : 5,
    'leaveIconVisible' : true,
    'iconPath' : 'owners/FI-TEST/images/icon.png',
    'iconWidth': 24,
    'iconHeight':24
  });
});

2. Deployment

Plugin use is page-specific, meaning that deployment measures must be repeated in all the templates in which the plugin is to be used.

To deploy a plugin, you must include in the template the jQuery library, the plugin and the plugin initialisation script.

  1. Navigate to the Templates section in the maintenance interface..
  2. Create the initialisation script by entering its name in the Add new script field and click Add.
    1. NB! The initialisation script needs to be created only once, if the same plugin settings will be used in all the different templates. In other words, the script can be included in several templates; separate initialisation scripts are not needed for different templates. If you want to use an existing initialisation script, move to step 6.
  3. Open the script in the editing view.
  4. Copy the following code to the script.

    $(window).load( function() {
      $.AnimateAreas();
    });
    
  5. Click Save & Close.
  6. Choose the language in the Languages menu.
  7. Open the template in the editing view.
  8. In the template’s head section, add links to the jQuery library, the plugin and the script you created or edited. NB! Follow this exact order!
    1. You can easily add links by using the jQuery, Plugins and Scripts sections in the left-hand side menu.

      <head>
      <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
      <script type="text/javascript" src="scripts/plugins/animate-areas.js"></script>
      <script type="text/javascript" src="owners/FI-TEST/scripts/areas.js"></script>
      </head>
      
  9. Click Save to save the changes.
  10. The plugin has now been added to the template, and it can be tested by searching for a location that uses the template.

3. Layout

The layout details of icons used by the plugin can be edited by referencing the values of class attributes in the CSS style sheet. Table 4 describes the values of the icons’ class attributes at different levels. NB! To change the size of the icon, do not use the CSS style sheet, but the iconWidth and iconHeight plugin settings.

Level

Class attribute

library

marker_library

collection

marker_collection

shelf

marker_shelf

Table 4. The values of the icons’ class attributes at different levels.

Recently Updated

  • No labels