New Custom Map UI - GeoName Search

[AliyanH]

Added a new Custom map Application (GeoName Search) Which uses the GeoName API to search for Canadian Locations to map on the mapml-viewer

[ahmadayubi]

The <layer-> element has a focus() method that allows you to focus a layer (zoom the bounds in/out as much as possible while still keeping bounds inside the map's view). It would be used as follows

document.querySelector("layer-").focus();

The function code can be found at
https://github.com/Maps4HTML/Web-Map-Custom-Element/blob/14375f26c641a03c74cb798856d63a9c232caa27/src/layer.js#L317

I'm not sure if you need it at this point but incase you were looking for it I thought I'd post it here.

[ahmadayubi]

Everything works as expected. Some comments on consistency are:

Function names follow different conventions throughout:

• GetZoomExtent() uses camel case
• map_pane() is separated using underscore
• geojson2mapml() uses neither of the two

For CSS class selectors I think the convention is to use - instead of _. Although it makes no functional difference.

Functionally everything looks good, and it's also a interesting demo.

[prushforth]

Have only played with application so far, so have yet to review code, but I have a few suggestions:

Functionality suggestions:

• My first suggestion for improving the application is to try to use it with only your keyboard. This step may set you up to then listen to it with NVDA, because the focus order of the page is really important for screen reader users. This may be a new experience for you, but highly recommended for all of us mappers.

• Type <place name> into place name search input, hit <Enter> - nothing happens, but a search should be performed IMO.

• Tab to get to Search button, hit <Enter>, list of place names appears. Focus should be on the list of place names, perhaps the first one selected.

• Hit <Enter>, should add the highlighted place to the map IMO.

• As you add the place to the map (by selecting it /hitting <Enter>), IMHO the previous place names should be removed from the map, and the layer- renamed (label) to the place you just added.

• I’m not sure how to move the focus from the select list of names to the map when you add the place, but I think we should do that, potentially triggering the event that expands the properties popup, with the popup ‘paging’ controls focused.

Code suggestions:

The georeferencing difference between OpenStreetMap and the GeoNames API results are quite shocking. We should try to use it with the Canvec service, I think https://geogratis.gc.ca/mapml/en/cbmtile/canvec/ see below

[Malvoz]

Are we concerned with accessibility in these custom UIs?

There is no established pattern for a search results widget in the ARIA Authoring Practices, though there are some notable issues with the UI, that can be improved easily:

• <div class="search"> should have (or replace the class with) role="search"
• input should have:
  • type="search"
  • an appropriate label and/or placeholder (e.g. placeholder="Locations in Canada")
  • maybe autocomplete="off" - I get unrelated input suggestions
• <div id="results_count"> should be <output id="results_count">
• Each <div class="result"> should have
  • role="button"
  • tabindex="0"

[Malvoz]

Are we concerned with accessibility in these custom UIs?

I commented at the same time as Peter, I think the answer is yes 😄

[prushforth]

We should try to use it with the Canvec service, I think https://geogratis.gc.ca/mapml/en/cbmtile/canvec/

Does not make much difference. The misfit can probably be explained by a colleague; I will enquire.

[AliyanH]

Thanks all for the extremely valuable comments. I'll make the code more consistent, work on implementing the suggestions left and also improve the UI. Accessibility is a new experience for me so thanks for all the suggestions which I completely overlooked! I'll get set up with NVDA and try to make it more friendly for screen reader users.

[ahmadayubi]

It looks good overall, I'm not sure how polished of a UI is required being that it is an experiment rather than a finished product. So I left out comments on margins and padding among the components on the page.

[ahmadayubi]

Looks good overall, worked well for me.

[Malvoz]

There is one issue which is not related to this PR but surfaces here (also Maps4HTML/MapML.js#256) due to the fact that it is the leaflet container that is the focusable component and not the map element itself; after keyboard users press enter when a location item is focused in the results list they must tab once again (how'd they know?) to be able to pan/zoom.

[prushforth]

This is a great start, and just fills me with ideas in all directions. Let's merge this and improve over time.