JS Framework Examples

The Unfolded Map SDK can be implemented in many popular JavaScript frameworks. The examples below provide guidance for using the Unfolded Map SDK your framework of choice.


Angular

GitHubGitHub Open in VSCodeOpen in VSCode

You can use the Unfolded Map SDK in Angular applications. All you have have to do is include our Map SDK as a JavaScript file or as a module with npm.

This can be done as follows:

@Component({
  selector: 'my-app',
  template: `
    <div class="overlay-container">
      <h4>Embedding an Unfolded Map using the Map SDK with Angular</h4>
      <div *ngIf="!isLoaded" id="loader"></div>
      <div *ngIf="isLoaded" id="button-container">
        <button class="btn btn-primary btn-lg btn-square" (click)="goTo('sf')">
          SAN FRANCISCO
        </button>
        <button class="btn btn-primary btn-lg btn-square" (click)="goTo('la')">LOS ANGELES</button>
        <button class="btn btn-primary btn-lg btn-square" (click)="goTo('ny')">NEW YORK</button>
        <button class="btn btn-primary btn-lg btn-square" (click)="getLayers()">GET LAYERS</button>
        <div id="sdk-layers" *ngIf="layers.length">
          <label class="toggle-label">Toggle layer visibility</label>
          <div class="checkbox-group" *ngFor="let layer of layers">
            <label class="switch">
              <input
                type="checkbox"
                [checked]="layer.isVisible"
                (change)="setLayerVisibility(layer.id)"
              />
              <span class="slider round"></span>
            </label>
            <label class="switch-label">
              <div>{{ layer.label }}</div>
            </label>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  `
})
class AppComponent {
  unfoldedMap = null;
  isLoaded = false;
  layers = [];

  constructor() {
    this.unfoldedMap = new UnfoldedMap({
      mapUUID: '80c800cc-5805-4416-94a5-bd8105cab7f7',
      embed: true,
      width: '100%',
      height: '100%',
      onLoad: () => {
        console.log('%cUnfoldedMap: %cMap has loaded...', 'color: violet;', 'color: yellow;');
        this.isLoaded = true;
      }
    });
  }

  getLayers() {
    this.unfoldedMap.getLayers().then(layers => {
      console.log(layers);
      this.layers = layers;
    });
  }

  setLayerVisibility(id) {
    const index = this.layers.findIndex(layer => layer.id === id),
      layer = this.layers[index],
      layerId = layer.id,
      isVisible = !layer.isVisible;
    this.unfoldedMap
      .setLayerVisibility(layerId, isVisible)
      .then(layer => (this.layers[index] = layer));
  }

  goTo(location) {
    let viewStateConfig = {};
    switch (location) {
      case 'sf':
        viewStateConfig = {
          longitude: -122.4194,
          latitude: 37.7749,
          zoom: 6
        };
        break;
      case 'la':
        viewStateConfig = {
          longitude: -118.243683,
          latitude: 34.052235,
          zoom: 6
        };
        break;
      case 'ny':
        viewStateConfig = {
          longitude: -73.935242,
          latitude: 40.73061,
          zoom: 6
        };
        break;
    }
    this._setViewState(viewStateConfig);
  }

  _setViewState(config) {
    this.unfoldedMap.setViewState(config).then(data => console.log(data));
  }
}

React

GitHubGitHub Open in VSCodeOpen in VSCode

You can also use the Unfolded Map SDK in React applications. A standard approach would be to wrap the Map SDK in a React component, which you can then use as any normal react component.

This can be done as follows:

function UnfoldedMapComponent({setMap, setIsMapLoaded}) {
  const mountContainerRef = React.useRef(null);

  React.useEffect(() => {
    const unfoldedMap = new UnfoldedMap({
      mapUUID: '80c800cc-5805-4416-94a5-bd8105cab7f7',
      appendToDocument: false,
      embed: true,
      width: '100%',
      height: '100%',
      onLoad: () => {
        console.log('%cUnfoldedMap: %cMap has loaded...', 'color: violet;', 'color: yellow;');
        setMap(unfoldedMap);
        setIsMapLoaded(true);
      }
    });
    mountContainerRef.current.appendChild(unfoldedMap.iframe);
  }, [setMap, setIsMapLoaded]);

  return (
    <div className="unfolded">
      <div ref={mountContainerRef} />
    </div>
  );
}

function App() {
  const [isMapLoaded, setIsMapLoaded] = React.useState(false);
  const [map, setMap] = React.useState(null);

  return (
    <div className="App">
      <UnfoldedMapComponent setMap={setMap} setIsMapLoaded={setIsMapLoaded} />
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Svelte

GitHubGitHub Open in VSCodeOpen in VSCode

You can use the Unfolded Map SDK in Svelte applications. All you have have to do is include our Map SDK as a JavaScript file or as a module with npm.

This can be done as follows:

App.svelte
<script>
  import {UnfoldedMap} from '@unfolded/map-sdk';
  import OverlayMenu from './OverlayMenu.svelte';

  let isMapLoaded = false;
  const data = [
    {city: 'San Francisco', country: 'USA', lat: 37.7749, lon: -122.4194},
    {city: 'Los Angeles', country: 'USA', lat: 34.052235, lon: -118.243683},
    {city: 'New York', country: 'USA', lat: 40.73061, lon: -73.935242},
    {city: 'London', country: 'UK', lat: 51.5072, lon: 0.1276}
  ];

  const unfoldedMap = new UnfoldedMap({
    embed: true,
    onLoad: () => {
      console.log('%cUnfoldedMapSDK: %cMap has loaded...', 'color: violet;', 'color: yellow;');
      isMapLoaded = true;
      loadDataset();
    }
  });

  const loadDataset = () => {
    unfoldedMap.addDataset({
      uuid: 'dataset-uuid-001',
      label: 'Cities',
      data: JSON.stringify(data)
    });
  };
</script>

<OverlayMenu {isMapLoaded} {unfoldedMap} />
OverlayMenu.svelte
<script>
  export let isMapLoaded;
  export let unfoldedMap;
  let layers = [];
  let layerResult = '';
  const getLayers = () => {
    unfoldedMap.getLayers().then(fetchedLayers => {
      layers = fetchedLayers;
      layerResult = JSON.stringify(fetchedLayers, null, 2);
    });
  };
  const setLayerVisibility = id => {
    const index = layers.findIndex(layer => layer.id === id),
      layer = layers[index],
      layerId = layer.id,
      isVisible = !layer.isVisible;
    unfoldedMap.setLayerVisibility(layerId, isVisible).then(layer => (layers[index] = layer));
  };
  const goTo = location => {
    let viewStateConfig = {
      longitude: 0,
      latitude: 0,
      zoom: 0
    };
    switch (location) {
      case 'sf':
        viewStateConfig = {
          longitude: -122.4194,
          latitude: 37.7749,
          zoom: 6
        };
        break;
      case 'la':
        viewStateConfig = {
          longitude: -118.243683,
          latitude: 34.052235,
          zoom: 6
        };
        break;
      case 'ny':
        viewStateConfig = {
          longitude: -73.935242,
          latitude: 40.73061,
          zoom: 6
        };
        break;
      case 'london':
        viewStateConfig = {
          longitude: 0.1276,
          latitude: 51.5072,
          zoom: 6
        };
        break;
    }
    unfoldedMap.setViewState(viewStateConfig);
  };
</script>

Vue.js

GitHubGitHub Open in VSCodeOpen in VSCode

You can use the Unfolded Map SDK in Vue.js applications. All you have have to do is include our Map SDK as a JavaScript file or as a module with npm.

This can be done as follows:

new Vue({
  el: '#vue-container',
  data: {
    lights: true,
    unfoldedMap: null,
    isLoaded: false,
    layers: []
  },
  created() {
    this.unfoldedMap = new UnfoldedMap({
      mapUUID: '80c800cc-5805-4416-94a5-bd8105cab7f7',
      embed: true,
      width: '100%',
      height: '100%',
      onLoad: () => {
        console.log('%cUnfoldedMapSDK: %cMap has loaded...', 'color: violet;', 'color: yellow;');
        this.isLoaded = true;
      }
    });
  },
  methods: {
    getLayers: function() {
      this.unfoldedMap.getLayers().then(layers => {
        console.log(layers);
        this.layers = layers;
      });
    },
    setLayerVisibility: function(id) {
      const index = this.layers.findIndex(layer => layer.id === id),
        layer = this.layers[index],
        layerId = layer.id,
        isVisible = !layer.isVisible;
      this.unfoldedMap
        .setLayerVisibility(layerId, isVisible)
        .then(layer => (this.layers[index] = layer));
    },
    goTo: function(location) {
      let viewStateConfig = {};
      switch (location) {
        case 'sf':
          viewStateConfig = {
            longitude: -122.4194,
            latitude: 37.7749,
            zoom: 6
          };
          break;
        case 'la':
          viewStateConfig = {
            longitude: -118.243683,
            latitude: 34.052235,
            zoom: 6
          };
          break;
        case 'ny':
          viewStateConfig = {
            longitude: -73.935242,
            latitude: 40.73061,
            zoom: 6
          };
          break;
      }
      this._setViewState(viewStateConfig);
    },
    _setViewState: function(config) {
      this.unfoldedMap.setViewState(config).then(data => console.log(data));
    }
  }
});
<div id="vue-container">
  <div class="overlay-container">
    <h4>Embedding an Unfolded Map using the Map SDK with Vue.js</h4>
    <div v-if="!isLoaded" id="loader"></div>
    <div v-if="isLoaded" id="button-container">
      <button class="btn btn-primary btn-lg btn-square" v-on:click="goTo('sf')">
        SAN FRANCISCO
      </button>
      <button class="btn btn-primary btn-lg btn-square" v-on:click="goTo('la')">LOS ANGELES</button>
      <button class="btn btn-primary btn-lg btn-square" v-on:click="goTo('ny')">NEW YORK</button>
      <button class="btn btn-primary btn-lg btn-square" v-on:click="getLayers()">GET LAYERS</button>
      <div id="sdk-layers" v-if="layers.length">
        <label class="toggle-label">Toggle layer visibility</label>
        <div class="checkbox-group" v-for="layer in layers">
          <label class="switch">
            <input
              type="checkbox"
              :id="layer.id"
              :checked="layer.isVisible"
              @change="setLayerVisibility(layer.id)"
            />
            <span class="slider round"></span>
          </label>
          <label class="switch-label">
            <div>{{layer.label}}</div>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

Did this page help you?