CODEWITHSUNDEEP
angularjsangular-ui-routerleafletangular-leaflet-directive
Mawg
Mawg

Reputation: 40185

AngularJs - can't see a leaflet map in a ui-router view

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%;    
}

Upvotes: 0

Views: 301

Answers (1)

kboul
kboul

Reputation: 14600

Include leaflet.css, angular-simple-logger.js & ui-leaflet.js on index.html:

<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>
    <link
        data-require="[email protected]"
        data-semver="0.7.3"
        rel="stylesheet"
        href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"
    />
    <link rel="stylesheet" href="style.css" />

    <script
        data-require="[email protected]"
        data-semver="0.7.3"
        src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.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="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.light.js"></script>
    <script src="https://rawgit.com/angular-ui/ui-leaflet/67e9dc28d9880a9091cbf7d42de259440e77ada9/dist/ui-leaflet.js"></script>

and ui-router on app.js:

var app = angular.module('app', [
    'ui-leaflet', 'ui.router'
]);

Demo

Upvotes: 1

Related Questions