I gave been using leaflet for a while now, with AngualrJs, to show maps.
Now, I want to add some complexity and use ui-router to display the map only in one state, which means in one view, which has an associated controller. However, the map does not display, and there are no error messages in the developer console.
I have created the simplest possible Plunker here. It has two states, Alpha & Beta, each with a link to toggle to the other state. In the view of state Beta, there is also the simplest possible leaflet map, but, as I said, it does not display, and does not show any errors. I added a red border around it in CSS.
What am I doing wrongly?
The complete code follows, but you might find it easier to play with the Plunker.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="styleSheet" href="styles.css" />
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="application/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="application/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script type="application/javascript"
src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script type="application/javascript" src="app.js"></script>
<script type="application/javascript" src="controllers.js"></script>
</head>
<body ui-view></body>
</html>
app.js
angular.module('app', [
'ui.router'
]);
angular.module('app').config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/alpha');
$stateProvider.state('alpha', {
url: '/alpha',
templateUrl: './alpha.html',
controller: 'alphaController'
});
$stateProvider.state('beta', {
url: '/beta',
templateUrl: './beta.html',
controller: 'betaController'
});
}
]);
controllers.js
angular.module('app').controller('alphaController', ['$state',
function ($state) {
}
]);
angular.module('app').controller('betaController', ['$state',
function ($state) {
}
]);
alpha.html
<h1>Alpha</h1>
<a ui-sref="beta" ui-sref-active="beta">Beta</a>
beta.html
<h1>Beta</h1>
<a ui-sref="alpha" ui-sref-active="alpha">Alpha</a>
<hr>
<!-- see https://angular-ui.github.io/ui-leaflet/#!/examples/simple-map -->
<leaflet id="map-simple-map" class="map_div red_border"></leaflet>
styles.css
html, body
{
height: 100%;
width: 100%;
}
.map_div
{
height: 90%;
width: 90%;
}
.red_border
{
border-width: 1%;
border-style: double;
border-color: red;
padding: 0.5%;
margin: 0.5%;
}
