Skip to content

Map Package Usage

Jump to bottom
Davis edited this page Jun 27, 2024 · 6 revisions

Home / Packages / Map

Table of Contents

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 1',
      options: {
        animation: 2,
        click: {
          action: 'function',
          function: (marker, markerSetting) => {
            console.log('Marker 1 was clicked~', marker)
          }
        }
      }
    },
    {
      position: {lat: 37.2757271, lng: -122.121460},
      title: 'Marker Title 2',
      label: {
        // The text to be displayed in the label
        text: '2',
        // The color of the label text
        color: '#333'
      },
      options: {
        click: {
          action: 'open',
          content: '<span>Marker 2 popup contents</span>'
        }
      }
    }
  ]
</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.
default-icon string Set a default marker icon, providing a url path to the image.
default-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.
default-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
default-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

MarkerSettings 

 TODO

LatLngLiteral 

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

 TODO

Examples 

 TODO

Stratus

Packages

Clone this wiki locally