Thank you!

  • websites

Geolocation with amp-list


If you need more fine-grained geolocation support than provided by the amp-geo extension, you can implement geo-based features with geolocation logic on your backend and amp-list. This adds an additional XHR request but you can mitigate the negative UX effects with a skeleton layout in the placeholder attribute.


Import the amp-list component ...

<script async custom-element="amp-list" src=""></script>

... and the amp-mustache component

<script async custom-template="amp-mustache" src=""></script>

Geo-based search results

amp-list makes a request to a server backend which does IP-based geolocation and returns relevant search results. For this demo, it calls an API to get nearby cities. The backend returns JSON results which amp-list renders with amp-mustache. The backend makes two remote API calls (and also adds 500ms of simulated delay); to mitigate the UX effects of this delay we use amp-list's placeholder to lay out a skeleton.

Since we need to have an initial fixed-size for amp-list we manually calculate that each card is 100 + 15px margin and the title is 16px + 20px margin:

16px + 20px + (5 * (100 + 15px)) = 611px

The placeholder list items largely use CSS to draw the skeleton elements as described in CSS-Tricks. The skeleton includes a tiny blurred map to add to the realism, and that map is also used while <amp-img> loads the actual images to prevent a flash when the placeholder is removed.

You are in

<amp-list class="geolist-preview" width="auto" height="640" layout="fixed-height" noloading src="" binding="no" single-item items=".">
  <template type="amp-mustache" id="amp-template-id">
    <h3>You are in {{location}}</h3>
    <ul class="results">
          <amp-img alt="{{placeName}} Map" noloading layout="fixed" width="150" height="100" src="{{lat}},{{lng}}&zoom=9&size=150x100&maptype=roadmap&key=AIzaSyByT-0aYa-nEF0gGqJHNpEEK1bus00losI">
  <div placeholder>
    <h3>You are in <span class="placeholder"></span></h3>
    <ul class="results">
Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow
Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub