Add and customize map controls with Angular 13 and OpenLayers

OpenLayers is an open source JavaScript library that is used to add maps to websites. While it comes with map controls, they might not fit everyone’s needs and might not match the style of every project.
In this guide you will learn to change style of existing map controls, create new custom controls and remove default controls.

If you’d like to find out how to set up OpenLayers in your Angular project, check out my previous guide:

Create interactive maps with Angular 13 and OpenLayers

Update style of existing controls — zoom buttons

If you need to add a map to your existing project you probably noticed that the style of zoom buttons might not fit every color scheme.

Plus and minus buttons are default controls in the OpenLayers maps and their function is pretty obvious — they are used to zoom in and zoom out.

Here, we will add global css code that will be used by all the controls in this guide.

To ensure that the changes are applied to all the maps in the app we will create a new .css file: assets/css/_openlayers.css

Next, it is time to add import statement to the styles.css file

@import 'assets/css/openlayers';

and add css changes to _openlayers.css, e.g.:

We use already existing OpenLayers selectors to ensure that as we add more controls to the map, they will use the same style without having to add any extra selectors.

Change icons and button position

If you want to change the zoom labels to different icons/text, you need to replace ‘+’ and ‘-’ buttons with custom controls. They can be replaced with standard unicode icons or e.g. Font Awesome.

After creating the map call the following method.

Use class name to make changes to button position in _openlayers.css

.zoom-control {
    bottom: 0.5em;
    right: 0.5em;
}

If you open the map now, you will notice that the zoom buttons are duplicated — we added new buttons without removing the default ones.

The solution is to initialize the map without controls

Add and customize full screen button

To add a full screen button, simply add another control to map object

this.map.addControl(new FullScreen)

Changes made to button and ol-control will apply to full screen button so it is possible that your job is done at this point.

However, as in case of zoom buttons, you have ability to change the position and icons. This can be done by adding a custom class name and labels withlabel — switch to full screen, labelActive — go back to the standard mode.

this.map.addControl(new FullScreen({
  className: 'full-screen',
  label: '\u26F6',
  labelActive: '\u2716'
}))

Add new buttons

As an example, I will add right arrow button. Adding arrows is a way to improve accessibility of the map.

First, add another control to the map

this.map.addControl(new ArrowsControl(this.map))

And next, create a new .ts file for the newly referenced class. We add html code by appending it to existing map element in typescript and we create event listener that will handle button functionality — by clicking right, the view shifts by 100px.

This is the button in action:

Attribution

Depending on the map tiles that you use, you might have to add the attribution.

this.map.addControl(new Attribution())

I decided to update the font and position of attribution to better match the style of my map.

.ol-attribution li {
  right: 4em;
  position: relative;
  font-family: sans-serif;
}

And here is my final result:

Updating and adding custom controls in OpenLayers is not difficult. You will make your work easier if you reuse existing selectors as they will apply the same styles to all your controls.

Let me know if you enjoyed the guide and follow me if you are interested in more front end tutorials.