Leaflet.TileLayer.PouchDBCached

beberapa hari terakhir ini saya sedikit disibukkan dengan Leaflet, karena ada saudara yang meminta dibuatkan sebuah peta dengan leaflet. Salah satu plugin yang menarik dari Leaflet dari sekian banyak dafter pluginsnya yaitu Leaflet.TileLayer.PouchDBCached.

Plugin yang satu ini mampu menyimpan tile secara lokal, sehingga seandainya kita bekerja di daerah remote, akan sangat berguna.  Cukup download saat malam hari atau di kantor, dan saat presentasi di lapangan, dengan koneksi lelet di jam kantorpun seharusnya peta kita tidak akan lambret lagi didownload tilenya (karena telah di cache).

Pada demo (sample) yang diberikan, kita diberi contoh kodingan bagaimana meng-cache tile dari zoom level 0 hingga 4. Hasil cache dapat dilihat pada IndexedDB chrome, lihat gambar berikut:

Leaflet.TileLayer.PouchDBCached

 

Untuk menginstallnya, Anda harus download dulu dengan git

09/06/2015_19:02:09,40
E:\GIS\Leaflet>git clone https://github.com/MazeMap/Leaflet.TileLayer.PouchDBCached.git
Cloning into ‘Leaflet.TileLayer.PouchDBCached’…
remote: Counting objects: 39, done.
remote: Total 39 (delta 0), reused 0 (delta 0), pack-reused 39
Unpacking objects: 100% (39/39), done.

Lalu, pastikan kita sudah menginstall bower

09/06/2015_19:02:46,38
E:\GIS\Leaflet>cd Leaflet.TileLayer.PouchDBCached

09/06/2015_19:10:03,50
E:\GIS\Leaflet\Leaflet.TileLayer.PouchDBCached>npm install -g bower
E:\w64\nodejs\bower -> E:\w64\nodejs\node_modules\bower\bin\bower
bower@1.4.1 E:\w64\nodejs\node_modules\bower
├── is-root@1.0.0
├── junk@1.0.1
├── stringify-object@1.0.1
├── chmodr@0.1.0
├── rimraf@2.4.0
├── user-home@1.1.1
├── abbrev@1.0.7
├── archy@1.0.0
├── opn@1.0.2
├── lockfile@1.0.1
├── retry@0.6.1
├── bower-logger@0.2.2
├── q@1.4.1
├── bower-endpoint-parser@0.2.2
├── graceful-fs@3.0.8
├── lru-cache@2.6.4
├── tmp@0.0.24
├── nopt@3.0.2
├── semver@2.3.2
├── p-throttler@0.1.1 (q@0.9.7)
├── mout@0.11.0
├── fstream@1.0.6 (inherits@2.0.1)
├── shell-quote@1.4.3 (array-reduce@0.0.0, jsonify@0.0.0, array-map@0.0.0, array
-filter@0.0.1)
├── mkdirp@0.5.0 (minimist@0.0.8)
├── request-progress@0.3.1 (throttleit@0.0.2)
├── promptly@0.2.0 (read@1.0.6)
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
├── which@1.1.1 (is-absolute@0.1.7)
├── chalk@1.0.0 (ansi-styles@2.0.1, supports-color@1.3.1, escape-string-regexp@1
.0.3, strip-ansi@2.0.1, has-ansi@1.0.3)
├── github@0.2.4 (mime@1.3.4)
├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.8)
├── glob@4.5.3 (inherits@2.0.1, once@1.3.2, inflight@1.0.4, minimatch@2.0.8)
├── insight@0.5.3 (object-assign@2.1.1, async@0.9.2, lodash.debounce@3.1.0, toug
h-cookie@0.12.1, os-name@1.0.3)
├── cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)
├── bower-registry-client@0.3.0 (async@0.2.10, graceful-fs@2.0.3, request-replay
@0.2.0, rimraf@2.2.8, lru-cache@2.3.1, mkdirp@0.3.5, request@2.51.0)
├── tar-fs@1.5.1 (pump@1.0.0, tar-stream@1.1.5)
├── decompress-zip@0.1.0 (mkpath@0.1.0, touch@0.0.3, readable-stream@1.1.13, bin
ary@0.3.0)
├── request@2.53.0 (caseless@0.9.0, aws-sign2@0.5.0, stringstream@0.0.4, forever
-agent@0.5.2, oauth-sign@0.6.0, tunnel-agent@0.4.0, isstream@0.1.2, json-stringi
fy-safe@5.0.1, qs@2.3.3, node-uuid@1.4.3, form-data@0.2.0, combined-stream@0.0.7
, tough-cookie@1.2.0, bl@0.9.4, mime-types@2.0.14, http-signature@0.10.1, hawk@2
.3.1)
├── bower-config@0.6.1 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1, mout@0.9
.1)
├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
├── configstore@0.3.2 (xdg-basedir@1.0.1, object-assign@2.1.1, osenv@0.1.1, uuid
@2.0.1, js-yaml@3.3.1)
├── update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.0, semver-diff@2.0.0,
latest-version@1.0.0)
└── inquirer@0.8.0 (figures@1.3.5, ansi-regex@1.1.1, mute-stream@0.0.4, through@
2.3.7, lodash@2.4.2, readline2@0.1.1, rx@2.5.3, chalk@0.5.1, cli-color@0.3.3)

 

Kemudian, lakukan instalasi dengan bower install:

09/06/2015_19:16:07,65
E:\GIS\Leaflet\Leaflet.TileLayer.PouchDBCached>bower install
bower not-cached https://github.com/Leaflet/Leaflet.git#~0.7.3
bower resolve https://github.com/Leaflet/Leaflet.git#~0.7.3
bower not-cached https://github.com/daleharvey/pouchdb.git#~3.3.1
bower resolve https://github.com/daleharvey/pouchdb.git#~3.3.1
bower download https://github.com/Leaflet/Leaflet/archive/v0.7.3.tar.gz
bower download https://github.com/daleharvey/pouchdb/archive/3.3.1.tar.gz
bower extract leaflet#~0.7.3 archive.tar.gz
bower resolved https://github.com/Leaflet/Leaflet.git#0.7.3
bower progress pouchdb#~3.3.1 received 0.6MB
bower progress pouchdb#~3.3.1 received 0.7MB
bower progress pouchdb#~3.3.1 received 0.9MB
bower progress pouchdb#~3.3.1 received 1.1MB
bower progress pouchdb#~3.3.1 received 1.2MB
bower progress pouchdb#~3.3.1 received 1.3MB
bower progress pouchdb#~3.3.1 received 1.3MB
bower progress pouchdb#~3.3.1 received 1.8MB
bower progress pouchdb#~3.3.1 received 1.9MB
bower progress pouchdb#~3.3.1 received 2.5MB
bower extract pouchdb#~3.3.1 archive.tar.gz
bower resolved https://github.com/daleharvey/pouchdb.git#3.3.1
bower install leaflet#0.7.3
bower install pouchdb#3.3.1

leaflet#0.7.3 bower_components\leaflet

pouchdb#3.3.1 bower_components\pouchdb

 

baru kemudian akses test.html nya …

Sedikit update buat mereka yang bekerja dibawah proxy, agar Anda dapat menjalankan bower dengan proxy, Anda harus membuat dahulu sebuah berkas .bowerrc pada direktori yang sama dengan bower.json

09/06/2015_19:14:58,80
E:\GIS\Leaflet\Leaflet.TileLayer.PouchDBCached>notepad .bowerrc

Tambahkan isi sesuai dengan settingan proxy Anda, kalau saya adalah localhost port 8118, maka seperti ini:

{
“proxy”:”http://127.0.0.1:8118″,
“https-proxy”:”http://127.0.0.1:8118″
}

Kalau tidak, maka Anda akan mendapatkan error kira-kira seperti berikut:

09/06/2015_19:14:17,95
E:\GIS\Leaflet\Leaflet.TileLayer.PouchDBCached>bower install
bower retry Request to https://bower.herokuapp.com/packages/pouchdb fail
ed with ECONNRESET, retrying in 1.7s
bower retry Request to https://bower.herokuapp.com/packages/leaflet fail
ed with ECONNRESET, retrying in 1.4s
bower retry Request to https://bower.herokuapp.com/packages/leaflet fail
ed with ECONNRESET, retrying in 2.3s
bower retry Request to https://bower.herokuapp.com/packages/pouchdb fail
ed with ECONNRESET, retrying in 2.8s
bower retry Request to https://bower.herokuapp.com/packages/leaflet fail
ed with ECONNRESET, retrying in 4.8s
^CTerminate batch job (Y/N)? y

 

Iklan