Home > Lift > Scala Lift Example Using Google Maps

Scala Lift Example Using Google Maps

After much searching I was unable to find any up to date example of simply using the Google Maps API with Scala Lift.

So, Cronus was born https://github.com/joestein/cronus to be just this.

I started out with the sample lift basic project (the HelloWorld one that sets datetime) as I figured this was most familiar to folks starting out.  Then made a few discrete changes to facilitate the server creating some locations and having them drawn on the client.

This all starts in src/main/webapp/index.html which has the JavaScript for the GoogleMap API and the div tag the map that gets drawn on.

  <body class="lift:content_id=main" onunload="GUnload()">
		<script src="http://maps.googleapis.com/maps/api/js?v=3.4&sensor=false&language=en" type="text/javascript"></script>
		<script type="text/javascript">

		function drawmap(locations) {
		    var myOptions = {
		           zoom: 12,
		           mapTypeId: google.maps.MapTypeId.ROADMAP
		    };
		    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		    initialLocation = new google.maps.LatLng(locations.loc[0].lat, locations.loc[0].lng);
		    map.setCenter(initialLocation);
		    for(i=0; i<locations.loc.length; i++) {
		       var point = new google.maps.LatLng(locations.loc[i].lat,locations.loc[i].lng);

		       var marker = new google.maps.Marker({
		                                    position: point,
		                                    title: locations.loc[i].title });
		       marker.setMap(map);
		    }      
		}

		</script>
      <fieldset>
	    <legend>&nbsp;&nbsp;Cronus&nbsp;&nbsp;</legend>
	      <p valign=center align=center>
		<span class="lift:helloWorld.howdy">
			<div id="map_canvas" style="width: 700px; height: 480px"></div>
		</span>
	      </p>
	  </fieldset>
	</div>
  </body>

As you can see function drawmap(locations) loops through the locations passed in (assuming the first one is the one to center on it).  This paramater is an Array of JSON object(s) which we generate on the server and pass it into this client side function.

The server side snippet (assuming you know enough Lift that this make sense) is called from the span lift:helloWorld.howdy

The snippet is implemented in src/main/scala/code/snippet/HelloWorld.scala

class HelloWorld {

  // replace the contents of the element with what map to render
  def howdy = renderGoogleMap()

  // converts a the location into a JSON Object
  def makeLocation(title: String, lat: String, lng: String): JsObj = {
    JsObj(("title", title),
      ("lat", lat),
      ("lng", lng))
  }

   // called by renderGoogleMap which passes the list of locations 
   // into the javascript function as json objects
  def ajaxFunc(locobj: List[JsObj]): JsCmd = {
    JsCrVar("locations", JsObj(("loc", JsArray(locobj: _*)))) & JsRaw("drawmap(locations)").cmd
  }

  // render the google map
  def renderGoogleMap(): NodeSeq = {
    // setup some locations to display on the map
	val locations: List[JsObj] = List(makeLocation("loc1","40.744715", "-74.0046"),makeLocation("loc2","40.75684", "-73.9966"))
	
	// where the magic happens
    (<head>
      {Script(OnLoad(ajaxFunc(locations)))}
    </head>)
  }
}

The entry point howdy() then calls renderGoogleMap() which sets up 2 points to plot on the map. These points are setup through the makeLocation() function to properly format the JSON objects. Then an ajax call is made so that drawmap(locations) is executed on the client side once the page loads.

A demo application is up and running @ CloudBees http://liftgooglemapexample.allthingsscala.cloudbees.net/

/*
Joe Stein
Twitter: @allthingsscala
Connect: On Linked In
*/

About these ads
Categories: Lift
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: