Adds Leaflet.GridLayer.GoogleMutant functionality into Ember-Leaflet. Also, addon supports google map layers (TrafficLayer, TransitLayer, BicyclingLayer, KmlLayer).
- 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/[email protected]/dist/es6-promise.min.js"></script>
<script>ES6Promise.polyfill();</script>This will polyfill in Javascript Promises for IE.
ember install ember-leaflet-google-mutant-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 = {
// ...
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
},
// ...
};typegoogle map type id, defaultroadmapisTrafficOnshow traffic layer, defaultfalseisTransitOnshow transit layer, defaultfalseisBicyclingOnshow bicycling layer, defaultfalseisKmlOnshow KmlLayer (geo rss) layer, defaultfalsekmlLayerOptionshash with KmlLayer options (url)opacitymap opacity, default1maxZoomdefault18maxNativeZoomdefault21minZoomdefault0continuousWorlddefaultfalsenoWrapdefaultfalsestylescustom map styling
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.
ember server- Visit your app at http://localhost:4200.
npm test(Runsember try:testallto test your addon against multiple Ember versions)ember testember test --server
ember build
For more information on using ember-cli, visit http://ember-cli.com/.