Skip to content
This repository has been archived by the owner on Apr 16, 2024. It is now read-only.

Additional Markers Pins

Schlumpf edited this page Dec 3, 2015 · 3 revisions

You can add additional markers to the map. To do that, you have to define

  • where the marker should be posioned,
  • how the marker should look like and
  • the popup of the marker.

These three "parameters" of the markers can specified seperatly in three text boxes. There is a bit cryptic syntax to set these "parameters", but it follows a simple line: Every definition begins with # followed by a name, a parameter list in {} and ends with ;. Parameters inside the parameter list, can be grouped by {}.

Parameters

Markers/Pins

Syntax:

#name{ (lat,lon), #customstylename, {#popupname, click} };

Explanation:

  • #name - Unique name of the pin. Must begin with #.
  • {..., ...} - Parameter list. The parameter count is fix, so empty parameters have to be empty but there.
    • (lat,lon) - Latitude and Longitude in decimals, splited by a , and enclosed with parenthesis.
    • #customstylename - (OPTIONAL) Name of the custom pin style, specified in next text box. Must start with #.
    • {..., ...} - (OPTIONAL) Popup definition:
      • #popupname - Name of the popup, specified in the las text box. Must start with #.
      • click or immediately - says if the popup should be shown on mouse click or immediately at page loading. NOTE: You can't open more than one popup at the same time.
  • ; - End of marker definition

Minimal example: #pin1{(52.5163,13.378),,};

Custom marker/pin styles

Syntax:

#name{"pinimage", (wxh), "shadowimage", (wxh), (wxh), (wxh)};

Explanation:

  • #name - Unique name of the pin. Must begin with #.
  • {..., ...} - Parameter list. The parameter count is fix, so empty parameters have to be empty but there.
    • "pinimage" - Path to imagefile for the marker in "". You can use relative paths from Joomla root or absolute URLs.
    • (wxh) - Size of the image in px. Example: (24x24).
    • shadowimage - Path to imagefile for the marker shadow in "". You can use relative paths from Joomla root or absolute URLs.
    • (wxh) - Size of the shadow image in px. Example: (24x24).
    • (wxh) - Pin point offset in px. This is the relative point, where the pin hits the map. (0x0) is the top-left corner. Example: (12x24).
    • (wxh) - Popup offset in px. This is the relative point, where the popup hits the pin. (0x0) is the pin point offset. Example: (0x-24).

Popups

Syntax:

#name{text};

Explanation:

  • #name - Unique name of the pin. Must begin with #.
  • {...} - Parameter list. The parameter count is fix, so empty parameters have to be empty but there.
    • text - Text for the popup. HTML-Code is allowed. Please don't use the string };.

Examples

Standard marker without popup

  • Markers: #onlypin{(49.593735,18.012013),,};
  • Custom styles:
  • Popups:

Standard marker with popup

  • Markers: #onlypin{(49.593735,18.012013),,{#popup,click}};
  • Custom styles:
  • Popups: #popup{Hello World};

Custom marker without popup

  • Markers: #onlypin{(49.593735,18.012013),#custom,};
  • Custom styles: #custom{"images/banners/osmbanner1.png", (24x24), "", (0x0), (12x24), (0x-20)};
  • Popups:

Custom marker with popup

  • Markers: #onlypin{(49.593735,18.012013),#custom,{#popup,click}};
  • Custom styles: #custom{"images/banners/osmbanner1.png", (24x24), "", (0x0), (12x24), (0x-20)};
  • Popups: #popup{Hello World};

Icon offset

Offset image

Pin point offset

This option specifies the point, where the pin hits the map. 0x0 ist the top-left corner (see b) ). Of course, there is a diffenrence between the default pin and crosshairs.

Popup offset

If the peak of the popup shouldn't start at the pin offset pint, you have to move it. In this case the offset begins at the pin offset point (see c) ). If you use a pin image like the default pin and set the popoup offset to 0x0, the popup will hide the pin.