Google's tile layers for ember-leaflet
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.npmignore
.travis.yml
.watchmanconfig
CHANGELOG
LICENSE.md
README.md
bower.json
ember-cli-build.js
index.js
package.json
publish.sh
testem.js
yarn.lock

README.md

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.

Running

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.