Map not showing - Service to fetch markers from Wikipedia

#1

Hello everyone!

I'm having trouble finishing the NearMe2, and in the end, I cannot get the map to show once I finish all the steps. Here is my code, hopefully someone will know how to solve this issue...

Is there something wrong with my code? Has anyone else been able to correctly finish this problem and how the map markers?

Thank you for your help!

index.html

<!doctype html>
<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.min.js"></script>
    <script src="js/vendor/leaflet.js"></script>
    <script src="js/vendor/angular-leaflet-directive.min.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 center="mapCenter" markers="mapMarkers"></leaflet> 
      </div>
    </div>

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

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

    <!-- Directives -->
    <script src="js/vendor/helpers.js"></script>

    <!-- Services -->
    <script src="js/services/places.js"></script>
    
  </body>
</html>

app.js

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

MainController.js

app.controller('MainController', ['$scope', 'places', function($scope, places) {
  
  $scope.apps = []
  
  $scope.mapCenter = {
    lat: 40.741934,
    lng: -74.004897,
    zoom: 17
  }
 
  function($scope, places) {
  places.success(function(data) {
    $scope.geodata = data;
    $scope.mapMarkers = geodataToMarkers($scope.geodata);
  });
    
}]);

Service places.js

app.factory('places', ['$http', function($http) {
  return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=40.741934%7C-74.004897&gslimit=30&format=json&callback=JSON_CALLBACK')
         .success(function(data) {
           return data;
         })
         .error(function(data) {
           return data;
         });
}]);
#2

you forgot some semi-colon in your controller,
and i don't understand why you put places.success within a function .
And you put a bracket instead of a curly brace at the end of this function.

#3

Thanks for the quick and nice answer! I tried to change the controller according to your remarks, but still something seems to be amiss; any idea?
Thank you very much in advance!

MainController

app.controller('MainController', ['$scope', 'places', function($scope, places) {
  
  $scope.apps = [];
  
  $scope.mapCenter = {
    lat: 40.741934,
    lng: -74.004897,
    zoom: 17
  };
 
  places.success(function(data) {
    $scope.geodata = data;
    $scope.mapMarkers = geodataToMarkers($scope.geodata);
  });
    
}]);
#4

what is this for ?

I think your mistake is not in the controller, its seems ok to me.

#5

Hi there
I have the same code as melyli, after she corrected the MainController.js
I notice that when I use
"places.success(function(data) {});" (empty inner function)
Of course its not showing when I get the data into $scope.geodata
the map is not showing.
When I remove this places.success, I get the map showing.

What can be the problem? -- resolved
wrote success with 3 c's :slightly_smiling:

#6

Your code works for Step 1 and 2. Your code looks correct for Step 3.1 and 3.2, but looks incorrect for Step 3.3 and 3.4. The issue is you have 'function($scope, places) {' repeated a second time, but only need it one time. Here is the fix.

Incorrect:

$scope.apps = []
  
  $scope.mapCenter = {
    lat: 40.741934,
    lng: -74.004897,
    zoom: 17
  }
 
  function($scope, places) {
  places.success(function(data) {
    $scope.geodata = data;
    $scope.mapMarkers = geodataToMarkers($scope.geodata);
  });

Correct:

$scope.apps = []
  
  $scope.mapCenter = {
    lat: 40.741934,
    lng: -74.004897,
    zoom: 17
  }

places.success(function(data) {
	$scope.geodata = data;
	$scope.mapMarkers = geodataToMarkers($scope.geodata);
});

The Chrome console gave me this error which led me to believe an error was present in MainController.js near line 11.

Uncaught SyntaxError: Unexpected token ( MainController.js:11

#7

did you guys notice that the helpers.js file defines a variable named "markers" not "mapMarkers"?

I updated that and then it worked....

#8

I left the variable as markers in the helper.js file, and just added return markers to the end of the geodataToMarkers() function. Of course, going back to the original file, I see that it was omitted when I typed in the function. Just the same, we do not need to change this variable name.