<template id="addlayertemplate">
  <div>
  <div id="rasters">
    <div>Add a raster layer:</div>
    Code <input type="text" size="10" id="rastercode">
    <button id="addraster">Add</button>
  </div>
  <div id="vectors">
    Add vector file<br>
    Name/identifier <input type="text" size="10" id="vectorname">
    Url <input type="text" size="50" id="vectorfile">
    MongoDB? <input type="checkbox" id="mongodb" value="mongodb">
    <button id="addvector">Add</button>
  </div>
  </div>
</template>

<script type="module">
  var utils = require('utils');
  var $ = utils.$;
  var olMap = require('olMap');
  $('addlayer').style.display = 'none';
  utils.addComponentToToolbar('addlayer');
  $('addraster').addEventListener('click', function() {
    System.import('registry/sources/' + $('rastercode').value)
    .then(function(m) {
      olMap.addRasters([m]);
      olMap.switcherRasterHandler({
        target: {value: m.getLayers()[0].getProperties().id}
      });
    });
  });
  $('addvector').addEventListener('click', function() {
    var url = $('vectorfile').value;
    var option = {
      url: url,
      id: $('vectorname').value || url,
      add: true
    };
    if ($('mongodb').checked === true) {
      option.type = 'mongodb';
    }
    olMap.addVectors({vectors: [option]});
  });
</script>

<template id="addlayertemplate">
  <div>
  <div id="rasters">
    <div>Add a raster layer:</div>
    Code <input type="text" size="10" id="rastercode">
    <button id="addraster">Add</button>
  </div>
  <div id="vectors">
    Add vector file<br>
    Name/identifier <input type="text" size="10" id="vectorname">
    Url <input type="text" size="50" id="vectorfile">
    MongoDB? <input type="checkbox" id="mongodb" value="mongodb">
    <button id="addvector">Add</button>
  </div>
  </div>
</template>

<script type="module">
  var utils = require('utils');
  var $ = utils.$;
  var olMap = require('olMap');
  $('addlayer').style.display = 'none';
  utils.addComponentToToolbar('addlayer');
  $('addraster').addEventListener('click', function() {
    System.import('registry/sources/' + $('rastercode').value)
    .then(function(m) {
      olMap.addRasters([m]);
      // $ doesn't work here
      document.getElementById(m.getLayers()[0].getProperties().id).click();
    });
  });
  $('addvector').addEventListener('click', function() {
    var url = $('vectorfile').value;
    var option = {
      url: url,
      id: $('vectorname').value || url,
      add: true
    };
    if ($('mongodb').checked === true) {
      option.type = 'mongodb';
    }
    olMap.addVectors({vectors: [option]});
  });
</script>

Fix change to new raster layer
Fix change to new raster layer
