Map Package Usage

Home / Packages / Map

---

Table of Contents Map Widget Usage Map Widget Parameters MarkerSettings LatLngLiteral Examples

Map Widget Usage

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.

Stratus' Map Component was built as a wrapper for @angular/google-maps and the Google Maps Api.

---

Map

<sa-map
   google-maps-key="AIzaSyBAyMH-A99yD5fHQPz7uzqk8glNJYGEqus"
   callback="Stratus.Instances['someKnownWidget'].mapCallback"
   width="100%"
   height="250px"
   map-type="hybrid"
></sa-map>

<script type="text/javascript">
    window.markerVariables = [{
        position: {lat: 38.5777676, lng: -121.507200},
        title: 'Marker Title',
        options: {
            animation: 2
        },
        click: {
            action: 'function',
            function: (marker, markerSetting) => {
                console.log('Was clicked~', marker)
            }
        }
    }]},
    click: {
        action: 'function',
        function: (marker, markerSetting) => {
            console.log('Was clicked~', marker)
        }
    }
}]
</script>
<sa-map
   google-maps-key="AIzaSyBAyMH-A99yD5fHQPz7uzqk8glNJYGEqus"
   markers="markerVariables"
></sa-map>

Widget Parameters

Widget Parameters

Parameter	Type	Default	Description
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
callback	string function		A callback function to handle a self referenced object or a string to the variable holding the same function. This callback function will run as soon as the Map component as initialized and is ready to use, providing itself as a parameter allow an external force to control the map with any public methods that are available.
markers	string MarkerSettings[]		Recommend the above `callback` option instead due to performance. An array of MarkerSettings (described supplied Typings) or a string to the variable holding the same MarkerSettings[]. If provided with a string to a variable, the Map component will continue to watch the variable for any updates/changes and modify the Markers displayed on the Map accordingly.
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.
disable-double-click-zoom	boolean	false	Set if the user is prevent from zooming in when double clicking on a location.
center	LatLng LatLngLiteral		Set the coordinate where the map will initial center/focus on.

MarkerSettings

 TODO

LatLngLiteral

 E.g. `{lat: 37.4220656, lng: -122.0862784}`

 TODO

Examples

 TODO