1.7.4 • Published 3 years ago

dgtek-map v1.7.4

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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 typedescription
Selected building is:
on-neton-net
footprintin the footprint
construction-commencedunder construction
coming-sooncoming soon
not-availableN/A

:point_right: List events

The array of results from the collection of buildings DB received

event typedescription
buildings-address-listThe list of addresses
buildings-data-listThe list of base data ({ id, address, addressComponents })

:point_right: Search events

event typedescription
get-by-idGet building description by id
get-by-addressGet building description by address

:point_right: UI events

event typedescription
submit-addressUser 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 })
1.7.4

3 years ago

1.7.3

3 years ago

1.7.2

3 years ago

1.7.1

3 years ago

1.5.5

3 years ago

1.5.4

3 years ago

1.5.3

3 years ago

1.7.0

3 years ago

1.6.1

3 years ago

1.5.2

3 years ago

1.6.0

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.5.9

3 years ago

1.5.8

3 years ago

1.5.7

3 years ago

1.5.6

3 years ago

1.4.9

3 years ago

1.4.8

3 years ago

1.4.5

3 years ago

1.4.7

3 years ago

1.4.4

3 years ago

1.2.0

3 years ago

1.2.8

3 years ago

1.2.7

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.2.1

3 years ago

1.2.9

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago