AMP
  • websites

Geolocation with amp-list

Introduction

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.

Setup

Import the amp-list component ...

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

... and the amp-mustache component

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></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="https://caramel-wolf.glitch.me//location-specific-results.json" binding="no" single-item items=".">
  <template type="amp-mustache" id="amp-template-id">
    <h3>You are in {{location}}</h3>
    <ul class="results">
      {{#results}}
        <li>
          <amp-img alt="{{placeName}} Map" noloading layout="fixed" width="150" height="100" src="https://maps.googleapis.com/maps/api/staticmap?markers={{lat}},{{lng}}&zoom=9&size=150x100&maptype=roadmap&key=AIzaSyByT-0aYa-nEF0gGqJHNpEEK1bus00losI">
          </amp-img>
          <p>
            <strong>{{placeName}}</strong><br>
            {{adminName1}}<br>
            {{countryCode}}
          </p>
        </li>
      {{/results}}
    </ul>
  </template>
  <div placeholder>
    <h3>You are in <span class="placeholder"></span></h3>
    <ul class="results">
      <li></li><li></li><li></li><li></li><li></li>
    </ul>
  </div>
</amp-list>
هل تحتاج إلى مزيد من التوضيح؟

إذا لم تكن الإيضاحات الموجودة في هذه الصفحة تُجيب على جميع أسئلتك، فلا تتردد في التواصل مع مستخدمي AMP الآخرين لمناقشة حالة الاستخدام المحددة لديك بالضبط.

الذهاب إلى Stack Overflow
هل هي ميزة غير موضحة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub