How to add action to map area in ember.js?

@addison 

To add an action to a specific area on a map in Ember.js, you can use the Ember Leaflet add-on, which provides a way to integrate the Leaflet mapping library with Ember.js.

Here's a general outline of how you can add an action to a specific area on a map using Ember Leaflet:

1. Install Ember Leaflet add-on: First, you need to install the Ember Leaflet add-on by running the following command in your Ember.js project directory:

1

ember install ember-leaflet

1. Define a map component: Create a new Ember component to represent the map in your application. You can define this component using the following command:

1

ember generate component map-container

1. Add the map in the component template: In the template file of your map component (e.g., app/templates/components/map-container.hbs), use the {{leaflet-map}} component provided by Ember Leaflet to render the Leaflet map:

1
2
3

{{#leaflet-map lat=51.505 lon=-0.09 zoom=13 as |layers|}}
  {{layers.tilelayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}}
{{/leaflet-map}}

1. Add an action to a specific area on the map: To add an action to a specific area on the map, you can use the {{leaflet-draggable-marker}} component provided by Ember Leaflet. This component allows you to create a draggable marker on the map that triggers an action when clicked.

In the template file of your map component, add the following code to define a draggable marker and attach an action to it:

1
2
3

{{#leaflet-draggable-marker lat=51.505 lon=-0.09 draggable=true onClick=(action 'markerClicked')}}}
  This is a draggable marker
{{/leaflet-draggable-marker}}

1. Handle the action in the component or controller: In the corresponding component or controller file (e.g., app/components/map-container.js), define the markerClicked action to handle the click event on the draggable marker:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import Component from '@ember/component';

export default Component.extend({
  actions: {
    markerClicked() {
      // Add your action logic here
      console.log('Marker clicked!');
    }
  }
});

With these steps, you should be able to add an action to a specific area on the map in your Ember.js application using the Ember Leaflet add-on. Feel free to customize the map component and the marker as needed based on your application requirements.