dgtek-map-package

:clipboard: 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

:clipboard: 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')

:memo: 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>

:clipboard: Get started

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

Map container will receive events

:page_with_curl: Events

:point_right: 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 |

:point_right: 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 }) |

:point_right: Search events

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

:point_right: 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

:page_with_curl: 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

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

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

:pushpin: 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 })