ember-leaflet-google-tile-layer
v0.0.3
Published
The default blueprint for ember-cli addons.
Downloads
20
Maintainers
miguelcobainReadme
ember-leaflet-google-tile-layer 
This addon extends ember-leaflet 2.0. It adds a {{google-tile-layer}} component that displays google tile layers.
This uses this leaflet extension to accomplish that. It also automatically adds google maps script to your <head> (see Installation section below).
Note that this approach isn't using google tile layers directly, as that violates google's terms. Instead, it wraps google maps API, and proxies leaflet inputs to it. At any rate, this addon just wraps @shramov's implementation. It has a very reasonable performance, but only use this if you really need Google's tiles.
Usage
{{#leaflet-map lat=51.512983 lng=-0.138289 zoom=12}}
{{google-tile-layer type="ROADMAP" opacity=0.9}}
{{/leaflet-map}}Allowed types are SATELLITE, ROADMAP, HYBRID and TERRAIN.
Only bound property is opacity. Supports onLoad action that corresponds to tilesloaded google maps event.
Installation
Run:
ember install ember-leaflet-google-tile-layerGoogle'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 = {
// ...
googleLeaflet: {
apiKey: 'API-KEY-HERE'
},
// ...
};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 = {
// ...
googleLeaflet: {
include: false
},
// ...
};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
ember server- Visit your app at http://localhost:4200.
Running Tests
npm test(Runsember try:testallto test your addon against multiple Ember versions)ember testember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.