spatial-frontend v1.0.16

Spatial-Frontend

Install

$ npm install spatial-frontend

How to import the spatial map web component

Angular

In the app.module import the spatial-frontend and CUSTOM_ELEMENTS_SCHEMA from the @angular/core

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 

import 'spatial-frontend';

@NgModule({ 

  schemas: [CUSTOM_ELEMENTS_SCHEMA], 

}) 

In the app.component.ts import the webcomponent from the package and define it in the customElements.define function which takes in two parameters ,the web-component-tag name and the second one is the name of the web-component

app.component.ts

import { Component, OnInit } from '@angular/core'; 

import { SpatialMapWebComponent } from 'spatial-frontend'; 

@Component({ 

  selector: 'app-root', 

  templateUrl: './app.component.html', 

  styleUrls: ['./app.component.css'] 

}) 

export class AppComponent implements OnInit { 

  ngOnInit(): void { 
    customElements.define('spatial-map-web-component', SpatialMapWebComponent); 
  } 

} 
 

app.component.html

<spatial-map-web-component style="display:flex;height: 100vh;width: 100vw;"></spatial-map-web-component>

Vue

<template>
  <spatial-map-web-component class="map-container"></spatial-map-web-component>
</template>

<script>
import { SpatialMapWebComponent } from 'spatial-frontend';
export default{
  mounted() {
    customElements.define('spatial-map-web-component', SpatialMapWebComponent);
  },
};
</script>

<style>
.map-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}
</style>