Directive: bindToController

by rixlabs

HTML

<script src="https://code.angularjs.org/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<div ng-controller="MyController">
  <leaflet  lf-center="center" controls="controls" defaults="defaults"  markers="markers" width="100%" height="450px"></leaflet>
</div>

JavaScript

var app = angular.module('myApp', ['leaflet-directive'])
    .controller('MyController', ['$scope','$http', function ($scope, $http) {
    
    	var mainMarker = {
            lat: -27.0990815,
            lng: -52.6113324,
            focus: true,
            message: "AngelLira",
            draggable: false
        };
       angular.extend($scope, {
            center: {
                lat: -15.25241,
                lng: -52.21115241,
                zoom: 4
            },
            markers: {
                mainMarker: angular.copy(mainMarker)
            },
            position: {
                lat: -27.0990815,
                lng: -52.6113324
            },
            defaults: {
                tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                zoomControlPosition: 'topright',
                tileLayerOptions: {
                    opacity: 0.9,
                    detectRetina: true,
                    reuseTiles: true,
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">AngelLira</a>',
                },
                scrollWheelZoom: false,
                minZoom: 3,
                worldCopyJump: true
            }
        });
      
    
}]);