Add properties to Marker

[PezCo]

I cant see whether this is supported or not. i would like to be able to add properties to a marker to that when in the onclick can be accessed.

This is i want pop up content that is to complex to fit in the label box provided by maps, so we use a custom pop up block that we will put the content from the marker in.

[Joniff]

Not sure I get you, but you can add a js onClick event whenever the marker is clicked and can write your own code to handle something. See Example 5 near the end of https://github.com/Joniff/Terratype/blob/master/docs/manual.pdf

[PezCo]

Sorry my my initial explanation was poor. My map markers are child items that look like image attached.

i want to be able to use the information in that image to populate a modal on the marker click. As far as i could work out the marker has no knowledge of the node it is on so i cant retrieve the other properties, and even if it did it would not work in nested content as the content doesn't have a node Id

[Joniff]

If I understand you correctly, sounds do-able.

Lets presume the alias of the Terratype map is 'location' and the image of Sheffield is 'image'. Then something like this in your Razor code

@Html.Terratype("location", 
      @<text>
             <div>
                     <img src="@Umbraco.Media(Model.Content.GetProperty("image").Value).Url" />
             </div>
      </text>
 )

Would render the image in the label when the user clicked the map marker.

If your up to something else you can pass the node id of the Terratype map to javacript using

 @Html.Terratype(new Options { Tag = "@Model.Content.Id"}, "location")

  <script>
        terratype.onClick(function (provider, map, marker) {
             // marker.tag contains the Content Node Id
             alert('The content node id clicked is ' + marker.tag);
             // You could write a Ajax call to pass marker.tag back to the server if you wanted something more dynamic
        });
   </script>

I hope this helps

[PezCo]

Thanks option one wouldn't work in my situation because the design means that we cant use the google map label.

Option 2 would potentially work, But what i think would be helpful is to be able to do this.

@Html.Terratype(new Options { Tag = "@Model.Content.Id" ,
Data = {
"content" : '@Html.Raw(Model.Content.GetProperty("content").Value)',
"image" : '@Umbraco.Media(Model.Content.GetProperty("image").Value).Url',
"size": '@Model.Content.GetProperty("size").Value',
etc...
}}, "location")

  <script>
        terratype.onClick(function (provider, map, marker) {
         alert(marker.Data.content);
         alert(marker.Data.image);
        // now we can use umbraco content in javascript anyway we want
        });
   </script>

[Joniff]

Well you only have the Tag field of Options to store your info. You could put it all in a Json blob and extract it whenever the click event is raised.

 @Html.Terratype(new Options { Tag = "{
       'content' : '@Html.Raw(Model.Content.GetProperty("content").Value)',
       'image' : '@Umbraco.Media(Model.Content.GetProperty("image").Value).Url',
       'size': '@Model.Content.GetProperty("size").Value'}"}, "location")

 <script>
    terratype.onClick(function (provider, map, marker) {
       var data = JSON.parse(unescape(marker.tag))
       alert(data.content);
       alert(data.image);
       // now we can use umbraco content in javascript anyway we want
    });
 </script>

EDIT: You have made me think of whether I can extend the Tag field to allow dynamics (Like you did for Data field in your example). This maybe possible, and I might to this in a future release.

[PezCo]

If that works

var data = JSON.parse(unescape(marker.tag)

Is the line i was missing as Tag only took in a string i overlooked this option. Thanks for the help i will close this issue as what i wanted can already be done.