# Embedding a Boldest map




To integrate any Boldest map into a website page, it is necessary to apply a piece of HTML code, consisting of a DIV and a Javascript include. Within this DIV, there will be a series of attributes that will serve to give certain characteristics to each use case.

The system is compatible with any framework since it is written in native Javascript, aiming not to collide with the libraries used in the host website.

```
<div
    id="bWidgetMap"

    ------------- atributes --------------

></div>
<script type="text/javascript" src="https://maps.your_domain.com/embed.js"></script>
```

## Attributes

### General Configuration

- `integration` (string): Defines the type of integration. Possible values: `segment`, `full`, `modal`.

- `showCurtain` (boolean): Indicates whether the curtain should be shown. Values: `true`, `false`.

- `showButtons` (boolean): Indicates whether the buttons to view map/return should be displayed. Values: `true`, `false`.

- `viewMapText` (string): Text for the 'VIEW MAP' floating anchor static button.

- `hideMapListWhenMobile` (boolean): Indicates whether to hide map/list buttons on mobile version. Values: `true`, `false`.

### URL Configuration

- `parenturiprefix` (string): Prefix of pushstate URLs.

- `embedurl` (string): Base URL for the widget.

- `embedmainuri` (string): URI for the widget. Includes language.

### Map Configuration

- `mapScrollwheel` (boolean): Allows using mouse wheel when widget is focused. Values: `true`, `false`.

### Events

- `onFocus` (string): Handler for focus event on the widget.

- `onFocusOut` (string): Handler for blur event on the widget.

### Height Configuration

- `topHeight` (integer): Top distance in pixels if there's a fixed header.

- `opHeightXs` (integer) (optional): `topHeight` for media query xs: Extra small <576px.

- `opHeightSm` (integer) (optional): `topHeight` for media query sm: Small ≥576px.

- `opHeightLg` (integer) (optional): `topHeight` for media query lg: Large ≥992px.

- `opHeightXl` (integer) (optional): `topHeight` for media query xl: Extra large ≥1200px.



## Embed examples

### Segment integration

Allows to embed a Boldest map in any DIV of a web page.

The larger the width, the better UX. It is recommended to maintain a minimum side margin to avoid confusion with the double scroll (widget gallery + scroll of the host web page).

If the DIV is less than 768px wide when the page loads, the mobile version of the Boldest widget will be loaded.

  Variable `integration="segment"`

```
<div style="width:100%;height: calc(100vh - 80px);">
    <div
        id="bWidgetMap"
        integration="segment"
        topHeight="40"
        btnColor='#12877a'
        showCurtain = "true"
        showButtons = "true"
        viewMapText = "VIEW MAP"
        parenturiprefix="bwidget:"
        ignoreBottomContent = "true"
        embedurl="https://maps.your_domain.com"
        embedmainuri="/en/map-to-embed-uri"
        mapScrollwheel="false"
        onFocus=""
        onFocusOut=""
    ></div>
    <script type="text/javascript" src="https://maps.your_domain.com/embed.js"></script>
</div>
```

### Full-screen / sticky integration

Allows to embed a Boldest map in a web page at full width and with the height equivalent to the height of the browser (being able to subtract the height of the header).

In this case, the scroll of the host web page and the scroll of the widget are unified. The contents after the map (e.g. footer) will not be accessible until the scroll of the widget's side gallery is completed. Therefore, it is recommended for the final segments of the host web page.

  Variable `integration="full"`

```
<div
    id="bWidgetMap"
    integration="full"
    topHeight="40"
    btnColor='#12877a'
    showCurtain = "true"
    showButtons = "true"
    viewMapText = "VIEW MAP"
    parenturiprefix="bwidget:"
    ignoreBottomContent = "true"
    embedurl="https://maps.your_domain.com"
    embedmainuri="/en/map-to-embed-uri"
    mapScrollwheel="false"
    onFocus=""
    onFocusOut=""
></div>
<script type="text/javascript" src="https://maps.your_domain.com/embed.js"></script>
```

### Modal window integration

Allows you to associate any button, link or banner to a modal window that displays a boldest map almost full screen.

  Variable `integration="modal"`

```
<div
    id="bWidgetMap"
    integration="modal"
    topHeight="40"
    btnColor='#12877a'
    showButtons = "true"
    parenturiprefix="bwidget:"
    takemeoutText="CLOSE MAP"
    embedurl="https://maps.your_domain.com"
    embedmainuri="/en/map-to-embed-uri"
    mapScrollwheel="false"
></div>
<script type="text/javascript" src="https://maps.your_domain.com/embed.js"></script>

<div class="cont">
    <button onClick="MapIframe.modalOpen();">VIEW MAP</button>
</div>
```


## React map embed library
### Install boldest-lib library

```
npm install boldest-lib
```
### Use on React app∫
```
import BwMapEmbed from 'boldest-lib';
import './estyle.scss';

const App = () => {
  return (
    <>
      <div className='mapContainer'>
        <BwMapEmbed 
          embedurl="https://your-domain.com"
          embedmainuri="/en/map-to-embed-uri"
          integration = "segment"
          btnColor="#000000"
        />
      </div>
    </>
  );
}

export default App;
```




## Example for SSR (server side rendering) with angular
This would be a rough example of an Angular component with input variables for host and map, which could be used as follows.



```
<app-bwidget [embedUrl]="'https://your-domain.com'" [embedMainUri]="'/en/map-to-embed-uri'"></app-bwidget>
```

The strategy would be the same for any framework that supports SSR, establish an if to identify if we are executing the code in the browser or server

```
import { Component, Inject, PLATFORM_ID, OnInit, Input } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-bwidget',
  template: `
    <div
      id="bWidgetMap"
      integration="full"
      topHeight="40"
      btnColor='#12877a'
      showCurtain = "true"
      showButtons = "true"
      viewMapText = "VIEW MAP"
      parenturiprefix="bwidget:"
      ignoreBottomContent = "true"
      [attr.embedurl]="embedUrl"
      [attr.embedmainuri]="embedMainUri"
      mapScrollwheel="false"
      onFocus=""
      onFocusOut=""
    ></div>
  `,
  styles: []
})
export class BwidgetComponent implements OnInit {
  @Input() embedUrl: string = 'https://your-domain.com';
  @Input() embedMainUri: string = '/en/map-to-embed-uri';

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      const script = document.createElement('script');
      script.src = this.embedUrl + '/embed.js';
      document.body.appendChild(script);
    }
  }
}
```