dgtek-portal-map-package
📋 Installation
yarn add dgtek-portal-map-package && mv node_modules/dgtek-portal-map-package/dist/map.worker.js public
or
npm install dgtek-portal-map-package && mv node_modules/dgtek-portal-map-package/dist/map.worker.js public
📋 How to use
📃 Configuring web-worker
You need to start web-worker.
Import the module startWorker from package:
import { startWorker } from 'dgtek-portal-map-package/dist/start-worker'and then start the worker:
const worker = startWorker(publicPath, apiHost, apiAccessKey, credentials, role, callback)-
publicPathis the path worker will be started from (required) -
apiHostis the backend API url (for examplehttps://dgtek-staging.herokuapp.com) (required) -
apiAccessKeyis needed to access backend API (required) -
credentialsuser credentials (required) -
role- user role (optional) -
callback- your function that will receive the message when web-worker will be ready to work (optional)
📃 Methods
After the worker will be created you can use it's methods to access the data
Each method receive callback to return the result (your function )
• refresh(callback)
• getBuildingsListForTable(status, callback) /* available status: lit, footprint, build, soon, other */
• getBuildingsList(status, callback) /* available status: lit, footprint, build, soon, other */
• getBuildingsByList(list, callback) /* list - array of buildings id */
• getMasterBuildingsList(callback) /* lit only */
• getSlavesForMaster(masterId, callback)
• getBuildingDetailsById(buildingId, callback) /* callback will receive building details */
• getBuildingDetailsByAddress(address, callback) /* callback will receive building details */
• createNewBuilding(data, callback) /* callback will receive the id of created building */
• deleteBuilding(buildingId, callback)
• patchBuildingDetails(buildingId, data, callback)
• putBuildingDetails(buildingId, data, callback)☕ Example
const callback = data => console.log(data)
worker.getBuildingsList('lit', callback)📝 Package
Import package:
import DgtekMap from 'dgtek-portal-map-package'Create container for map with id "container-for-map" and stylize it as you need:
<style>
#container-for-map {
position: relative;
width: 70%;
height: 70vh;
margin: auto;
}
@media screen and (max-width: 600px) {
#container-for-map {
width: 100%;
}
}
</style>
<main>
<figure id="container-for-map"></figure>
</main>📋 Get started
const map = new DGtekMap({
container,
center: { lat: -37.8357725, lng: 144.9738764 }
})📋 Catch search event
To receive the result of user input you should set the property searchCallback of worker:
worker.searchCallback = function (data) {
console.log('SEARCH CALLBACK DATA:\n', data)
}