Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular JS with Open Layers [closed]

I need to create a controller that has a service which manage all the markers of open layers.

I think that there are apps that based on angular and use also open layers. However i can't find real examples.

Can someone help me find good examples for this approach?

like image 555
Aviade Avatar asked Apr 01 '26 14:04

Aviade


1 Answers

Azimuth project is I think the most most advanced integration of angular and open layers (or leaflet).

But... It's really not that hard to create custom directives that display maps and listen for changes on scope objects in order to draw them on the map. Here is a plukr I created for another SO issue of mine, but it shows you how to create a basic map : http://plnkr.co/edit/0tXsWS0DXtl37jV8GywI?p=preview

app.directive('tchOlMap', function () {

    var MAP_DOM_ELEMENT_ID = 'tchMap';

    return {

        restrict: 'E',

        replace: true,
        template: '<div id="' + MAP_DOM_ELEMENT_ID + '" class="full-height"></div>',

        link: function postLink(scope, element, attrs) {
            var map = new OpenLayers.Map(MAP_DOM_ELEMENT_ID);
            map.addLayer(new OpenLayers.Layer.OSM());
            map.setCenter(new OpenLayers.LonLat(3, 47).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), 5);
        }
    }

});

You just have to watch for a scope object in the link function, and draw on the map accordingly.

like image 105
Mat Avatar answered Apr 04 '26 03:04

Mat