• Save
Grails : Ordr, Maps & Charts
Upcoming SlideShare
Loading in...5
×
 

Grails : Ordr, Maps & Charts

on

  • 1,884 views

 

Statistics

Views

Total Views
1,884
Views on SlideShare
1,870
Embed Views
14

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 14

http://www.slideshare.net 11
https://www.linkedin.com 2
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Welcome everybody! I&#x2019;m going to talk about Google Maps & Charts used in Ordr.nl <br /> Ordr.nl is a website for making group orders simple. <br />
  • Ordr.nl.. It all started with french fries <br />
  • But first let me introduce my self! <br /> <br /> I&#x2019;m Henk Jurriens, a Java developer at Profict and currently working in a scrum team for the &#x201C;Postcode Loterij&#x201D; <br /> <br /> Next to Java, I&#x2019;m also interested in Grails & Groovy, Scala and web techniques like Google Maps, Charts & Wave <br /> <br />
  • Every week we have a Fast Food Friday at Profict. <br /> &#xA0; <br /> We&#xA0; order french fries, krokets etc. <br /> But every friday we had a problem : Who is going to collect the orders and will be the one going to the snackbar? <br /> <br /> So we had a business case and our own company community project : Ordr was born! <br /> <br /> <br />
  • Ordr is a tool for making group orders. <br /> &#xA0; <br /> You can use it for ordering food, t-shirts...etc <br /> <br /> Select a group <br /> Select an event <br /> Place an order <br /> <br />
  • Ordr is developed in Grails and Groovy <br /> <br /> Grails is a high-productivity web framework based on the Groovy language. Groovy is a object-oriented language alternative for Java platform <br />
  • But it&#x2019;s time for Google technologies! <br /> <br /> I&#x2019;ll start with Google Maps <br />
  • sign up for a Google Maps API <br /> <br /> <br /> <br />
  • <br />
  • <br />
  • <br />
  • But how can we put our events on a map? <br /> <br /> GDownloadUrl is for a downloading a xml file and the function GXML is for parsing the xml data <br /> <br /> <br />
  • first we create a XML file with markers... <br />
  • with the function createMarker you creates a mark and put is on the map with addOverlay. <br /> <br /> for showing a info window, you use addListener and opInfoWindowHTML <br /> <br />
  • this is the result! <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • You can make beautifull charts with the Google Visualization API <br />
  • a pie chart <br />
  • <br />
  • <br />
  • <br />
  • <br />

Grails : Ordr, Maps & Charts Grails : Ordr, Maps & Charts Presentation Transcript

  • Ordr.nl Maps, Charts
  • Maps <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault(); } } </script>
  • Maps <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body>
  • Maps
  • Maps
  • Maps • GDownloadUrl • GXML
  • Maps <markers> <marker lat="52.27079057331068" lng="5.13885498046875" name="techCC" date="25-03-2009" description="techCC West" address="Cornelis Lelylaan 57, Deventer, the Netherlands"/> <marker lat="52.124580" lng="6.027374" name="techCC" date="28-09-2009" description="techCC september" address="Hoofdweg 87, Loenen"/> </markers>
  • Maps • map.addOverlay • createMarker(latlng, number,name, date,description, address) • GEvent.addListener • map.openInfoWindowHtml
  • Maps
  • Maps panoramaOptions = { latlng:headQProfict }; myPano = new GStreetviewPanorama(document.getElement ById("map_canvas"), panoramaOptions);
  • Maps
  • Maps map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLn(42.351505,-71.094455), 15); directionsPanel = document.getElementById("route"); directions = new GDirections(map, directionsPanel); directions.load("from: ${adresVan} to: ${adresNaar}");
  • Maps
  • Charts • Google Visualization API
  • Charts
  • Charts var dataPie = new google.visualization.DataTable(); dataPie.addColumn('string', 'Article'); dataPie.addColumn('number', 'Count'); dataPie.addRows(${artikelen.size()}); <g:each status="i" in="${artikelen}" var="item"> dataPie.setValue(${i}, 0, "${item.naam}"); dataPie.setValue(${i}, 1, ${item.aantal}); <g:set var="totaal" value="${totaal + item.aantal}"/> </g:each>
  • Charts // Create and draw the visualization. new google.visualization.ColumnChart (document.getElementById('visualization1')).draw(da ta, { is3D: true});
  • Charts
  • Demo