angular-ui-map

WebJar for angular-ui-map

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-ui-map
Last Version

Last Version

0.5.0
Release Date

Release Date

Type

Type

jar
Description

Description

angular-ui-map
WebJar for angular-ui-map
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/angular-ui/ui-map

Download angular-ui-map

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-map/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-ui-map</artifactId>
    <version>0.5.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-map/
implementation 'org.webjars.bower:angular-ui-map:0.5.0'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-map/
implementation ("org.webjars.bower:angular-ui-map:0.5.0")
'org.webjars.bower:angular-ui-map:jar:0.5.0'
<dependency org="org.webjars.bower" name="angular-ui-map" rev="0.5.0">
  <artifact name="angular-ui-map" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-ui-map', version='0.5.0')
)
libraryDependencies += "org.webjars.bower" % "angular-ui-map" % "0.5.0"
[org.webjars.bower/angular-ui-map "0.5.0"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bower : angular jar [1,2)
org.webjars.bower : angular-ui-utils jar [0,1)

Project Modules

There are no modules declared in this project.

UI.Map Build Status

This directive allows you to add Google Maps Javascript API elements.

Requirements

Usage

You can get it from Bower

bower install angular-ui-map

This will copy the UI.Map files into a bower_components folder, along with its dependencies. Load the script files in your application:

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-event/dist/event.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-map/src/map.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>

Make sure to listen to the callback parameter when loading the Google Maps API ! The API must be fully loaded before this module ! Here we name this callback onGoogleReady. To load your angular app after the Google Maps API you can start it with angular.bootstrap.

function onGoogleReady() {
  angular.bootstrap(document.getElementById("map"), ['app.ui-map']);
}

Add the UI.Map module as a dependency to your application module :

var myAppModule = angular.module('app.ui-map', ['ui.map']);

Finally, add the directive to your html:

<section id="map" ng-controller="MapCtrl" >
  <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</section>

Note that myMap will be a google.maps.Map class, and mapOptions a google.maps.MapOptions object (see below).

To see something it's better to add some CSS, like

.map-canvas { height: 400px; }

Options

google.maps.MapOptions object can be passed through the main directive attributeui-map.

myAppModule.controller('MapCtrl', ['$scope', function ($scope) {
    $scope.mapOptions = {
      center: new google.maps.LatLng(35.784, -78.670),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  }]);

UI.Event

UI.Event allows you to specify custom behavior over user events. You just need to prefix the official event by map- to bind a callback to it.

For example, the click or zoom_changed event of the google.maps.Map class can be used through the UI.Event object keys map-click and map-zoom_changed :

<section id="map" ng-controller="MapCtrl" >
  <div  ui-map="myMap"ui-options="mapOptions" class="map-canvas"
        ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
  ></div>
</section>

Testing

We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install -g grunt-cli
npm install && bower install
grunt

The karma task will try to open Firefox and Chrome as browser in which to run the tests. Make sure this is available or change the configuration in test\karma.conf.js

Grunt Serve

We have one task to serve them all !

grunt serve

It's equal to run separately:

  • grunt connect:server : giving you a development server at http://127.0.0.1:8000/.

  • grunt karma:server : giving you a Karma server to run tests (at http://localhost:9876/ by default). You can force a test on this server with grunt karma:unit:run.

  • grunt watch : will automatically test your code and build your demo. You can demo generation with grunt build:gh-pages.

org.webjars.bower

AngularUI

Versions

Version
0.5.0