Ember-leaflet-google-mutant-layer NPM

Ember-leaflet-google-mutant-layer

Adds Leaflet.GridLayer.GoogleMutant functionality into Ember-Leaflet. Also, addon supports google map layers (TrafficLayer, TransitLayer, BicyclingLayer, KmlLayer).

Compatibility

Leaflet.GridLayer.GoogleMutant plugin doesn't work on IE10 or lower, as that browser doesn't implement DOM mutation observers. Chrome, Firefox, Safari, IE11 and Edge are fine.
IE11 and browsers that don't support Promises need a polyfill in order to work. See example below.

Include the following before the script element that references the GoogleMutant javascript file.

<script src="https://unpkg.com/es6-promise@4.0.5/dist/es6-promise.min.js"></script>
<script>ES6Promise.polyfill();</script>

This will polyfill in Javascript Promises for IE.

Installation

ember install ember-leaflet-google-mutant-layer

Google's javascript library will be automatically referenced inside <head>. To use your API key, specify it in your application configuration in config/environment.js:

var ENV = {
  // ...
  googleMutantLeaflet: {
    apiKey: 'API-KEY-HERE'
  },
  // ...
};

You may specify required google libraries:

var ENV = {
  // ...
  googleMutantLeaflet: {
    libraries: ['geometry', ....]
  },
  // ...
};

If for some reason you want to prevent this addon from adding the script tag (e.g another library already does it), just specify:

var ENV = {
  // ...
  googleMutantLeaflet: {
    include: false
  },
  // ...
};

Usage

{{#leaflet-map lat=lat lng=lng zoom=zoom}}

  {{google-mutant-layer type="roadmap" isTrafficOn=true}}

{{/leaflet-map}}

Options

type google map type id, default roadmap
isTrafficOn show traffic layer, default false
isTransitOn show transit layer, default false
isBicyclingOn show bicycling layer, default false
isKmlOn show KmlLayer (geo rss) layer, default false
kmlLayerOptions hash with KmlLayer options (url)
opacity map opacity, default 1
maxZoom default 18
maxNativeZoom default 21
minZoom default 0
continuousWorld default false
noWrap default false
styles custom map styling

Content Security Policy

Google Maps uses many resources from Google's servers, so the URLs to them have to be white listed. You can set this by adding to the Content Security Policy defined in config/environment.js like so:

ENV.contentSecurityPolicy = {
  'default-src': "'none'",
  'script-src': "'self' 'unsafe-eval' *.googleapis.com",
  'font-src': "'self' fonts.gstatic.com",
  'img-src': "'self' data: *.googleapis.com maps.gstatic.com *.gstatic.com",
  'style-src': "'self' 'unsafe-inline' *.googleapis.com"
},

You can find out more information on the CSP addon page here.