Copied to clipboard

Flag this post as spam?

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


  • Anja 13 posts 118 karma points
    Oct 06, 2017 @ 12:02
    Anja
    1

    Styling labels

    Hi,

    currently the labels inserted in a map have a border/spacing around the main content; mineeunfortunately the divs responsible have no id or class. How can I get rid of them? I'd like a look like the current labels on google maps. google

    Regards

    Anja

  • Jonathan Richards 288 posts 1742 karma points MVP
    Oct 07, 2017 @ 10:26
    Jonathan Richards
    0

    Hi Anja,

    Short answer:

    Nothing that doesn't look like a hack, or require you to fiddle.

    1. You can try adding a css style that targets

      .gm-style > div > div:nth-child(3) > div:nth-child(4) > div > div > div:nth-child(2)
       {
          margin:0px;
          padding:0px;
       }
      

      Found as a comment in stackoverflow

    2. Use negative margins when rendering your own label

              @Html.Terratype(Model.MyMap,
              @<text>
                  <div style="margin:-20px">My Label here</div>
              </text>
          )
      

    I've not tried either solution, and I can imagine you will need to fiddle more. Also the close button will need to be sorted somehow.

    Long answer:

    Right now, I don't have an easy way to style/remove the border area around each label on rendered Terratype maps. Currently there is only one label style called Standard which renders the label using whatever is the standard for that map provider; so in Google Maps case using Info Windows. I really do want to add more label styles into Terratype, its just about getting free time to write.

    I did start a Plain label style, that would have been perfect for you, but found it was slightly more difficult than I was originally expecting, so I stopped development. Knowing that people, you in this case, would like it, helps to gauge what is important to real developers and what I think is pretty when writing Terratype.

    Sorry for the lack of a good answer

    Cheers

    Jonathan

  • Anja 13 posts 118 karma points
    Oct 09, 2017 @ 12:30
    Anja
    1

    Hi Jonathan,

    the exact css didn't work, but let me on the right path; this worked for me:

    .gm-style-iw {
        top:20px !important;
        left: 0px !important;
    }
    .gm-style-iw + div {
        top: 30px !important;   
    } 
     .gm-style > div > div:nth-child(4) > div:nth-child(4) > div {
            height:86px !important;
    }
     .gm-style > div > div:nth-child(4) > div:nth-child(4) > div > div > div:nth-child(2) {
            height:86px !important;
            top:20px !important;
    }
     .gm-style > div > div:nth-child(4) > div:nth-child(4) > div > div > div:nth-child(4) {
            height:86px !important;    
            top:20px !important;
    }
    

    Thanks!

Please Sign in or register to post replies

Write your reply to:

Draft