Map Not Loading


#1

My Map isn't loading even though I felt I entered all the information correctly and have all the necessary files.

Index.html ( i realize the "!doctype html" and "html" tags are missing, I took those out because they kept rendering the html ) :

  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css"     rel="stylesheet">
    <link href="css/main.css" rel="stylesheet" />
    <link href="css/leaflet.css" rel="stylesheet" />
    <script src="js/vendor/angular-leaflet-directive.min.js"></script>
    <script src="js/vendor/angular.min.js"></script>
    <script src="js/vendor/leaflet.js"></script>
</head>
<body ng-app="NearMeApp">
<div class="header">
  <div class="container-fluid">
    <h1 class="pull-left">NearMe</h1>
  </div>
</div>

<div class="main" ng-controller="MainController">
  <div class="container-fluid" id="map-canvas">
    <leaflet> </leaflet>
  </div>
</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>

<!-- Directives -->


<!-- Services -->


</body>

app.js:

var app = angular.module('NearMeApp', ['leaflet-directive']);

MainController.js:

app.controller('MainController', ['$scope', function($scope){

}]);

And I copied the rest of the code from the specified links, but I still get nothing to show up on local host 8000


#2

Checking on Leaflet website, it seems the controller for the basic map view needs to look like this:

app.controller("MainController", [ '$scope', function($scope) {
angular.extend($scope, {
defaults: {
scrollWheelZoom: false
}
});
}]);

After I edited the controller to be the same as the above example, I managed to get the map to show. Might be Codecademy forgot to mention that detail


#3

Hello,

I checked for your html and it seems that you are calling the javascript files in the wrong order. You are calling leaflet js file before the angular:

Fixed code below:

<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/leaflet.js"></script>
<script src="js/vendor/angular-leaflet-directive.min.js"></script>

#4

The issue is in index.html. As ajax mentioned, order matters.

Incorrect:

<script src="js/vendor/angular-leaflet-directive.min.js"></script>
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/leaflet.js"></script>

Correct:

<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/leaflet.js"></script>
<script src="js/vendor/angular-leaflet-directive.min.js"></script>

Also, if you use the console in Chrome, you get the following error which is a good tip off as to what is wrong:

Uncaught ReferenceError: angular is not defined angular-leaflet-directive.min.js:31