You are here: HomeSoftwarePointee

Pointee for ExpressionEngine v1.6.x

Pointee is an ExpressionEngine 1.6.x Fieldtype that lets publishers log the x & y coordinates of a single click on an image.

If you work with custom maps, or need to integrate x & y coordinates to Flash, xml, css whatever... Then this addon might be for you.

This is a quick release and has been put through a narrow testing environment, so if you have some feedback, we'd love to hear it.

Documentation

Top

Installation

Download and extract. Upload the language file to your system/language/english directory.

Upload the jamdigital_pointee folder to your system/extensions/fieldtypes folder

Top

Usage

After selecting Pointee as your custom field, enter an url for the image you'd like to use as a map. Multiple maps/fields/cells on the same publish page work fine.

The size of the image is up to you, Pointee should work with whatever size image you need and will log coordinates in pixels from the top left of the image.

When publishing, Pointee will also display a marker on the point of contact, or the previously stored coordinates of the marker on page load.

Displaying your x and y coordinates in your template:

If your Pointee field short name is 'map', display the x and y coordinates using the following:

  • {map:x}
  • {map:y}

If you are using pointee for css positioning, you can use the offset parameter to adjust the output of the x&y coordinates as required

  • {map:x offset="14"}
  • {map:y offset="-30"}

You can use Pointee as a matrix celltype, example below is where "map" is your fieldname, and "cell_map" is your FF Matrix Cell name.

  • {map}
    {cell_map:x}
    {cell_map:y}
    {/map}

Top

To-do

The jQuery involved is not very efficient and was thrown together quite quickly. If anyone has suggestions for improvement, we'd love to hear them!

Don't be shy, add a comment

Your Name

Email* (Never displayed, and never shared)

Remember my personal information
Notify me of follow-up comments?

To prevent automated spam, please enter the word you see in the image below:


Back to top