I'm trying to get the basic map to show on my page and all I get is a blank page.
This is my html:
<!DOCTYPE html>
<html ng-app="example">
<head>
<meta charset="utf-8">
<title>example</title>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-leaflet-directive.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/frontend.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="SimpleMapController">
hello there
<leaflet></leaflet>
</body>
</html>
My javascript code:
var app = angular.module('example', ['leaflet-directive']);
app.controller("SimpleMapController", [ '$scope', function($scope) {
angular.extend($scope, {
defaults: {
scrollWheelZoom: false
}
});
}]);
This is pretty much exactly as it is explained in the (poorly explained) example. Yet, instead of a map (like in their example), I have a blank screen. On the dev console of the browser I get the following error as well:
GET file://b.tile.openstreetmap.org/1/0/1.png net::ERR_FILE_NOT_FOUND
It looks like it's looking for the map pngs on my end when it should be getting them from leaflet. Am I missing something in my html or the js?