Example of how to use divIcon

[MichalBryxi]

To prevent seomeone else stepping on this rake:

Leaflet divIcon seems to only require one parameter: options hash. But the counterpart from ember-leaflet seems to require two arguments and the first one seems to be completely ignored. So to use this helper one can:

import { divIcon } from 'ember-leaflet/helpers/div-icon';

const highlightedIcon = divIcon(undefined, {
  html: `x`,
  className: '', // some other arguments to show the syntax
  iconSize: [24, 40],
  iconAnchor: [12, 40],
});

<template>
  <LeafletMap as |layers|>
    <layers.marker @icon={{highlightedIcon}} />
  </LeafletMap>
</template>

or directly in template via:

import { divIcon } from 'ember-leaflet/helpers/div-icon';

<template>
  <LeafletMap as |layers|>
    <layers.marker @icon={{divIcon false (hash html='x')}} />
  </LeafletMap>
</template>

[miguelcobain]

@MichalBryxi the problem is that you're looking at a div-icon helper. An ember helper's first argument is an array of the positional arguments, and the second is the hash of named arguments.

So, the correct way to use the div-icon helper is

import divIcon from 'ember-leaflet/helpers/div-icon';

<template>
  {{divIcon html="x" className='' iconSize=(array 24 40) iconAnchor=(array 12 40)}}
</template>

In newer ember versions, you can use functions as helpers. So, another option is to use the leaflet function directly:

import { DivIcon } from 'leaflet';

<template>
  {{DivIcon (hash html='x' ...)}}
</template>

I didn't try this last version. It should work, unless leaflet doesn't like the frozen object that hash produces.

So, ember-leaflet's div-icon helper is working as expected.

I think the confusion here was the import { divIcon } from 'ember-leaflet/helpers/div-icon'; import mentioned in the docs.
That import imports the function, not the helper.

To import the helper, it should be import divIcon from 'ember-leaflet/helpers/div-icon';

[MichalBryxi]

Ha! Thanks so much for the fast reply. Yep, I totally followed the guide here which does indeed say:

import { divIcon } from 'ember-leaflet/helpers/div-icon'; 

When I try your first code example, it does work.

In the documentation the sidebar reads: "Helpers -> {{div-icon}}", would it then make sense to fix the import path on that page to give import for helper? And at best also examples of syntax? Heppy to contribute with a PR if yes.

[miguelcobain]

Unfortunately, those API docs are auto-generated from ember-cli-addon-docs. I haven't found a way to make it output the correct path. PRs are welcome!

[MichalBryxi]

Would this PR mean that the documentation would show the "correct" import?