Is there a better way to get a leaflet map on the same line as text in a list?

ionic-v1
1

Hi,

We’re heavy users of the leaflet.js code module with Ionic and it normally works very well. We’re struggling with positioning a series of thumbnail maps so that they stay on the same line as some text. We have no issues with the coding of the maps per se or of the Ionic side, just marrying the two together, so no need to debug our code :smile:

A picture is worth a thousand words, so here’s a mockup we did.

image
Screen Shot 2015-07-30 at 08.28.03.png740×918 102 KB

The use case is that the user will select a set of backup routes to restore back to their device. They will have multiple sets of backups each with one or more routes. The user can only select one backup to be restored and ALL the routes in a backup set are restored, so we keep it simple.

Since we have so little real estate on the mobile we want to have the map thumbnails in line with the text, rather than being at the bottom or the top.

This is a mockup using html tables to position the map. We don’t care if the thumbnail map is right side or left side

image
Screen Shot 2015-07-30 at 08.50.57.png760×828 147 KB 

 <ion-list>
    <ion-item ng-repeat="route in restore.data">
      <table width="100%" border="1">
        <tr>
          <td><leaflet id="mappoi" center="center" height="64px" width="128px" defaults="thumbnail"></leaflet></td>
          <td><b> {{ route.created }}</b> {{ route.contents }}</td>
        </tr>
      </table>
    </ion-item>
  </ion-list>

We initially tried it with the Ionic item thumbnails (http://ionicframework.com/docs/components/#item-thumbnails) and whilst that seems to work with images, it doesn’t like the map directive.

We don’t like the idea of using the table directive to position things inside the cards but can’t find another one that keeps text on the same lines as the maps. Some things also don’t seem to work, such as the border directive in the table. We put that in to see what the table size appears to be.

(We also know about leaflet.js attribution and will be putting the attribution on the page rather than per thumbnail map)

Any suggestions please?

Thanks

Rob

2

We resolved the issue using css. We cannot claim any credit for this, we shamelessly stole it from another answer. We leave it here as somebody else might find this useful.

<ion-item ng-repeat="route in restore.data">
     <div class="post-container">
        <div class="post-thumb">
          <leaflet id="mappoi" center="center" height="64px" width="128px" defaults="thumbnail"></leaflet>
        </div>
        <div class="post-content">
      <h3 class="post-title">{{ route.name }} </h3>
          <p>{{ route.created }}</p>
        </div>
      </div>
</ion-item>

.post-container {
     margin: 20px 20px 0 0;
     border: 5px solid #333;
     overflow: auto
 }
.post-thumb {
   float: left
}
.post-thumb img {
   display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}