Development

Using EmberLeaflet with Google Maps

archivedauthor —

last updated January 23, 2014

I recently thought about what kind of Ember component I could spend some time hacking away on and settled on a quick and dirty component to simply overlay some Leaflet markers on a Google map tile overlay.

A quick GitHub search pumped the brakes as I stumbled upon the gem that is EmberLeaflet. You can find plenty of great examples out there for tossing in EmberLeaflet overlays onto your maps, namely on their own GitHub.io page — surprisingly, though, I couldn’t find a great one for using Google Maps.

Thus, this blog (hopefully).

What do you need?

First and foremost, you’re going to want to toss in the libraries you’ll need to hack out your Hello World EmberLeaflet app:

Or if you prefer the quick and dirty bower install:

"dependencies": {
    "ember": "~1.3.0-beta.4",
    "ember-data": "~1.0.0-beta.4",
    "ember-leaflet": "master",
    "handlebars": "~1.3.0",
    "leaflet-plugins": "1.0.1",
    "jquery": "~2.0.3",
  }

The only file you’ll care about in the leaflet-plugins bower directory, is the Google.js file under /layer/tile.

You’ll also want to go ahead and toss in the leaflet.css file under bower_components/leaflet-dist/leaflet.css

Now we’re ready for the ember piece.

Ember Scaffolding

If you wanted to just jump right ahead and look at the full example, it’s all up on GitHub

I’m gonna go ahead and keep it simple, but feel free to peruse the repo for whatever I’ve omitted.

First, we need to set up our data for the L.Marker – which I’ve chosen to just place in our PlacesController as a property. Though, in the real world with presumably a JSON api, you’d want to put this in the PlacesRoute. Enough of that – the controller:

App.PlacesController = Ember.ArrayController.extend({
  zoom: 4,
  center: L.latLng(40.714, -74.000),
  content: [
    { location: L.latLng(40.714, -74.000) },
    { location: L.latLng(45.714, -73.000) },
    { location: L.latLng(43.714, -72.000) }
  ]
});

A few notes on the controller above:

Content needs to be in the format of an array of objects with location as the key and the value being a L.latLng object
You must initialize your map with a default zoom level

We need to set up the EmberLeaflet.MarkerCollectionLayer to bind to the content in our controller:

App.MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
  contentBinding: "controller"
});

Next – we need to define our custom Google Maps L.TileLayer as an extension of the EmberLeaflet.Layer:

App.GoogleMapLayer = EmberLeaflet.Layer.extend({
  _newLayer: function() {
    return new L.Google('ROADMAP');
  }
});

There’s likely a lot more you can do to customize your Leaflet tile layer, but for our purposes, I only chose to implement the _newLayer function which returns a Leaflet Google maps tile layer courtesy of leaflet plugins

Next up, we need to define our custom map view:

App.MapView = EmberLeaflet.MapView.extend({
  childLayers: [
    App.GoogleMapLayer,
    App.MarkerCollectionLayer
  ]
});

Finally, we need to spit out our map into the /places template:

You’re done.

Tandem is innovation firm in Chicago and San Francisco with practice areas in custom software development, mobile and web application development.

archivedauthor