Leaflet map inside gridster item?

Question

Having the following code, how do I put a leaflet map inside a gridster item, and when I resize the gridster item the map resizes accordingly?

<div gridster="gridsterOpts">
    <ul id="gridster-ul">
        <li ng-repeat="widget in widgets" gridster-item size-x="widget.sizeX" size-y="widget.sizeY">
            <hexbin-graph ng-if="widget.type == 'hexbin'" resize="{{context.resize}}">
              <button onclick="generateData()">Generate Data</button>
            </hexbin-graph>
        </li>
    <ul>
</div>

Directive:

app.directive('hexbinGraph', function ($http, $rootScope) {

    var map = undefined;
    var center = [38.7, -9.1];


    return {
        restrict: 'E',
        scope: true,
        link: function($scope, $elem, $attr) {

                $attr.$observe('resize', function(newVal) {
                    console.log('resize');
                    createHexbinGraph();
                });

                if (map != undefined) { map.remove(); }

                var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

                map = new L.Map($elem[0], {layers: [osm], center: new L.LatLng(center[0], center[1]), zoom: 7});


                function createHexbinGraph () {

                    // $elem[0] = null;
                    //var map = undefined;

        //          if (map != undefined) { map.remove(); }

        //          var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                 //    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                 //    osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

                    // map = new L.Map($elem[0], {layers: [osm], center: new L.LatLng(center[0], center[1]), zoom: 7});

                    var options = {
                        radius : 12,
                        opacity: 0.5,
                        duration: 500,
                        lng: function(d){
                            return d[0];
                        },
                        lat: function(d){
                            return d[1];
                        },
                        value: function(d){
                            return d.length;
                        },
                        valueFloor: 0,
                        valueCeil: undefined
                    };

                    var hexLayer = L.hexbinLayer(options).addTo(map)
                    hexLayer.colorScale().range(['white', 'blue']);

                    var latFn = d3.random.normal(center[0], 1);
                    var longFn = d3.random.normal(center[1], 1);

                    var generateData = function(){
                        var data = [];
                        for(i=0; i<1000; i++){
                            data.push([longFn(),  latFn()]);
                        }
                        hexLayer.data(data);
                    };

                    // $elem[0] = map;
                    //map.remove();

                    //if (map != undefined) { map.remove(); }
                }
            }
        }
});

What is missing? Is there a way to define the leaflet map width and height? Thank you

Answer 1

You need to call L.Map.invalidateSize() whenever the size of the map container changes.