angular.module('dplaceMapDirective', [])
    .directive('dplaceMap', function() {
        function link(scope, element, attrs) {
            /* Temporarily Broken as OpenLayers is removed */
            element.append("<div id='mapdiv' style='width:1140px; height:480px;'></div>");
            var map = new OpenLayers.Map('mapdiv');
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
            map.addLayer(wms);
            map.zoomToMaxExtent();
            var markers = new OpenLayers.Layer.Markers("SocietyMarkers");
            map.addLayer(markers);
            scope.map = map;
            scope.mapMarkers = markers;
            var size = new OpenLayers.Size(21,25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            scope.icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
            scope.addMarkers = function() {
                scope.mapMarkers.clearMarkers();
                if(!scope.societies) {
                    return;
                }
                scope.societies.forEach(function(societyResult) {
                    var society = societyResult.society;
                    var coordinates = society.location.coordinates;
                    // Add a marker for each point
                    var lonlat = OpenLayers.LonLat.fromArray(coordinates);
                    var marker = new OpenLayers.Marker(lonlat, scope.icon.clone());
                    marker.events.register('mouseover', marker, function(evt) {
                        var popup = new OpenLayers.Popup.FramedCloud(society.name,
                            marker.lonlat,          // lonlat
                            null,                   // size
                            society.name,           // html
                            marker.icon,            // anchor
                            false                   // closebox
                        );
                        scope.map.addPopup(popup);
                        marker.events.register('mouseout', marker, function(evt) { popup.hide(); } )
                    });
                    scope.mapMarkers.addMarker(marker);
                });
            };

            // Update markers when societies change
            scope.$watchCollection('societies', function(oldvalue, newvalue) {
                scope.map.zoomToMaxExtent();
                scope.addMarkers();
            });
        }

        return {
            restrict: 'E',
            scope: {
                societies: '='
            },
            link: link
        };
    });
@@ -126,70 +126,8 @@
 ) %7B%0A
-            /* Temporarily Broken as OpenLayers is removed */%0A
     
@@ -229,46 +229,32 @@
     
-var map = new OpenLayers.Map
+scope.map = $
 ('
+#
 mapdiv')
 ;%0A  
@@ -253,628 +253,70 @@
 iv')
-;%0A            var wms = new OpenLayers.Layer.WMS( %22OpenLayers WMS%22,%0A                    %22http://vmap0.tiles.osgeo.org/wms/vmap0%22, %7Blayers: 'basic'%7D );%0A            map.addLayer(wms);%0A            map.zoomToMaxExtent();%0A            var markers = new OpenLayers.Layer.Markers(%22SocietyMarkers%22);%0A            map.addLayer(markers);%0A            scope.map = map;%0A            scope.mapMarkers = markers;%0A            var size = new OpenLayers.Size(21,25);%0A            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);%0A            scope.icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset
+.vectorMap(%7Bmap: 'world_mill_en'%7D).vectorMap('get','mapObject'
 );%0A 
@@ -387,21 +387,18 @@
 .map
-Markers.clear
+.removeAll
 Mark
@@ -636,987 +636,193 @@
     
-var coordinates = society.location.coordinates;%0A                    // Add a marker for each point%0A                    var lonlat = OpenLayers.LonLat.fromArray(coordinates);%0A                    var marker = new OpenLayers.Marker(lonlat, scope.icon.clone());%0A                    marker.events.register('mouseover', marker, function(evt) %7B%0A                        var popup = new OpenLayers.Popup.FramedCloud(society.name,%0A                            marker.lonlat,          // lonlat%0A                            null,                   // size%0A                            society.name,           // html%0A                            marker.icon,            // anchor%0A                            false                   // closebox%0A                        );%0A                        scope.map.addPopup(popup);%0A                        marker.events.register('mouseout', marker, function(evt) %7B popup.hide(); %7D )%0A                    %7D);%0A                    scope.mapMarkers.addMarker(
+// Add a marker for each point%0A                    var marker = %7BlatLng: society.location.coordinates.reverse(), name: society.name%7D%0A                    scope.map.addMarker(society.id, 
 mark
@@ -1019,30 +1019,103 @@
 ope.
-map.zoomToMaxExtent();
+addMarkers();%0A            %7D);%0A%0A            scope.$on('mapTabActivated', function(event, args) %7B
 %0A   
@@ -1129,34 +1129,35 @@
       scope.
-addMarkers
+map.setSize
 ();%0A        

Replace OpenLayers map with jVectorMap