Leaflet angular directive blank map

Question

I'm following the basic tutorial for Leaflet-angular-directive. I am able to see the leaflet map component display in the browser, but the map is blank. The example:

<html ng-app="demoapp">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
    <script src="../dist/angular-leaflet-directive.min.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <script>
        var app = angular.module("demoapp", ['leaflet-directive']);
        app.controller("BasicFirstController", [ "$scope", function($scope) {
            // Nothing here!
        }]);
    </script>
  </head>

  <body ng-controller="BasicFirstController">
    <leaflet width="100%" height="480px"></leaflet>
    <h1>First steps, basic example</h1>
  </body>
</html>

I don't see where the API key or tile urls is passed, or is it not required?

Thanks!

score 0 · Answer 1 · answered Feb 14 '16 at 14:08

You code is ok. It works form me with these dependencies ( Angular 1.4.9 ) :

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="angularLealeft/angular-leaflet-directive.min.js"></script>

There is no need for API key.

Leaflet angular directive blank map

1 Answers1