dgtek-map

dgtek-map-package

---

📋 Installation

yarn add dgtek-map && mv node_modules/dgtek-map/dist/map.worker.js public

or

npm install dgtek-map && mv node_modules/dgtek-map/dist/map.worker.js public

📋 How to use

---

Import package:

import DgtekMap from 'dgtek-map'

Start web-worker

initWorker.js:

If your app starts from root folder:

window[Symbol.for('map.worker')] = new Worker('map.worker.js')

If your app starts from subfolder (for example https://example.com/app/):

window[Symbol.for('map.worker')] = new Worker('/app/map.worker.js')

📝 Work with map

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;
  }
</style>
<main>
  <figure id="container-for-map"></figure>
</main>

<script src="initWorker.js"></script>
<script src="dist/main.js"></script>

📋 Get started

const map = new DGtekMap({
  container,
  center: { lat: -37.8357725, lng: 144.9738764 }
})

Map container will receive events

📃 Events

👉 Selected address events

event type	description
	Selected building is:
on-net	on-net
footprint	in the footprint
construction-commenced	under construction
coming-soon	coming soon
not-available	N/A

👉 List events

The array of results from the collection of buildings DB received

event type	description
buildings-address-list	The list of addresses
buildings-data-list	The list of base data ({ id, address, addressComponents })

👉 Search events

event type	description
get-by-id	Get building description by id
get-by-address	Get building description by address

👉 UI events

event type	description
submit-address	User pressed the button SUBMIT

Event handler example:

const events = [
  'map-worker-is-ready',
  'on-net',
  'footprint',
  'construction-commenced',
  'coming-soon',
  'not-available',
  'buildings-address-list',
  'buildings-data-list',
  'submit-address',
  'get-by-id',
  'get-by-address'
]

const container = document.getElementById('container-for-map')
events.forEach(eventName => container.addEventListener(eventName, catchEvent))

function catchEvent (event) {
  console.group('Event handler outside package')
  console.log('Event type: ', event.type)
  console.log('Event data:\n', event.data)
  console.groupEnd('Event handler outside package')
}

^{You should write your own code for catchEvent}

---

📃 Methods

• change default host url

setHost (data)

• change default api key

setApiKey (data)

• get list of building's addresses from collection

getBuildingsList (collectionName)

• get list of building's data from collection

getBuildingsData (collectionName)

^{Building data: { id, address, addressComponents }}

^{Collections: 'lit', 'footprint', 'build', 'soon', 'other'}

• get list of 'on-net' buildings

getLIT ()

• get list of 'footprint' buildings

getFootprint ()

• get full description of building by it's id

getBuildingDataById (buildingId)

• get full description of building by it's address

getBuildingDataByAddress (address)

• save new building

postBuildingData (buildingData)

• update existing building data

putBuildingData (buildingId, buildingData)

---

Additional

📌 You can catch events listed above on the worker' instance directly:

events.forEach(event => window[Symbol.for('map.worker')].addEventListener(event, catchEvent))

📌 You can send requests directly to the worker

☕ Search for address:

window[Symbol.for('map.worker')].postMessage({
  action: 'search',
  store: 'lit',
  key: '81 Cecil St, South Melbourne VIC 3205, Australia'
})

☕ Get list of addresses:

window[Symbol.for('map.worker')].postMessage({ action: 'list', key: 'build' })

☕ Get list of addresses:

window[Symbol.for('map.worker')].postMessage({ action: 'data', key: 'soon' })

☕ Post new building:

window[Symbol.for('map.worker')].postMessage({ action: 'post', data })

☕ Patch building details:

window[Symbol.for('map.worker')].postMessage({ action: 'patch', key: buildingId, data })