NearMe 1 Map not showing. PLEASE HELP!


#1

---index.html:

<link href="css/leaflet.css" rel="stylesheet"/>
<link href="css/main.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>


<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 center="mapCenter" markers="mapMarkers"></leaflet>
  </div>
</div>

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

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

<!-- Directives -->


<!-- Services -->


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

---MainController:
app.controller('MainController', ['$scope', function($scope){
$scope.mapCenter =
{
lat: 40.741934,
lng: -74.004897,
zoom: 17
};
$scope.mapMarkers =
[{
lat: 40.741389,
lng: -74.003056,
message: "111 Eighth Avenue"
},
{
lat: 40.7425,
lng: -74.006111,
message: "Chelsea Market"
}];
}]);

PS, the way the links and scripts are listed in the view is exactly how they are positioned in the folders and files.
Also, I just noticed that i forgot to add ng-app="NearMeApp" to the body. But even with that change, there is still no map showing. And when the instructions stated to "copy all the code" from the leaflet link, I copied the context inside, not the url link(just for clarification).
I even changed the browser url to http://localhost:8000 but still to no avail.


#2

The leaflet directive is not loaded, for one. Could you please post a link to the project so we can take a better look? Thanks.


#4

It's a course available only for the pro version
-- https://www.codecademy.com/en/courses/learn-angularjs/projects/angularjs_nearme-1?link_content_target=interstitial_project


#5

And what do you mean exactly by the leaflet directive not being loaded? The leaflet script is included within the head of the HTML and its contents are filled with the info given thru the link from the instructions.

I appreciate the feedback.


#6

I just figured it out. I moved the the anuglar-leaflet-directive script from the head and onto the body of the index where the directive comment below is listed.


#7

I noticed that space is empty, but until I saw the course couldn't be sure what goes there. Now I know.

What step are you on, right now?


#8

I finished, I was primarily confused why the map wouldn't show on the browser. Not sure, if you received my reply but I figured out the problem; I switched the location of the leaflet-directive script from the head to the body and that fixed the problem.


#9

It makes sense, since leaflet is a directive, after all. Remember, script in the HEAD loads and runs before the HTML content is loaded. Writing the script tag at the end of the BODY defers it until the content is in the DOM.


#10

You're right, that was an oversight on my part. Thanks for your time!


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.