why doesn't the geojson data show up on a leafletjs map when used via an angular directive?

I am trying to show some geoJSON data on a map, using leafletjs and an angular directive (none of the existing angular leafletjs directives out there do what I need to do later on, so I am starting writing my own, perhaps to incorporate later). The geoJSON does not show up for some reason.

I started off using a simple example I found at http://jsfiddle.net/8QHFe/127/.

I then took the example and wrapped it in an angular directive. The open street map layer shows up but the geojson layer does not appear anywhere! Apparently I am losing something when I add my angularjs directive but what? Or is it something else?

The code showing my attempt is at

http://plnkr.co/edit/pb7ZN5mIkZOU8AWTrtfY

<html ng-app="leafletExample">
<head>
    <title>Leaflet Example</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
</head>     
<body ng-controller="LeafletCtrl as ctrl"> 
<state-map id="haiti" style="width:450px;height:430px;"></state-map>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
        angular.module("leafletExample", [])
                .controller("LeafletCtrl", [function() {
                        this.msg = "puke";
                    }])
                .directive("stateMap", [function() {
                        return{
                            replace: false,
                            restrict: "E",
                            template: "<div></div>",
                            link: function(scope, element, attrs) {
                                var map = new L.map(element[0], {center: [18.53, -72.33], zoom: 12});
                                var osmCopyright = "Map data &copy; 2012 OpenStreetMap contributors";
                                var osmTile = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
                                var osmLayer = new L.TileLayer(osmTile, {minZoom: 8, maxZoom: 12, attribution: osmCopyright});
                                map.setView(new L.LatLng(18.53, -72.33), 9);
                                map.addLayer(osmLayer);

                                var haiti = {"type": "FeatureCollection", "features": [
                                        {"type": "Feature", "properties": {"name": "Haiti"}, "geometry": {"type": "Polygon", "coordinates": [[[-73.189791, 19.915684], [-72.579673, 19.871501], [-71.712361, 19.714456], [-71.624873, 19.169838], [-71.701303, 18.785417], [-71.945112, 18.6169], [-71.687738, 18.31666], [-71.708305, 18.044997], [-72.372476, 18.214961], [-72.844411, 18.145611], [-73.454555, 18.217906], [-73.922433, 18.030993], [-74.458034, 18.34255], [-74.369925, 18.664908], [-73.449542, 18.526053], [-72.694937, 18.445799], [-72.334882, 18.668422], [-72.79165, 19.101625], [-72.784105, 19.483591], [-73.415022, 19.639551], [-73.189791, 19.915684]]]}, "id": "HTI"}
                                    ]};
                                L.geoJson(haiti, {
                                    style: function(feature) {
                                        return {opacity: 0, fillOpacity: 0.5, fillColor: "#0f0"};
                                    }
                                }).addTo(map);
                            }
                        }
                    }]);
</script>
</body>
</html>

Solution

Primarily your issue is simple with the CSS. Try <state-map id="haiti" style="position:absolute;top:0;bottom:0;right:0;left:0;"></state-map>

Though you should consider the following: - Leaflet should be loaded before Angular.
- The replace property on the directive has been deprecated.
- Your link function is a bit crazy; consider using a controller.
- A simpler example