JSPM – logicify-gmap@0.1.11

Package Exports

logicify-gmap

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (logicify-gmap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

What is this repository for?

This product is a wrapper for google maps api based on angular.
Stable Version 0.1.10

For developers

node.js and npm

 npm install grunt-cli -g
 npm install bower -g
 npm install
 grunt logicifyGmap

Usage

JSFiddle example

example

bower install logicify-gmap

npm install logicify-gmap

At first you need include google api reference into your html file.

Something like that:

<script src="https://maps.googleapis.com/maps/api/js?v=3.20"></script>

You need to be sure that this api is loaded before angular.js

Inject module into your angular app

var app = angular.module('myApp', [ "LogicifyGMap" ]);

Inject map (directive)

place it in your html file

<logicify-gmap center="gmOpts.center"
               gm-options="gmOpts"
               gm-ready="ready"
               css-options="cssOpts">
</logicify-gmap>

center - center map (is LatLng object from google api);
gm-options - (javascript object) is google maps options google api
gm-ready - (function) callback function fires when directive is rendered and passes on gmap Object.

From controller

var app = angular.module('myApp', [ "LogicifyGMap" ]);
app.controller('myCtrl',['$scope',function($scope){
    $scope.cssOpts = {width: '50%', height: '50%', 'min-width': '400px', 'min-height': '200px'};
    $scope.gmOpts = {zoom: 10, center: new google.maps.LatLng(-1, 1)};
    $scope.ready = function(gmap){
        $scope.gmap = gmap; //it's google maps object (not wrapped)
    };
}]);

css-options - is javascript object is needed for injecting css into map element

Custom X (close) button for info window.

     .gm-style-iw+div{
         display:none
         }

where .gm-style-iw is a class of container element, and next div is close button!

Inject map controls (directive)

html

<logicify-gmap center="gmOpts.center"
               gm-options="gmOpts"
               gm-ready="ready"
               css-options="cssOpts">
    <logicify-gmap-control
    control-position="position"
    control-index="1"
    events="controlEvents">
        <button>Push me</button>
    </logicify-gmap-control>
</logicify-gmap>

script

$scope.index = 1;
$scope.position = google.maps.ControlPosition.BOTTOM_LEFT;
$scope.controlEvents = {
                click: function (event) {
                }
            };

controlEvents - it's just a javascript object. Each key should be an event name ('click','mouseover'...) and value is a callback function.

Info window

It's angular supported. So you can use angular inside info window template (directives, scope, controller...).

Inject 'InfoWindow' service from 'logicify-gmap' api.

module.controller('myCtrl', ['$scope', '$timeout', 'InfoWindow', function ($scope, $timeout, InfoWindow) {
            $scope.markers = [];
            $scope.infoWindowName = 'hello native you!';
            $scope.cssOpts = {width: '50%', height: '50%', 'min-width': '400px', 'min-height': '200px'};
            $scope.gmOpts = {zoom: 10, center: new google.maps.LatLng(-1, 1)};
            $scope.closeInfoWindow = function (infowindow) {
                infowindow.close(true); //destroy scope and info window element
                //or
                //infowindow.close();  //just close info window
            };
            $scope.ready = function (map) {
                var infowindow = new InfoWindow({templateUrl: 'template.html'}); //it's not infowindow now. (object like "javascript promise", but not a promise)
                function attach(marker) {
                    google.maps.event.addListener(marker, 'click', function (markerObj) { //on marker click
                        infowindow.$ready(function (wnd) { // pass infowindow object
                            wnd.open(map, marker); //open infowindow
                        });
                    });
                }

                //loop all markers
                for (var i = 10; i < 15; i++) {
                    var pos = new google.maps.LatLng(-1 + 1 / i, 1 + 1 / i);//random position
                    var marker = new google.maps.Marker({    //create new marker
                        id: 'marker_' + i,
                        name: 'is_' + i,
                        position: pos,
                        map: map
                    });
                    $scope.markers.push(marker);
                    attach(marker);//attach listener
                }
            };

        }]);

template.html

<div>
    <label>{{infoWindowName}} {{$infoWND.anchor.id}}</label>
    <button ng-click="closeInfoWindow($infoWND)">Close me</button>
</div>

when you try to create info window object

var infowindow = new InfoWindow({templateUrl: 'template.html'});

It's not an infowindow yet. Because rendering template and apply scope digest takes some time.

 infowindow.$ready(function (wnd) {
                            //do something with 'wnd'
                        });

And now 'wnd' is info window object.

you can use $infoWND object in the template.html. $infoWND.anchor is a marker!

Many info windows in one time:

$scope.ready = function (map) {

                function attach(marker) {
                    var infowindow = new InfoWindow({templateUrl: 'template.html'}); //create new infowindow for each marker
                    google.maps.event.addListener(marker, 'click', function (markerObj) { //on marker click
                        infowindow.$ready(function (wnd) { // pass infowindow object
                            wnd.open(map, marker); //open infowindow
                        });
                    });
                }

                //loop all markers
                for (var i = 10; i < 15; i++) {
                    var pos = new google.maps.LatLng(-1 + 1 / i, 1 + 1 / i);//random position
                    var marker = new google.maps.Marker({    //create new marker
                        id: 'marker_' + i,
                        name: 'is_' + i,
                        position: pos,
                        map: map
                    });
                    $scope.markers.push(marker);
                    attach(marker);//attach listener
                }
            };

If you want more than one info window on google map, you just need create it for each marker!

var infowindow = new InfoWindow({templateUrl: 'template.html'}); //in the loop

Closing info window can be done in two ways:

Destroy scope and element. Please careful with this param, because to render it again - takes more time then just apply scope digest.

infowindow.close(true)

Just hide window (proper way).

infowindow.close();

XML overlays support

jsfiddle example There is a way to display xml overlays on google map using "xml-overlays" directive. Note that we are using geoxml3 library to parse xml files. XML files can be: .zip, .kmz, .kml, or just a string.

Basic usage:

HTML

<div ng-controller="TestController">
    <logicify-gmap
            center="gmOpts.center"
            gm-options="gmOpts"
            gm-ready="ready"
            css-options="cssOpts">
        <logicify-gmap-control
                control-position="position"
                control-index="1"
                events="controlEvents">
            <button>Push me</button>
        </logicify-gmap-control>
        <xml-overlays
                kml-collection="kmlCollection"
                gmap-events="kmlEvents">
        </xml-overlays>
    </logicify-gmap>
</div>

JS

app.controller('TestController', ['$scope', '$timeout', 'InfoWindow', function ($scope, $timeout, InfoWindow) {
        $scope.markers = [];
        $scope.controlEvents = {
            click: function (event) {
                $scope.kmlCollection = [
                    {url: 'tristate_area.kml'}
                ];
            }
        };
        $scope.cssOpts = {
            width: '80%',
            height: '60%',
            'min-width': '400px',
            'min-height': '200px'
        };
        $scope.gmOpts = {
            zoom: 16,
            center: new google.maps.LatLng(-1, 1)
        };
        $scope.kmlCollection = [
            {url: 'cta.kml'}
        ];
        $timeout(function () {
            $scope.kmlCollection.push({url: 'tristate_area.kml'});
        }, 3000);
        $timeout(function () {
            $scope.kmlCollection.pop();
        }, 6000);
        $timeout(function () {
            $scope.kmlCollection = [{url: 'tristate_area.kml'},{url: 'cta.kml'}];
        }, 9000);
        $scope.kmlEvents = {};
        $scope.position = google.maps.ControlPosition.BOTTOM_LEFT;
        $scope.index = 1;
    }]);

Events

 <xml-overlays
                kml-collection="kmlCollection"
                gmap-events="kmlEvents">
 </xml-overlays>

var kmlEvents = {
    onAfterParse:function(doc){
        //doc - array with documents
    },
    onAfterParseFailed:function(err){

    },
    onAfterCreateGroundOverlay:function(groundOverlayGMapMVCObject){
    },
    onAfterCreatePolygon:function(polygonMVCObject,placemark){
        //all mvc objects has methods "get" & "set"
    },
    onAfterCreatePolyLine:function(polyLineMVCObject,placemark){

    }
};

Also you can include all events from geoxml3 lib

Options:

all options described on geoxml3 repository There is one more option fit-bounds-afterAll

<xml-overlays
                kml-collection="kmlCollection"
                gmap-events="kmlEvents"
                fit-bounds-afterAll="false">
</xml-overlays>

This option is true by default. When you are disabling this option the last layer will be displayed on the map. ] To view all layers you need modify zoom and center of the map by mouse. If this options is enabled, then all layers will be displayed on the map, and you don't need to scroll and dragging the map to view all layers

Progress callback

Html example

<xml-overlays
                kml-collection="kmlCollection"
                gmap-events="kmlEvents"
                on-progress="callback">
</xml-overlays>

Progress object structure

callback = function(progress){
    progress = {
            done: Integer,
            errors: Integer,
            total: Integer
        };
}

Progress callback calls each time when xml file downloaded and parsed (or parsing is failed).

Infowindow

You can create and inject infowindow to your overlays. But if you want to be able to access overlay MVC object from infowindow scope then you need just add property to infowindow object.

 $scope.overlaysInfowindow = new InfoWindow({templateUrl: 'infowindow.html'});
 $scope.overlaysInfowindow.$ready(overlayInfowindowReady); //w8 for downloading template
 function overlayInfowindowReady(wnd) {
     wnd.$onOpen = function (gObj) {   //method "open" of infowindow calls by geoxml3 parser, so you don't need call "infowindow.open(map,marker)" like for markers
        wnd.$scope.mvcObject = gObj;   //when infowindow opened then calls "$onOpen" callback with google mvc object
        gObj.setDraggable(true);
   };
 }

HTML

<div class="infowindow">
    {{mvcObject.title}}
    {{mvcObject.get('fillColor')}}
    ...etc
</div>

see more information about google mvc object