Keyed Info Window Template support

[dlcole]

The dapriett version of this plugin supports keyed info windows, as described in the associated readme:

           <!-- Keyed Info Window Templates -->   
            <maps:mapView.infoWindowTemplates>
                <template key="testWindow">
                    <StackLayout orientation="vertical" width="160" height="160" >
                        <Image src="res://icon" stretch="fill"  height="100" width="100" className="infoWindowImage" />
                        <Label text="Let's Begin!" className="title" />
                    </StackLayout>
                </template>
            </maps:mapView.infoWindowTemplates>

This text is excluded from this repository's readme, and when I attempt to load my map page (which includes such templates) I get the error,

***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught Error: Building UI from XML. @./views/map-page.xml:93:13
> Module 'Template' not found for element 'Template'.
> instanceType is not a constructor

Can keyed info window templates be supported? It would be a big deal if they're not.

[kefahB]

Hi, The Kyed template doesn't work since NS 7 and I did not have the time to investigate it, but try to set it from the js side.

I didi not try it but you can try with those property exposed to the maps

public infoWindowTemplate: string | Template;
public infoWindowTemplates: string | Array<KeyedTemplate>;

marker.infoWindowTemplates =  `<template key="testWindow">
                    <StackLayout orientation="vertical" width="160" height="160" >
                        <Image src="res://icon" stretch="fill"  height="100" width="100" className="infoWindowImage" />
                        <Label text="Let's Begin!" className="title" />
                    </StackLayout>
                </template>`;

[dlcole]

@kefahB - as always, thanks for the prompt response.

Given that mine is a JavaScript project, what should I add to (presumably) map-page.js?

[kefahB]

Yes

[dlcole]

To be more specific:

public infoWindowTemplate: string | Template;
public infoWindowTemplates: string | Array<KeyedTemplate>;

is TypeScript, and is not valid in my JavaScript project. I receive Declaration or statement expected messages.

[kefahB]

You wont use those, you will use them from marker. infoWindowTemplates =YOUR XML TEMPLATE``

marker.infoWindowTemplates =  `<template key="testWindow">
    <StackLayout orientation="vertical" width="160" height="160" >
        <Image src="res://icon" stretch="fill"  height="100" width="100" className="infoWindowImage" />
        <Label text="Let's Begin!" className="title" />
    </StackLayout>
</template>`;

// THEN TRY TO ADD YOUR TEMPLATE

marker.infoWindowTemplate = 'testWindow';

Like I sed, I imagine how it does work and I didn't tested it

[dlcole]

Ah, I understand. I'll play with this and let you know how it goes. Thanks again.

[dlcole]

OK, the good news is that the info window is shown for each type of template. The less-than-good news is that none of the formatting from the .scss file is applied, which would be expected I suppose given we're assigning the template text directly. This is good enough to keep me going but I'm hoping that keyed info window templates is something you can add in the coming weeks. I'll be glad to help with this, at least with the testing.

[kefahB]

@dlcole I'll try to bring a little time to do some stuff on this but I have also a lot of migrations to do and have my business also :)

[dlcole]

@kefahB Any progress on this issue? I'll need to publish my app next month and it would be really great if this could be working. Is there anything I can contribute on my end?

[dlcole]

I investigated this further and got it working. The dapriett version of this plugin includes this warning:

[!WARNING] if you are using NS7 infoWindowTemplate won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :

I followed that example but for keyed info window templates:

var mapView;

export function onMapReady(args) {
  mapView = args.object;

  // Define custom map marker templates
  mapView.infoWindowTemplates =  
  `<template key="infoWindow">
     <StackLayout orientation="vertical" width="250" height="160">
       <Label textWrap ="true" class="info-title" text="{{ title }}" />
       <Label class="info-snippet" textWrap="true" text="{{ snippet }}" />
       <Label class="info-text" textWrap ="true" text="{{ info }}" />
     </StackLayout>
   </template>
   <template key="mapGroupWindow">
     <StackLayout orientation="vertical" width="200" height="100"> 
       <Label class="info-title" textWrap ="true" text="{{ title }}" />
       <Label class="info-date" textWrap="true" text="{{ snippet }}" />
       <Label class="info-since" textWrap ="true" text="{{ info }}" />
       <Label class="info-since" textWrap ="true" text="{{ speed }}" />
     </StackLayout>
   </template>
   <template key="weatherWindow">
     <StackLayout orientation="vertical" width="270" height="120"> 
       <Label textWrap ="true" class="info-title" text="{{ title }}" />
       <Label class="info-snippet" textWrap="true" text="{{ snippet }}" />
       <Label class="info-text" textWrap ="true" text="{{ info }}" />
     </StackLayout>
   </template>`;

This now lets me access and format the various info windows as desired. So, you can use keyed info window templates, you just have to specify them in the mapReady event handler. As such, I'll close this issue.