1

I am trying to add some buttons to the GeoNetwork 3 MapViewer. Unfortunately I'm new to AngularJS, which GN3 is written in. So what I've done is editing the html-template that the 'gnMainViewer' directive is using.

ViewerDirectve.js:

module.directive('gnMainViewer', [
'gnMap',
function(gnMap) {
  return {
    restrict: 'A',
    replace: true,
    scope: true,
    templateUrl: '../../catalog/components/viewer/' +
        'partials/mainviewer.html',
[...]
}]);

In this template I can find the buttons that are shown in the MapView.

mainviewer.html:

  <div class="wrapper" data-ng-controller="gnViewerController">

  <div data-gn-alert-manager=""></div>
  <div id="map" ngeo-map="map" class="map"></div>
  <div gn-gfi="" map="map"></div>
  <div gn-localisation-input map="map"></div>

  <!--Top right buttons - Tools-->
  <div class="tools tools-right" gi-btn-group gnv-close-panel data-ng-controller="toolsController">
    <button class="btn btn-default" ng-model="activeTools.addLayers" type="submit"
            rel="#addLayers" gi-btn gnv-tools-btn>
      <span class="fa fa-plus"></span>
      <span role="tooltip" data-translate="">addLayers</span>
    </button>
    <button class="btn btn-default" ng-model="activeTools.layers" type="submit"
            rel="#layers" gi-btn gnv-tools-btn>
      <span class="fa fa-tasks"></span>
      <span role="tooltip" data-translate="">Layers</span>
    </button>

[...]
</div>
</div>

So I've added a button let's say:

<button class="btn btn-default" ng-model="" type="submit"
            rel="#" gi-btn gnv-tools-btn>
      <span class="fa fa-beer"></span>
      <span role="tooltip">NewButton</span>
    </button>

to the template.

Then I've saved my changed and refreshed the MapView-Page on my server. But a new button will not be displayed. Also, changing the comment "Top right buttons" to something else will not make any changes to the displayed MapView-Page. Even restarting the server won't change anything.

Could somebody explain me why AngularJS reacts like this? Any Ideas?

Roy Developer
  • 126
  • 9
Antivist
  • 184
  • 9
  • You sure you're editing the right template? Your approach seems ok. – Daniel Cardoso Jun 04 '15 at 13:08
  • As far as i can say - Yes. It's the only template which is containing the buttons that are shown in this view. Unfortunately, this template is not loaded when I take a look at the requests in the chrome developer console. Anyway these buttons are shown so they should be loaded somethere - right? – Antivist Jun 04 '15 at 13:21
  • 1
    What I've found is a file called gn_search_default.js that uses $templateCache.put('../../catalog/components/viewer/partials/mainviewer.html', [.. html elements .. ]; So I guess that's how the html template is loaded. But my changes are not reflected in these [ html elements ] that are being put. – Antivist Jun 04 '15 at 14:01
  • By reading the documentation for $templateCache it seems that the template was cached the first time it was loaded... try clearing the cache of your browser and reload the page to see if your changes are then visible. – Daniel Cardoso Jun 04 '15 at 14:04
  • 1
    That makes sense, but I'm using Ctrl + F5 and also Ctrl + Shift + R to refresh and "cache disabled while DevTools are open" is also activated plus I've cleared my entire browser history, just to be sure. – Antivist Jun 04 '15 at 19:01

1 Answers1

1

Turned out I had to run the page in debug mode e.g. http://localhost:8080/geonetwork/srv/ger/catalog.search?debug#/map to force to load all AngularJS files seperately and without cache.

Antivist
  • 184
  • 9