ember-cli-g-maps
Advanced tools
An Ember CLI Addon for map driven applications. Built with GMaps, an open source Google Maps project. Currently in Beta.
Ember CLI G-Maps is a Google Map component for map driven applications.
A map driven application responds to map interactions with fresh data. What this means for the developer is that you will need consistent access to the state of the map as well as intuitive ways to efficiently render large amounts of data.
Ember-cli-g-maps seeks to give you the information you need, when you need it, so that you can make the necessary requests and render the most relevant map data for your users.
Built with the GMaps-For-Apps.js library, a fork of GMaps.
Requires: Ember-CLI >= 1.13.7 & Ember > 1.13.6
In terminal:
ember install ember-cli-g-maps
This will install the ember-cli-g-maps node module and the gmaps bower component. The g-maps component will be available to your application, however you need to update your environment configuration to avoid violating the content security policy.
Update your config/environment.js Content Security Policy to contain:
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' *.googleapis.com maps.gstatic.com",
'font-src': "'self' fonts.gstatic.com",
'connect-src': "'self' maps.gstatic.com",
'img-src': "'self' *.googleapis.com maps.gstatic.com csi.gstatic.com",
'style-src': "'self' 'unsafe-inline' fonts.googleapis.com maps.gstatic.com"
};
You wont see your map unless it has height. In app/styles/app.css:
.ember-cli-g-map {
height: 300px;
}
Simplest Possible G-Map
In your route:
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 32.75494243654723,
lng: -86.8359375,
zoom: 4
});
}
});
In your template:
{{g-maps name="my-map" lat=lat lng=lng zoom=zoom}}
Add Markers
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 32.75494243654723,
lng: -86.8359375,
zoom: 4,
// Must be an Ember Array
markers: Ember.A([
{
id: 'jdlkfajs22', // Recommended
lat: 33.516674497188255, // Required
lng: -86.80091857910156, // Required
infoWindow: {
content: '<p>Birmingham</p>',
visible: true
},
click: function(e, marker) {}
}
]);
});
}
});
{{g-maps ... markers=markers}}
Add Polygons
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 32.75494243654723,
lng: -86.8359375,
zoom: 4,
// Must be an Ember Array
polygons: Ember.A([
{
id: 'lka234klafj23', // Recommended
paths: [ // Required
[35.0041, -88.1955], // Lat, Lng
[31.0023, -84.9944], // Lat, Lng
[30.1546, -88.3864], // Lat, Lng
[34.9107, -88.1461] // Lat, Lng
],
click: function(e, polygon) {}
}
])
});
}
});
{{g-maps ... polygons=polygons}}
Add Polylines
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 32.75494243654723,
lng: -86.8359375,
zoom: 4,
// Must be an Ember Array
polylines: Ember.A([
{
id: 'lka234klafj23', // Recommended
strokeColor: 'blue',
strokeOpacity: 1,
strokeWeight: 6,
path: [ // Required
[34.220, -100.7], // Lat, Lng
[33.783, -92.81], // Lat, Lng
[35.946, -94.83], // Lat, Lng
[32.458, -95.71], // Lat, Lng
[33.783, -92.85] // Lat, Lng
],
click: function(e, polyline) {}
}
])
});
}
});
{{g-maps ... polylines=polylines}}
Add Circles
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 32.75494243654723,
lng: -86.8359375,
zoom: 4,
// Must be an Ember Array
circles: Ember.A([
{
id: 'lfkjasd23faj2f31', // Recommended
lat: 32.75494243654723, // Required
lng: -86.8359375, // Required
radius: 500000 // Not Required, but you'll probaby want to see it
click: function(e, circle) {}
}
])
});
}
});
{{g-maps ... circles=circles}}
Add Rectangles
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 32.75494243654723,
lng: -86.8359375,
zoom: 4,
// Must be an Ember Array
rectangles: Ember.A([
{
id: 'uaafkjkl2334lkadfj', // Recommended
bounds: [
[40.300476079749465, -102.3046875], // lat, lng
[26.258936094468414, -73.828125] // lat, lng
],
strokeColor: 'green',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: 'green',
fillOpacity: 0.2,
click: function(e, rectangle) {}
}
])
});
}
});
{{g-maps ... rectangles=rectangles}}
Add G-Map Component Events
export default Ember.Route.extend({
actions: {
onMapEvent: function(e) {
console.info('Click coordinate',
e.latLng.A, // Latitude
e.latLng.F // Longitude
);
console.info('Map boundaries',
e.bounds[0], // Top left map coordinate
e.bounds[1], // Top right map coordinate
e.bounds[2], // Bottom left map coordinate
e.bounds[3] // Bottom right map coordinate
);
console.info('Map\'s center',
this.controller.lat,
this.controller.lng
);
e.mapIdle.then(function() { // Promise
console.log('maps done loading tiles and user is not interacting with map');
});
e.mapTilesLoaded.then(function() { // Promise
console.log('Map tiles have finished loading');
});
}
}
});
{{g-maps ... click="onMapClick"}}
Set Map Type
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 32.75494243654723,
lng: -86.8359375,
mapType: 'satellite' // Accepts 'roadmap', 'satellite', 'hybrid', or 'terrain'
});
}
});
{{g-maps ... mapType=mapType}}
Set Draggable
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 32.75494243654723,
lng: -86.8359375,
draggable: false // default = true
});
}
});
{{g-maps ... draggable=draggable}}
Wait For Map To Load
export default Ember.Route.extend({
// Inject the gMap service
gMap: Ember.inject.service(),
setupController: function(controller) {
// Schedule after map rendering
Ember.run.scheduleOnce('afterRender', this, function() {
// Get the service and select desired G-Map
const mapUtil = this.get('gMap').maps.select('my-map');
// onLoad Promise resolved
mapUtil.onLoad.then(function() {
console.log('my-map has finished loading!');
});
});
}
});
{{g-maps name="my-map" ...}}
{{g-maps
click="myClickAction"
bounds_changed="myBounds_changedAction"
center_changed="myCenter_changedAction"
dblclick="myDblclickAction"
drag="myDragAction"
dragend="myDragendAction"
dragstart="myDragstartAction"
heading_changed="myHeading_changedAction"
idle="myIdleAction"
maptypeid_changed="myMaptypeid_changedAction"
mousemove="myMousemoveAction"
mouseout="myMouseoutAction"
mouseover="myMouseoverAction"
projection_changed="myProjection_changedAction"
resize="myResizeAction"
rightclick="myRightclickAction"
tilesloaded="myTilesloadedAction"
tilt_changed="myTilt_changedAction"
zoom_changed="myZoom_changedAction"}}
Repurposed from the Google Maps Drawing Manager, Selections allow you to draw shapes on your map instance. This allows users to select areas on the map to interact with. Supported selection types include:
Selections Requirements
Selections requires the Google Maps Drawing library. To add this library in:
config/environment.js add:
ENV.googleMap = {
libraries: ['drawing']
};
Main Configuration Property
Your g-maps component requires a truthy selections property to be set in order to instantiate. The selections object may contain the following:
Additional Configuration Properties
Actions Actions are fired when a selections are completed. Available selections actions are:
Selections Example
{{g-maps
...
selections=selections
selectionsDelay=delay
selectionsMode=activeMode
selectionsModes=supportedModes
selectionsPosition=position
selectionsMarker="onMarkerSelect"
selectionsCircle="onCircleSelect"
selectionsRectangle="onRectangleSelect"
selectionsPolygon="onPolygonSelect"
selectionsPolyline="onPolylineSelect"}}
Heatmap is an abstraction of the Google Maps Heatmap Layer.
Heatmap Requirements
Selections requires the Google Maps Visualization library. To add this library in:
config/environment.js add:
ENV.googleMap = {
libraries: ['visualization']
};
Main Configuration Property
In config/environment.js
ENV.googleMap = {
// your configuration goes in here
libraries: ['places', 'geometry'], // milage varies based on g-maps supported features
version: '3', // not recommended
apiKey: 'your-unique-google-map-api-key'
}
The MIT License (MIT)
Copyright (c) 2015 Matt Jensen. github.com/Matt-Jensen
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
FAQs
An Ember CLI Addon for map driven applications
We found that ember-cli-g-maps demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."