Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created June 7, 2018 15:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/5658f6fa329cb0e5f606dda91ba705f7 to your computer and use it in GitHub Desktop.
Save codecademydev/5658f6fa329cb0e5f606dda91ba705f7 to your computer and use it in GitHub Desktop.
Codecademy export
<div class="about ng-scope">
<div class="container-fluid">
<h1>Meet NearMe</h1>
<h2>The best place to discover new places around you.</h2>
<a class="btn btn-primary" href="#/">Start exploring</a>
</div>
</div>
app.controller('AboutController', []);
var app = angular.module('NearMeApp', ['ngRoute','leaflet-directive']);
app.config('$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
controller: 'MainController',
templateUrl: 'views/main.html'
}).when('/about', {
controller: 'AboutController',
templateUrl: 'views/about.html'
}).otherwise({
redirectTo: '/'
});
});
<!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>
<script src="js/vendor/helpers.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="NearMeApp">
<div class="header">
<div class="container-fluid">
<h1 class="pull-left">NearMe</h1>
<a class="pull-right" href="#/about">About</a>
</div>
</div>
<div ng-view></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>
<script src="js/controllers/AboutController.js"></script>
<!-- Directives -->
<!-- Services -->
<script src="js/services/places.js"></script>
</body>
</html>
<div class="main">
<div class="container-fluid" id="map-canvas">
<leaflet center="mapCenter" markers="mapMarkers"></leaflet>
</div>
</div>
app.controller('MainController', ['$scope', 'places', function($scope, places) {
$scope.mapCenter = {
lat: 40.741934,
lng: -74.004897,
zoom: 17,
};
places.success(function(data) {
$scope.geodata = data;
$scope.mapMarkers = geodataToMarkers($scope.geodata);
});
}]);
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(err) {
return err;
});
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment