Tool: Best examples based on custom elements?

[AmeliaBR]

If we're proposing a markup-based map widget, it would be nice to have examples of existing tools that use an element and attribute API for embedding and customizing maps.

There is of course the community group's own custom element proposal, but it's circular logic to use it as an example!

I've found a few custom elements that are wrappers for the various major maps APIs, but not sure which ones would make a good reference:

• official Google google-map component; looks like it was comprehensive (child elements for markers & so on) but the demos are all broken
• simpler good-map that uses Google
• leaflet-map, another basic map
• mapbox-gl looks fairly comprehensive

[prushforth]

Custom elements are new, so there hasn't yet been a lot of interest in using them for maps. They would be competition with mapping frameworks like OpenLayers and Leaflet, not to mention Google Maps API and similar. I think the Leaflet API is about as close to the metal as anyone has got yet, so my plan for our custom elements is to use that API as a starting model. No mapping frameworks or elements use URLs for content, except ours. This is the next frontier in showing that maps can be standardized, in my opinion. Cheers, Peter

…

On Fri, May 17, 2019, 3:37 PM Amelia Bellamy-Royds ***@***.***> wrote: If we're proposing a markup-based map widget, it would be nice to have examples of existing tools that use an element and attribute API for embedding and customizing maps. There is of course the community group's own custom element proposal <https://github.com/Maps4HTML/Web-Map-Custom-Element>, but it's circular logic to use it as an example! I've found a few custom elements that are wrappers for the various major maps APIs, but not sure which ones would make a good reference: - official Google google-map component <https://www.webcomponents.org/element/GoogleWebComponents/google-map>; looks like it was comprehensive (child elements for markers & so on) but the demos are all broken - simpler good-map that uses Google <https://www.webcomponents.org/element/keanulee/good-map> - leaflet-map ***@***.***/leaflet-map>, another basic map — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#23?email_source=notifications&email_token=AASTBJMETJ2BGZG3NI3WDI3PV4CPPA5CNFSM4HNX4J5KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GUPEQGA>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AASTBJMNSUUC6AA754GU4LDPV4CPPANCNFSM4HNX4J5A> .

[AmeliaBR]

Thanks to some data from Brian Kardell's analysis of HTTPArchive content, it looks like the most popular map viewer custom elements (searching for elements with "map" in the name and excluding sitemap, pagemap, etc.) are:

• <ymaps>, which must be Yandex maps, probably via the React component? It's many times more common than any of the other <*map*> element names that are coming up. (Other than basic <map>.)
• <dealeron-maps>, where DealerOn is a company that makes ready-to-wear websites for car dealerships. No documentation of what that actually looks like inside.
• <ui-gmap-google-map> and <ng-map>, and <ang-map> which are all Angular modules wrapping Google maps in a declarative markup structure.

[Malvoz]

#23 (comment):

No mapping frameworks or elements use URLs for content, except ours. This
is the next frontier in showing that maps can be standardized, in my
opinion.

FWIW <leaflet-map>'s <leaflet-tilelayer> does support the url attribute to display data from external WMS services:
https://leaflet-extras.github.io/leaflet-map/demo.html#layerwms

[prushforth]

Although those look like URLs, they require further processing, and require that the client 'know' that {x} means tile column, and so on. These are assumptions, or coupling that need to be specified or else a mechanism needs to be specified in the media type spec on how to define what those variables 'mean'. This is baked into MapML processing.