Page tree
Skip to end of metadata
Go to start of metadata

Overview

This module provides a map area on the site pages. You can search for listings using keywords, filter using categories, or addresses to locate the listings. You can also add custom pin icons for each category for easy identification.

The JomDirectory Maps module upon activation is seen as follows on the pages:

Screen 1: JomDirectory maps screen

Editing the JomDirectory Map Module

To edit the module, click on the module link or select the checkbox next to the module name, and then click Edit.

The following image shows the module edit screen.

Screen 2: Module tab

Module Tab

This tab controls the layout where the maps panel is to be displayed on the screen.

 

Screen 3: Module tab

Provide the options as per the following table.

Options

Usage

Display Limit

a maximum number of pins that can be displayed on the map.

Map Width

Percentage of map width.

Map Height

Map height on the page in pixels.

Display Category

Enable to show category as a search parameter.

Display Address

Enable to show the address as a search parameter.

Keyword

Enable to show the keyword text area.

Show Title

Show or hide the title for the search panel.

Position

Select the position based on your Joomla Template.

Status

Select the status of the module:

  • Published
  • Unpublished
  • Trashed

Start Publishing

Provide a date when the map panel should be published.

Finish Publishing

Provide a date when the map panel should be unpublished.

Access

Provide access level for the panel.

  • Guest
  • Public
  • Registered
  • Special

Ordering

Provide the order in which the side panel should appear. If more than one module is positioned at the same location, you can set the order of appearance in this field.

Language

Select the language for which you want to display this panel. For each language, you must create a new JomDirectory Search module.

Note

Provide additional information.

 Menu Assignment tab

This tab controls where the module should be displayed. You can decide if it should be displayed on all pages for the site or just selective pages.

Screen 4: Menu Assignment tab

Select the required menu for module assignment. The available options are:

  • On all pages
  • No pages
  • Only on the pages selected
  • On all pages except those selected

For the last two options, the screen is as shown in the following image:

Screen 4: Menu Assignment options tab

Modifying map to full-width

If the template you are using does not support a full-width display, use the following configuration tips and tricks to display it in full width. You need to edit the current Joomla theme CSS, such as layout.css and insert the following lines of code.

#jd-mod-maps-default {
position: absolute;
width: 100%;
 
top: 200px;
 
height: 500px;
 
left: 0;    margin: 0;    padding: 0;
}

This code will move the map in absolute position. But, the module location will now include no space and the page content will be displayed below the map. This empty space needs to be filled by setting the height to the value of the map height.

To create this space, we need to create a Custom HTML module and place it in the same position as where the map needs to be seen. You need to edit HTML and create a div with the height same as the map:

<div style="height: 400px;"> </div>

After this configuration, the map will be displayed in a full-width mode as seen in the image shows above (refer the first section). Other styling elements can also be added as per your requirement to the layout.css file.

Creating custom category markers

When any listing is displayed on the map, it is shown as a pin. This pin icon is as in the default template. To modify this pinned icon as per your category, marker image needs to be placed under module images directory:

modules/mod_jomdirectory_maps/images/markers/...

The file name should be same as the category. The spaces need to be replaced with dashes " - " and the "marker" prefix. So, suppose category name is Auto Parts, then the file name for the marker should be marker_auto-parts.png.

 

  • No labels