Ember-bing-maps NPM

ember-bing-maps

Installation

ember install ember-bing-maps

Usage

{{bing-map 
  options=options
  pins=pins
  eventHandlers=eventHandlers
  infoBoxes=infoBoxes
}}

options

Generally follows bing maps config with some exceptions. All booleans and numbers are passed through mostly untouched. Enums and Objects are constructed inside ember-bing-maps to avoid the race condition of async loading and the global Microsoft.Maps lib.

Please see BingMaps docs for more details on options MapOptions ViewOptions

key	type	values	default value	description
birdseyeFallback	object	-	-	Used in case the birdseye view is not available to map's location
birdseyeFallback .type	string	See mapType below	`'aerial'`	Fallback to different map type
birdseyeFallback .zoom	object	`1-19`	`15`	Zoom level to fallback onto
birdseyeFallback .navBarMode	string	`'minified', 'compact', 'default'`	`'compact'`	Menu type to fallback onto
birdseyeFallback .navBarOrientation	string	`'horizontal', 'vertical'`	`'vertical'`	Menu orietation to fallback onto
defaultCenter	object	-	A rectangle around the USA	Used to construct a LocationRect in case no pins are configured
enableClickableLogo	boolean	`true/false`	`true`	Makes bing logo not clickable
mapType	string	`'aerial', 'road', 'birdseye', ...`	`'road'`	The name of the map type to load with. See MapTypeId
mapTypeHover	boolean	`true/false`	`false`	add mouse over menu aka disableMapTypeSelectorMouseOver
navBarMode	string	`'minified', 'compact', 'default'`	`'minified'`	Menu mode, NOTE: some modes are buggy in different mapTypes..
navBarOrientation	string	`'horizontal', 'vertical'`	`'vertical'`	Used in case the birdseye view is not available to map's location
padding	integer	*	20	Amount of pixels to pad around the bounds of the map view
showMapTypeSelector	boolean	`true/false`	`true`	Show map type selector in menu
showTrafficButton	boolean	`true/false`	`false`	Show traffic view button
supportedMapTypes	array of mapType strings	See MapTypeId	`['road', 'aerial', 'streetside', 'birdseye']`	Add more map types to the map type selector
zoom	integer	1-19	10	Maps starting zoom position, higher => more zoom

pins

An array of coordinates with Options

Example:

[{
  latitude: 47.603791,
  longitude:  -122.334055,
  options: {
    icon: '/assets/img/location-pin.png',
    // This is used for eventHandlerss.pins, drop in any metadata needed for event callback.
    metadata: {
      title: 'mySpecialTitle'
    }
  }
}]

eventHandlers

An object of event handlers to be added (for now just on pins). Arguments passed to handlers are (event, infoBox, map). This allows for manipulation to the map and infoBox at the user's discretion. Note the infoBox is shared across the map

List of supported events:

PushPin

Example:

eventHandlers: {
  pin: {
    click: (e, bingMapCtx) => {
      let { map, infoBox, customInfoBoxes } = getProperties(bingMapCtx, 'map', 'infoBox', 'customInfoBoxes');
      if (e.metadata.title === 'mySpecialPin') {
        let mapType = bingMapCtx.Microsoft.getMapTypeId();
        if (mapType === bingMapCtx.Microsoft.Maps.MapTypeId.aerial) {
          // do something interesting?
        }
      }
    }
  }
}

infoBoxes

Used to generate specific custom infoBoxes. We take the infoBoxTemplate and replace the {description} with InfoBox Class InfoBox Options

Example:

[{
  location: {
    latitude: 37.905249, 
    longitude: -85.927439
  },
  options: {
    htmlContent: `
      <div class="ember-bing-maps-dialogue-box">
        'X marks the spot.'
      </div>`,
    closeDelayTime: 100
  }
}]