The container

Think of your map as a set of layers inside a container. Your main container will be the component{{leaflet-map}}. This component creates the map container where your tiles, vectors and markers will be added to. Let's see how it looks:

This example looks "broken", but that is intended. Please keep reading.

{{#leaflet-map lat=lat lng=lng zoom=zoom}}
  {{!-- Specify child layer components here --}}
{{/leaflet-map}}
export default Ember.Controller.extend({
  lat: 45.519743,
  lng: -122.680522,
  zoom: 10
});

Notice that we specified the center of the map and its zoom level passing regular properties to the component, bound to the controller. You can check what options each component supports in the "Components" section of the docs. Here lat, lng and zoom are options that the component {{leaflet-map}} supports.

Reminder: The leaflet map container needs to be styled to have some size. If you don't see any container at all, that's probably because you forgot to style it. You can target leaflet containers in css using the .leaflet-container class or providing an id or class attribute in your {{#leaflet-map component.

Ok, we have a leaflet default container, but it's empty. That won't get us anywhere, but this is expected since we never specified any child layers, right? Let's see how to do it.