Spectrum Spatial (SSA/LIM)

I thought I'd share this custom template html with the group. It makes an image referenced in a tab file field (in this case a book cover) to open directly into the info side panel instead of it being a clickable URL. Thanks go to @Peter van Dijk?  for his help on this.

The template calls in the field titles with a nice neat bold field name. It also calls in Google Street View (note that I have replaced our Google key with ######)

The line that calls in the book cover into the info panel is;

<img ng-src="{{feature.Image.value}}" alt="Description" /></a></b><br/><br/>

This is where the template calls the stored image location and file that is referenced in the field called Image into the left side info panel. Each record in the table has a unique image.

You can test it for yourself at...

https://geo.southwark.gov.uk/connect/analyst/mobile/#/main?overlays=Places%20of%20literary%20interest

<!-- GOOLE CONFIG HERE -->

<div style="" class="customCalloutData" ng-init="

googlekey='######';

">

 <div align="left">

<b>Book:</b> {{feature.Book.value}}</b><br/><br/>

<img ng-src="{{feature.Image.value}}" alt="Description" /></a></b><br/><br/>

<b>Place:</b> {{feature.Place.value}}</b><br/><br/>

<b>About:</b> {{feature.About.value}}</b><br/><br/>

 <b>Borrow this book:</b> <a href="{{feature.Borrow_this_book.value}}" target="_blank" title="click to borrow this book">{{feature.Borrow_this_book.value}}</a></b><br/><br/>

 <input id="{{feature.ID.value}}_X" type="hidden" name="X" value="tbd"><!-- This value will get updtaed in the below javascript-->

 <input id="{{feature.ID.value}}_Y" type="hidden" name="Y" value="tbd"><!-- This value will get updtaed in the below javascript-->

 </div>

    </div>

        <!-- NO NEED TO EDIT -->

        <div style="margin-left:-10px; margin-right:-27px; overflow:hidden; padding-top: 10px;">

                <div style="width: 100%; padding-bottom: 56.25%; position: relative;">

                       <div class='streetviewContainer' onclick="this.onclick=null; $('<iframe>', {src: this.dataset.streetview, frameborder: 0, scrolling: 'no', style: 'border:0; width:100%; height: 100%;', allowfullscreen: true}).appendTo(this);" data-streetview="" style="cursor:pointer; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-position: center; background-size: contain; background-repeat: no-repeat; max-height: 100%;" >

                       <img onload="var point = ol.proj.transform([parseFloat(this.dataset.x), parseFloat(this.dataset.y)], this.dataset.proj, 'EPSG:4326'); var googleParams = 'location='+point[1]+','+point[0]+'&key=' + this.dataset.key; var element = $(this).parent('div'); element[0].dataset.streetview= 'https://www.google.com/maps/embed/v1/streetview?'+ googleParams; element[0].click()" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-key="{{googlekey}}" data-x="{{coord.x}}" data-y="{{coord.y}}" data-proj="{{$root.map.projection}}" width="0" height="0" style="display:block">

                       </div>

                </div>

        </div>  

<!-- END NO NEED TO EDIT -->

        <div align="center">

        <font color="#cccccc" size="1">

                <div id="Location">Streetview - click image to navigate</div>

        </font>

        </div>

</div>

<!-- </html> -->

Stuart,

any chance you can attach your InfoTemplate to the post?

I think that will make it easier for user to replicate it as the formating her eon the site isn't the best for "source code"

Thanks