We will just highlight the most important parts.

At a functional level, we reused ol.interaction.Draw with the possibility to switch between drawing points, lines, and polygons. We removed the server-side dependency for saving the efforts for the same.

Instead we introduced a new component, app.generateGeoJSONControl, with the following snippet:

controls: ol.control.defaults().extend(new app.generateGeoJSONControl({source: source})
]),

This component reuses the declared ol.source.GeoJSON vector source used to get a GeoJSON content with the source: source option.

This new control is created by declaring a namespace with:

window.app = {};
var app = window.app;

Then, we declared the function with app.generateGeoJSONControl = function(opt_options) { and directly prepared to get opt_options with the following line of code:

var options = opt_options || {};

We made an anchor DOM element, then a temporary variable with var this_ = this; to be able to keep the scope for the getGeoJSON function.

Within this named function, we stopped a default behavior to not get the URL changed and started to manipulate the features from the source to transform them to a GeoJSON string. With a new download function, we made it possible to save the text content in a file.

This declaration is not the call; so, we needed to bind the function to event click and touchstart for desktop and mobiles experiences on the anchor DOM element with:

anchor.addEventListener('click', getGeoJSON, false);
anchor.addEventListener('touchstart', getGeoJSON, false);

Near the end, we added a new <div> tag and appended anchor as a child.

We made an interesting statement by using a call function from ol.control.Control:

ol.control.Control.call(this, {
    element: element,
    target: options.target
});

It enables us to reuse the option from the parent control and to set them, for example, target and element, the newly created <div> tag.

Making a call was just to call the function of the parent class; so, after the end of the app.generateGeoJSONControl function, we explicitly used a special declaration ol.inherits to apply the ol.control.Control parent methods and properties to our custom class:

ol.inherits(app.generateGeoJSONControl, ol.control.Control);

Q1. You need to stop the zoom in / zoom out behavior on the map. In the ol.Map object, what do you need to change in the options and why?

Q2. If you want to use panning on your map, what do you need to change in ol.Map?

Q3. Assuming I have made my own control named mycustomControl and I declare the following within ol.Map:

controls: ol.control.defaults().extend([
    mycustomControl({source: source})
])

What will happen and why?