Configuring the Dialog Window

Configuring the Dialog Window: Displaying Your Specific Lot Data

Dialog Options

The dialog window has many configurable options and functionality. Check the jQuery UI Dialog documentation for detailed information on how to customize the dialog.

Dialog Events & Lot Data

In this example we’re making use of the jQuery UI Dialog “open” event listener.

Each dialog object has the option “lotData” set with all the lot data available. var lotData = $(this).dialog(‘option’,’lotData’);

Customizing Dialog Layout

You can customize the content of the dialog window if you like. By default content is available for the dialog window in the html variable of the lotData object. In order to override that default content we need to do two things.

First create a custom layout for the content.

Secondly we need to tell the MapsPLUS plugin where to look for that layout. We do this by specifying the ID of the layout in the mapConfig object.

The MapsPLUS plugin will clone (copy) everything inside the target and place it inside the dialog window. You can then use JavaScript to map data to any object you like.

Customizing Dialog Content

In this example we’re making use of the dialog “open” event function.

var lotData = $(this).dialog(‘option’,’lotData’); Each dialog object has the option “lotData” set with all the lot data available.

Automatic Mapping of Data in Custom Layouts

There also exists an automatic method for mapping lotData to the elements within your custom dialog window layout. To populate an element use a class name that matches the data set, eg:

<span class="Builder-name"></span>

class=”Builder-name” matches the structure of the data returned by the API. Following the convention Object-element such that Builder-name is the “Builder” object and the “name” element.

Examples:

Address-street would give the lot’s street address eg. “123 Main Street”

LotStatus-lot_statuses-title will populate the span with the current lot status. eg “Sold”

See “Dialog Events & Lot Data” above for an example of the lotData structure and all elements available for automatic mapping.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want Us to Do It For You?

Contact Us

We are map designers, artists & developers. We built MapsPLUS to help you publish interactive maps more quickly and easily, but if you'd like to collaborate with us - we'd love to help you. We've designed maps and created interactive mapping tools for clients over the past 2 decades. If you'd like to know more about our firm - we are E2 + Associates.

Get in Touch

The best way to contact us is either by email, through our contact form or by grabbing the phone and calling Sean Young at 1 (888) 443-7446.

Service

STYLE SWITCHER

Make MapsPLUS your own. Change the color of the website below or visit our style gallery or live showcase to explore the possibilities.