Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS

© Copyright IBM Corporation 2015

Map-centric mobile apps with Cloudant Geo and LeafletJSRaj SinghDeveloper AdvocateIBM Cloud Data Services

[email protected]: @rajrsinghlinkedin: www.linkedin.com/in/rajrsinghhttp://developer.ibm.com/clouddataservices/

© Copyright IBM Corporation 2015 ©2015 IBM Corporation

CDSMISSION

To provide the best experience for developers to engage and build with a comprehensive set of rich, integrated data services covering content, data and analytics.


Our DBaaS


Components of GIS (Cloudant Geo)

• Spatial Storage Format (GeoJSON)• Spatial Index (R*-tree)• Spatial Query• Spatial Processing (none)


Components of a great mobile mapping app

Global Basemap

API Query: all restaurants X meters from Y that serve Z

Web client framework

Custom data: restaurants


Components of a great mobile mapping app


Basemap tiles• Google, Bing• OpenStreetMap• Mapbox

Web Clients• Leaflet, OpenLayers

• Google, Esri,

Custom data• Cloudant, Esri• PouchDB

Query APIs• OGC standards

• Cloudant, Google, etc.

HTML5/Javascri

pt


Basemap tiles


Custom data

• Any DB with GeoJSON output• Sources

– US Census– Data.gov– https://www.ordnancesurvey.co.uk/business-and-government/products/os-opensp

ace/

– http://www.un.org/earthwatch/data/geodata.html

https://www.ordnancesurvey.co.uk/business-and-government/products/os-openspace/



http://www.un.org/earthwatch/data/geodata.html

http://www.un.org/earthwatch/data/geodata.html


Web client frameworks

• OpenLayershttp://openlayers.org/

• Leaflet.js / MapBox.jshttp://leafletjs.com/https://www.mapbox.com/mapbox.js/api/v2.2.1/

• Esri ArcGIS API for JavaScripthttps://developers.arcgis.com/javascript/


FieldWork: Configuring the app


FieldWork: live demo

https://rajsingh.cloudant.com/fieldwork/_design/fieldwork/index.html


https://developer.ibm.com/clouddataservices/author/rrsingh/ THANK YOU

© Copyright IBM Corporation 2015© Copyright IBM Corporation 2015

References

• Cloudant: http://www.cloudant.com• GeoJSON: http://geojson.org • Leaflet: http://leafletjs.com • OpenLayers: http://openlayers.org • Mapbox: http://mapbox.com • Mapserver: http://mapserver.org • Geoserver: http://geoserver.org • Esri: http://www.esri.com • Turf: http://turfjs.org

http://www.cloudant.com/

http://geojson.org/

http://geojson.org/

http://leafletjs.com/



http://openlayers.org/



http://mapbox.com/

http://mapbox.com/

http://mapserver.org/

http://mapserver.org/

http://geoserver.org/

http://geoserver.org/

http://www.esri.com/

http://www.esri.com/

http://turfjs.org/

http://turfjs.org/

Technology

Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS