-1

I'm quite new in the Angular workflow. I'm trying to add a map to my pages using Leaflet. I'd like to do it through components. I followed two instructions (listed in comment) in order to make it happen (in vain).

You can see the result here: http://oye-api.herokuapp.com/test.html

But I have nothing. No map, but no error either. I don't know what I did wrong. Can you help?

Thanks!

This is what I have:

page.html

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-mocks/angular-mocks.js"></script>

<script src="app.module.js"></script>
<script src="map/map.module.js"></script>
    <script src="map/map.component.js"></script>

<map></map>

map.component.js

angular.
  module('map').
  component('map', {
    templateUrl: 'map/map.template.html',
    controller: MapController
    }
  );

MapController.$inject = ['$scope'];

function MapController($scope) {
    var ctrl = this;
    angular.extend(ctrl, {
        san_fran: {
            lat: 37.78,
            lng: -122.42,
            zoom: 13
        },
        events: {},
        layers: {
            baselayers: {
                osm: {
                    name: 'OpenStreetMap',
                    url: 'https://{s}.tiles.mapbox.com/v3/examples.map-i875mjb7/{z}/{x}/{y}.png',
                    type: 'xyz'
                }
            }
        },
        defaults: {
            scrollWheelZoom: false
        }
    });
}

map.template.html

<leaflet center="san_fran" markers="markers" event-broadcast="events" defaults="defaults" id='map'></leaflet>

app.module.js

'use strict';

angular.module('oyeApp', [
  'ngRoute',
  'map'
]);

map.module.js

'use strict';

angular.module('map', [
  'ngRoute'
]);
Guillaume W
  • 11
  • 3
  • The instructions I tried to follow: - http://blog.thehumangeo.com/angular-component-syntax.html - https://coderwall.com/p/cfj6da/how-to-use-the-angular-leaflet-directive – Guillaume W Nov 04 '16 at 08:55

1 Answers1

0

Add css class to show the map div refer below link: http://leafletjs.com/examples/quick-start/

Jay Prakash Singh
  • 89
  • 1
  • 6
  • Thank you for your answer, but that's not the problem here. I understand, my explanation could be unclear, so here is a test page :http://oye-api.herokuapp.com/test.html – Guillaume W Nov 04 '16 at 08:51