perliedman / leaflet-routing-machine

Control for routing in Leaflet
https://www.liedman.net/leaflet-routing-machine/
Other
1.08k stars 350 forks source link

Enable customization of geocoder result HTML #484

Closed quinnchr closed 6 years ago

quinnchr commented 6 years ago

This PR adds a geocoderResult option which allows you to pass a function to customize the HTML that is used in the results list. If the option is not provided it will default to the current HTML (a single text node).

The original motivation for this was to strip the country name from the results, but this allows you to customize however you wish. For example:

    geocoderResult: (result) => {
      let container = L.DomUtil.create('div');
      let address = L.DomUtil.create('div', 'address', container);
      let region = L.DomUtil.create('div', 'region', container);

      let make = (el, key) => {
        let span = L.DomUtil.create('span', key);
        let text = result.properties[key];

        if (text == undefined || text == '') {
          return;
        }

        span.appendChild(document.createTextNode(text));
        el.appendChild(span);
      };

      ['address', 'text'].map(key => make(address, key));
      ['place', 'region', 'postcode'].map(key => make(region, key));

      return container;
    }
  })

Before: pr-before

After: pr-after

quinnchr commented 6 years ago

Thanks for taking the time to review! I fixed the issue you pointed out and updated the naming as suggested.

perliedman commented 6 years ago

Thanks, great addition! 👍