Idx Map Widget

Home / Packages / Idx / Usage

---

Idx Map Widget

We recommend appending `data-` to any Stratus HTML data attributes to be most compatible with all browsers. e.g.: ng-model='model' could be written as data-ng-model='model'. For shorthand and readability sake, we will omit appending this from data attributes in this informational.

All widgets are actively under heavy development and options/usages are subject to possible changes.

---

Usage

<stratus-idx-map
   height="500px"
   width="100%"
></stratus-idx-map>

<stratus-idx-map
   list-id="idx_property_list_9"
   full-height-minus-elements='["#header-container", ".sf-toolbarreset"]'
   google-maps-key="XxXxXxXxXxXx"
></stratus-idx-map>

Widget Parameters

Parameter	Type	Default	Description
list-id	string		Id of Idx List widget to attach to and render the available collection from. The counterpart List widget's `element-id` must be defined and the same as this `list-id` (See Property List). Multiple Map widgets may attach to the same List widget but, this Map widget may only display a single collection at this time.
google-maps-key	string		Client will need to provide a Google Maps Api key with Javascript access. Without a provided key, the map will default into 'Development Mode' and be known to the user that it's just for testing right now. See Google Documentation
map-type	string	'roadmap'	Set type of tiles displayed on the Map. Options: 'roadmap', 'hybrid', 'satellite', 'terrain'
height	string		Set a height for the displayed map. Suggested to pixel sizes such as `500px`. If not set, map relies on default css auto loaded.
width	string		Set a width for the displayed map. Suggested to sizes such as `100%`. If not set, map relies on default css auto loaded.
full-height	boolean	false	Set the map to retain 100% height of parent element (window/document by default)
full-height-minus-elements	string[]		Set the map to retain 100% height of parent element (window/document by default). Also removes from itself the height of specified surrounding elements to maintain a proper. E.g.: `["#header-container",]` to have a 100% page height map minus the height of a header and toolbar.
reference-parent	string	'document'	For use with automatic sizing, what element should be referred to when process the full-height of a page. Possible options being `document`, `window`, and any document query selector, e.g. `#body-container`
zoom	number	18	Set the zoom level that the Map starts at.
zoom-control	boolean	true	Set to display the Zoom controls on the map.
scrollwheel	boolean	false	Set if the user can adjust the Map zoom level via the mouse scrollwheel.
marker-click-scroll	boolean	false	Upon clicking a marker, attempt to scroll to the listing on the page.
marker-click-highlight	boolean	false	Upon clicking a marker, attempt to highlight the lighting on the page momentarily.
marker-price	boolean	false	Enables Property Prices to be shown on the page atop markers.
marker-icon	string		Set a default marker icon, providing a url path to the image.
marker-icon-hover	string		Set a default marker icon on mouse hover-over, providing a url path to the image. By default there is none. This is currently buggy if the mouse is moving too fast.
marker-icon-label-origin-x	number		When supplying a custom icon with a label, sets a position of position of the text, starting left on the x axis
marker-icon-label-origin-y	number		When supplying a custom icon with a label, sets a position of position of the text, starting top on the y axis
template	string	'map'	The file name in which is loaded for the view of the widget. The name will automatically be appended with '.component.min.html'. The default is 'map.component.html'. TODO: Will need to allow setting a custom path of views outside the library directory.