field work: map-centric mobile apps with cloudant geo and leafletjs
TRANSCRIPT
![Page 1: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/1.jpg)
© 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/
![Page 2: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/2.jpg)
© 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.
![Page 3: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/3.jpg)
© Copyright IBM Corporation 2015
Our DBaaS
![Page 4: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/4.jpg)
© Copyright IBM Corporation 2015
Components of GIS (Cloudant Geo)
• Spatial Storage Format (GeoJSON)• Spatial Index (R*-tree)• Spatial Query• Spatial Processing (none)
![Page 5: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/5.jpg)
© Copyright IBM Corporation 2015
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
![Page 6: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/6.jpg)
© Copyright IBM Corporation 2015
Components of a great mobile mapping app
© Copyright IBM Corporation 2015
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
![Page 7: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/7.jpg)
© Copyright IBM Corporation 2015
Basemap tiles
![Page 8: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/8.jpg)
© Copyright IBM Corporation 2015
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
![Page 9: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/9.jpg)
© Copyright IBM Corporation 2015
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/
![Page 10: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/10.jpg)
© Copyright IBM Corporation 2015
FieldWork: Configuring the app
![Page 11: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/11.jpg)
© Copyright IBM Corporation 2015
FieldWork: live demo
https://rajsingh.cloudant.com/fieldwork/_design/fieldwork/index.html
![Page 12: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/12.jpg)
© Copyright IBM Corporation 2015
https://developer.ibm.com/clouddataservices/author/rrsingh/ THANK YOU
![Page 13: Field Work: Map-centric mobile apps with Cloudant Geo and LeafletJS](https://reader035.vdocuments.mx/reader035/viewer/2022070518/58e6a0141a28abfd418b45ff/html5/thumbnails/13.jpg)
© 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