Adding layers

A map is only interesting with layers to represent some information. The most obvious layer you will probably want is the tile layer. In fact it is so obvious that we tend to forget it is a layer like any other.

Ember-leaflet provides the {{tile-layer}} component that enables you to create tile layers. This is raster data, so you'll need a tile layer server that provides them for you. Here are some free tile layer servers you can use. Let's use some cool tiles from CartoDB and see how it looks.

{{#leaflet-map lat=lat lng=lng zoom=zoom}}
  {{tile-layer url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}
{{/leaflet-map}}
export default Ember.Controller.extend({
  lat: 45.519743,
  lng: -122.680522,
  zoom: 10
});

Neat. We have tiles, can move the map around and have the default leaflet controls. Not bad for three lines of code. Let's now try to add some markers in it.

{{#leaflet-map lat=lat lng=lng zoom=zoom}}

  {{tile-layer url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}

  {{#marker-layer location=emberConfLocation}}
    {{#popup-layer}}
      <h3>The Oregon Convention Center</h3>
      777 NE Martin Luther King Jr Blvd<br>
      Portland, OR 97232
    {{/popup-layer}}
  {{/marker-layer}}

  {{#marker-layer location=hotel}}
    {{#popup-layer}}
      <h3>Hotel</h3>
    {{/popup-layer}}
  {{/marker-layer}}

{{/leaflet-map}}
export default Ember.Controller.extend({
  lat: 45.519743,
  lng: -122.680522,
  zoom: 10,
  emberConfLocation: [45.528298, -122.662986],
  hotel: [45.530891, -122.655504]
});

So, there are two important things to notice here:

  1. We now used a different notation to represent the coordinates. Instead of using lat and lng we used a [lat, lng]. You can use these two notations interchangeably.
  2. Did you notice how we used {{popup-layer}} inside {{marker-layer}}'s block to specify our popup text? Go ahead and click the markers. It feels Ember and it feels natural. Why not a form in a popup? A component? Why not {{outlet}}? Possibilities are endless.