For instance, in line 265 the plugin dynamically creates a close icon assuming that the image file is in a relative path from the page. This is probably the most egregious example; in lines 17-18 the same assumption is made, although these can be overridden easily by the developer. In many real-world use cases you can't expect that to be true and so we might not want to force the developer to dig through (and then edit) our code to figure out why images are broken.

For the non-customizable icons it may be best to use CSS. We have the same problem about relative images from CSS; I would recommend a build process that takes source images and converts them to data-URI so that the result is extremely portable. Developers who want to override these can do so in CSS but on their own terms, but in meantime when someone is testing the plugin for the first time the experience is not broken.

For customizable icons, we can use CSS defaults, overridden in JS when someone provides an icon to override with. (They can also override in CSS, same as other UI images, if they choose.)

While using Firefox Desktop, searching for a place then selecting it changes the content of the search field to "undefined". It is supposed to put the name of the selected place into the search box.

To Reproduce:

• Use Firefox Desktop (untested in mobile at this point)
• Search for a place using typeahead search
• Explicitly select a result either by using keyboard navigation (which is a nice add) or clicking the result with a mouse

Verified Does Not Occur in:

• iOS MobileSafari
• MacOS Safari
• Chrome Desktop MacOS

Note: Leaflet has an internal template string utility, so adopt Leaflet functionality for this.

Needs broad documentation plus several examples

• Map + search in a button
• Map + search in an expanded searchbox
• Configuring a fullpage map to work at particular breakpoints for an expanded searchbox

Including matching the file structure.

http://leafletjs.com/2013/06/28/leaflet-plugin-authoring-guide.html

And most importantly, keep it simple. Leaflet is all about simplicity.

This should fix the test failures on CircleCI, it's probably testing against 0.7.5 and not v1

Closed state

[Customizable- can be defaulted to open or closed search box]

Click state

1. Box slides open [customizable- opens right or left]
2. Search icon changes color
3. Placeholder/Helper text [customizable]

User starts typing

1. Drop down appears with x auto-complete results
2. 'x' (cancel) button appears as soon as the first letter is typed.
3. Embolden the letters in the results that are part of the user input
4. A 'pin' icon appears for points (poi's, addresses) and a 'globe' icon appears for polygons (cities, neighborhoods) [customizable icons]

Browsing results

1. Browsing with mouse hover or arrow keys, as user views results one by one, fades the map to that result [customizable?]
2. Selected result gets a background color highlight and the icon also changes color [customizable- background color and icons]
3. Results that are points get a pin on the map with a tooltip (tooltip can be closed by clicking the 'x')
4. Results that are polygons just zoom that map to include the polygon in the viewport and no pin is dropped (nice to have- label for the polygon is highlighted)

Panning the map/ Pressing enter or return on a result

1. Panning the map with a highlighted result, collapses the dropdown under the search box and populates the search box with the result highlighted/selected

Clearing results

1. Clicking the 'x' in the search box, it clears the text in the box and the pins on the map (if any)
   
2. (Future) Show recently search results in the dropdown when user first clicks in the search box or clears the search box
   

Most commonly 429s (when you hit the API limit) but also in case of server failure, wrong server endpoint setting, etc

I know we had decided to simplify the mobile UX (#7) during out last discussion by removing the zoom buttons while keeping the search bar visible at all times (by default, with the option to re-enable still in the codebase).

That said, I don't remember if we were going to also remove the zoom buttons for the desktop.

Right now, the user can zoom into a target by clicking, allowing them to increase zoom levels, but they are left without the ability to zoom out.

What do we think about reintroducing the zoom buttons when it's on desktop mode?

Should be an easy config to allow a developer to change whether they're using our plain vanilla Mapzen Search, or running their own Pelias instance somewhere.

when rapidly deleting the input I experience a dropdown rendered with no labels, this does not happen when deleting more slowly.

deleting slowly:

deleting quickly:

$ grep src example.html

    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
    <script src="https://mapzen.com/tangram/tangram.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.1/leaflet-geocoder-mapzen.js"></script>

Leaflet supports

• Chrome
• Firefox
• Safari 5+
• Opera 12+
• IE 7-11

We've got to go back and check all of them.

• Chrome
• Firefox
• Safari
  • Safari 5
  • Safari 6
  • Safari 7
  • Safari 8
• Internet Explorer
  • IE 7
  • IE 8
  • IE 9
  • IE 10
  • IE 11

Hi!
I have added two different geocoders in the same map (I need them to create a travel planner, from point A - the first geocoder - to point B - the second geocoder).
They are one below the other.

The problem is that the list of results that appears below the first geocoder is hidden by the second geocoder. Is there a way to create a sort of order like layers?

Currently, the layers option for the geocoder doesn't affect autocomplete queries:

NOTE: layers is not available for the autocomplete query.

This provides a really strange experience because neither the application developer nor the end user expects results that are not in the layers that are set. However, the autocomplete endpoint does not do layer filtering because it slows down the cache.

Since layers is just sugar for the actual search parameter, and the autocomplete response also includes layers in the feature collection for results, what if we were to filter autocomplete responses on the client-side before rendering the results to UI (or sending to events, etc.)?

There's no requirement (yet) for Leaflet plugins to assume JS module loading systems, but we would play very nice with many projects' build environments if we did. See the ongoing discussion here. Leaflet/Leaflet#2364

I've introduced this on a separate branch (https://github.com/pelias/leaflet-geocoder/tree/v0.0.3) maybe one in which new work happens.

TODO: test this

for easier styling & end use replacement

An option - integer - corresponding to Leaflets zoom levels. Allows user to set a default zoom level when selecting a geocoding result.

Use Case: When a user is zoomed out to the state level, but searches for a small town within the state. (In this case, simply panning to the result does not bring the user to a useful map extent).

example: a globe or a pin

In the current design, a user is left to figure it out for herself that she may tap the search bar again to return to her result list. We can do more to make this more obvious.

But perhaps not yet... We'll revisit.

Opening the demo on a 4 core 3.4GHz system with 16GB RAM and Firefox/Google chrome is a pain:
http://pelias.github.io/leaflet-geocoder/

The browser is stuck. Browser problem?

It should be easy to customize the marker popup content by passing a function to the Geocoder options that takes a Pelias result as an argument and returns an html string or DOM element to be used as the marker popup.

L.control.geocoder( <api_key>, {
    ...
    markersPopup: function( result ) {
        // Create popup content here
        return result.properties.label;
    }
    ...
});

Just playing with adding this in a Tangram demo, which uses Leaflet 0.8-dev. The L.Util. limitExecByInterval method has been renamed to L.Util.throttle. (See CHANGELOG)

Here is my test repo where I just made the change locally:
https://github.com/louh/carousel/blob/pelias-geocoder/lib/leaflet-geocoder/pelias-leaflet-geocoder.js#L267

For demo site, use @tangrams to power the basemap.

Currently it just drops off the bottom of the screen.

• points get a pin on the map with a tooltip (tooltip can be closed by clicking the 'x')
• polygons just zoom that map to include the polygon in the viewport with a highlighted boundary and no pin is dropped (nice to have- label for the polygon is highlighted)

(Could be an option to customize)
As user scrolls through the auto-complete results (without pressing enter), center the map (maybe drop a pin) for each result

Lots of colloquial terms

• drop pin
  -pan to point
• full_width
• expanded
• hide_other_controls

How might we make these (and other) terms clearer?

Including icons, relative sizing, drop shadows, and mobile styling. A basic out of the box implementation of the plugin on vanilla Leaflet should appear as if it were part of Leaflet itself.

If we want to improve on any of the Leaflet defaults and add Mapzen-opinionated UI/ UX on top of it, that should be added as a progressively enhanced demo implementation, not part of plugin core behavior.

As opposed to potentially conflicting with other uses of .pelias-* that may occur on a site that are not in the scope of being a leaflet geocoder plugin.

Closed state

[Customizable- can be defaulted to open or closed search box]

Tap state/ Active state

1. Keyboard slides up with cursor in the box
2. Search icon changes color
3. Placeholder/Helper text [customizable]
4. Deactivate and dim the map background

(Future) Show recently search results in the dropdown when user taps and activates search or clears the search box

User starts typing

1. Drop down appears with x auto-complete results
2. 'x' (cancel) button appears as soon as the first letter is typed.
3. Embolden the letters in the results that are part of the user input
4. A 'pin' icon appears for points (poi's, addresses) and a 'globe' icon appears for polygons (cities, neighborhoods) [customizable icons]

When user collapses keyboard, show the remaining results

User selects a result

1. Result text populates the search box
2. Results that are points get a pin on the map with a tooltip (tooltip can be closed by clicking the 'x')
3. Results that are polygons just zoom that map to include the polygon in the viewport and no pin is dropped (nice to have- label for the polygon is highlighted)
4. Tapping 'x' in the search box clears the search box and the pin (if any) on the map

Ref to Issue3 (#3) only drop pins for results that are POI's and not places

how would you feel about changing the tangram style from 'refill' to 'scene' for the demo page?

I use the demo page at http://pelias.github.io/leaflet-geocoder to do user testing and people always comment on the tiles not being very cartographic ;)

Automate the process of improvements in the future without a lot of overhead of manual testing

How can I get latitude and longitude from the Geocoder?
I want to pass them as var.

Even when the geocoder is already collapsed.

When loading the site over https, many browsers block content that mix script embeds over http when the main request was in https.