https://github.com/keyang/osmap-pg

ordnance survey map phonegap plugin (temp)
https://github.com/keyang/osmap-pg

Last synced: about 1 month ago
JSON representation

ordnance survey map phonegap plugin (temp)

• Host: GitHub
• URL: https://github.com/keyang/osmap-pg
• Owner: Keyang
• Created: 2014-10-03T10:20:35.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-10-09T11:53:23.000Z (over 10 years ago)
• Last Synced: 2024-10-15T15:36:06.191Z (3 months ago)
• Language: JavaScript
• Size: 867 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#Offline map PhoneGap Plugin

This plugin connects to a native implenetation which reads map tiles from a sqlite database. The plugin consists of:

* Native Sqlite DB loader

* Native PhoneGap Plugin

* Js PhoneGap Plugin 

* Leaflet.js 

* Leafletjs Tile plugin 

#Build 

For plugin developers, there is a build-www.py python script to build and generate production version of the plugin.

#Installation

To install the plugin, goto cordova project root folder and run 

```bash

cordova plugins add https://github.com/Keyang/osmap-pg.git

```

The installation will do the following:

* Embed plugin export module to cordova_plugin.js file as like other plugins 

* Generate osmap.js file in the root of www folder 

* Generate osmap.css file in the root of www folder

The generated files will only display in platforms folder once run cordova prepare

#Usage

Once the plugins is installed, we can use it from hybrid app.

##index.html

Add following lines to your cordova project's index.html:

```html

```

the osmap.js will include leaflet.js map library and osmap tile plugin while osmap.css file will introduce the required css for map rendering.

##OSMapTile

OSMapTile is a leaflet.js tile plugin specifically for osmap phonegap plugin.

It is used to retrieve map tiles from osmap phonegap plugin and render it on map.

The usage is very simple:

```Javascript 

var map=L.map("mymap");

var ostileLayer=new L.TileLayer.OSmapTile(options);

ostileLayer.addTo(map);

```

The options are standard leaflet tile layer options which can be found [here](http://leafletjs.com/reference.html#tilelayer).

##Leaftlet.js map 

Once the tile being added to leaflet.js map, it has full functionality of leaflet.js. Leaflet.js API doc can be found [here](http://leafletjs.com/reference.html).

##osmap lib 

osmap is a PhoneGap plugin responsible for all mapping data related activities.

It has following functions:

* Retrive mapping tiles from database based on x,y,z parameter. The x,y,z parameters are following [slippy map tilename](http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames)

osmap is an object attached to browser's window object. It has following functions:

* getMapTile (options, successcb, failcb): this function is called internally inside osmaptilelayer to retrieve tile data.

###getMapTile 

 Get a map tile from PhoneGap plugin returninng base64 encoded PNG image

  params:

```

  options:{

   x:int, x coord

   y:int, y coord 

   z:int, zoom level

  }

```

  successcb: successful callback function(base64encodedimgdata) 

  failcb: failed callback function(error)