Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Darren Wilson 238 posts 646 karma points
    Aug 25, 2017 @ 12:24
    Darren Wilson
    0

    Adding an image layer to map

    Hi Jonathan,

    Quick question - I'm trying to add a PNG image later showing some additional features on the map. However the instrution from Google is a bit beyond me - would you know how to add this?

    https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes

    Thanks in advance. Darren

  • Darren Wilson 238 posts 646 karma points
    Aug 25, 2017 @ 13:01
    Darren Wilson
    0

    Actually - this is a simpler method:

    https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple

    Just need a pointer in the right direction - my template code looks like this:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.MapPage>
    
    @using Terratype;
    
    @using ContentModels = Umbraco.Web.PublishedContentModels;
    
    @{
    
    Layout = "SiteMaster.cshtml";
    
    }
    
    
    
    <script>
    
    var historicalOverlay;
    
        var imageBounds = {
          north: 40.773941,
          south: 40.712216,
          east: -74.12544,
          west: -74.22655
        };
    
        historicalOverlay = new google.maps.GroundOverlay(
            'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
            imageBounds);
        historicalOverlay.setMap(map);
      }
    

    @Html.Terratype(new Options     
    
    {         
    
    Provider = new Terratype.Providers.GoogleMapsV3()         
    {             
        Variety = new Terratype.Providers.GoogleMapsV3.VarietyDefinition()             
        {                 
            Satellite = false             
        }         
    },         
    
        Height = 600,         
        MapSetId = 1,         
        Zoom = 11,         
        Position = new Terratype.CoordinateSystems.Wgs84("59.05609, -2.99102")     }) 
    
    @foreach (var record in Model.Content.NestedMaps)
    {
        var name = record.GetPropertyValue<string>("locationTitle");
    
        var desc = record.GetPropertyValue<string>("locationDescription");
    
        var map = record.GetPropertyValue<Terratype.Models.Model>("googleMapLocation");
    
        @Html.Terratype(new Options { MapSetId = 1 }, map,             
            @<text>                 
                <h3 style="margin-top:10px;">@name</h3>
                <p>@desc</p>          
            </text>         
        )     
    }
    

    Cheers Darren

  • Jonathan Richards 288 posts 1742 karma points MVP
    Aug 29, 2017 @ 08:30
    Jonathan Richards
    0

    Hi Darren,

    Right now there is no way to interact with the client side Google Map using javascript, without changing the Terratype.GoogleMapsV3.Renderer.js file.

    This means you can't add a GroundOverlay to the map.

    Lars asks in this thread for access too, and I have added it to my roadmap, and will hopefully be able to add something when I get a free development day.

    Sorry for the lack of solution right now. Its either stop using Html.Terratype() command in your razor and roll your own Javascript Google Map code, or wait until I write something / send me a PR with relevant code

    Jonathan

  • Darren Wilson 238 posts 646 karma points
    Aug 29, 2017 @ 08:43
    Darren Wilson
    0

    Thanks Jonathan,

    I'll have a look at adding that functionality into your JS file - though I have no idea where to start ha ha.

    Darren

  • Darren Wilson 238 posts 646 karma points
    Sep 05, 2017 @ 09:44
    Darren Wilson
    0

    No worries btw - this is an amazing package!

  • Darren Wilson 238 posts 646 karma points
    Sep 05, 2017 @ 09:46
    Darren Wilson
    0

    Actually, I do have another problem. I've added my own icon, but I'm having an issue with the editor panel - basically, it's disappeared. I can't change any of the configuration details - they are all missing.

    See console for errors.enter image description here

    Cheers Darren

Please Sign in or register to post replies

Write your reply to:

Draft