CODEWITHSUNDEEP
openlayers
roman
roman

Reputation: 1

Is it possible to add an icon for ZoomToExtent in OpenLayers? default it is 'E'

I am trying to add an icon in place of 'E'. I have searched the documentation of OpenLayers, but I didn't find one. Any advice would be greatly appreciated. 

  this.map = new Map({
    controls: defaultControls({ attribution: false, rotate: false }).extend([
      new FullScreen(),
      new ZoomToExtent({
        extent: zoomToCenter,
        label: 'E',
        tipLabel: 'Zoom Extent'  

      })

Upvotes: 0

Views: 339

Answers (3)

lincstar182
lincstar182

Reputation: 59

Building off of answers by @barbsan and @Luc Chevallier.

If we want to use, for example, a font-awesome icon for the 'label', we can do like so:

var customLabel = document.createElement("i");
cusomLabel.className = "fas fa-expand"; // font-awesome v6.4.0 free
// include with <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

this.map = new Map({
  controls: defaultControls({ attribution: false, rotate: false }).extend([
  new FullScreen(),
  new ZoomToExtent({
    extent: zoomToCenter,
    label: customLabel,
    tipLabel: 'Zoom Extent'  
})

Upvotes: 0

Luc Chevallier
Luc Chevallier

Reputation: 21

I know this is an old question but as I encounter a similar issue I'll try to give a complete answer for future readers.

As @barbsan said, you can pass an HTMLElement to label witch is not a simple string containing some HTML tags but an object that you must either get from the DOM or create like so :

var customLabel = document.createElement('span');
//Do your DOM manip here to add classes or innerHtml
this.map = new Map({
    controls: defaultControls({ attribution: false, rotate: false }).extend([
      new FullScreen(),
      new ZoomToExtent({
        extent: zoomToCenter,
        label: customLabel,
        tipLabel: 'Zoom Extent'  
    })
})

Upvotes: 2

barbsan
barbsan

Reputation: 3458

Yes, you can set label to some HTMLElement

From docs:

new ZoomToExtent(opt_options)
...
options:
Name:   label
Type:   string | HTMLElement
Default:  'E'
Description:
Text label to use for the button. Instead of text, also an element (e.g. a span element) can be used.

Upvotes: 0

Related Questions