Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I want to create an angular map directive for openlayers map application. For example this is an example of map.

I created an angularjs directive.

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div id='map' style='width: 400px; height: 300px'></div>",            
            "link": function (scope) {              

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: "map"
                });
            }
        };
    }
})();

This sample works fine. But I hard coded the map element id name. And I want to get id value from scope.

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div id='{{target}}' style='width: 400px; height: 300px'></div>",
            "scope": {
                "target": "@"
            },
            "link": function (scope) {

                var target = scope.target ? scope.target: "map";

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: target
                });
            }
        };
    }
})();

But this does not show the map.

share|improve this question
up vote 1 down vote accepted

Openlayers map target property accepts 3 types: Element | string | undefined.

Sou you can set the target as element[0]

But you set directive parameter replace:true, so map changes with directive.

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div style='width: 400px; height: 300px'></div>",
            "replace": true,
            "scope": {

            },
            "link": function (scope) {

                var target = scope.target ? scope.target: "map";

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: element[0]
                });
            }
        };
    }
})();
share|improve this answer
up vote 0 down vote

Is the problem that the value is not bound to the scope or the map is not rendering? I tried to reproduce in a plunker but this seems to work as expected.

HTML

<map target="{{id}}"></map>

Directive

 template: '<div id="{{target}}" style="width: 400px; height: 300px">{{target}}</div>',
 scope: {
    "target": "@"
 },
 link: function (scope) {
 }
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.