Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • alex 6 posts 38 karma points
    May 25, 2015 @ 11:37
    alex
    0

    How to render GridMap in page content

    Hello,

    I am trying to insert this package into a content page, but I only can show the plain text with the info I've introduced in backoffice:

    { "name": "1 column layout", "sections": [ { "grid": 12, "rows": [ { "name": "test1", "areas": [ { "grid": 4, "allowAll": false, "allowed": [ "gridMaps" ], "controls": [ { "value": { "latitude": 78.5465, "longitude": -6.654654, "zoom": 6 }, "editor": { "name": "GridMaps", "alias": "gridMaps", "view": "/App_Plugins/GridMaps/Views/gridmapsgrideditor.html", "render": "/App_Plugins/GridMaps/Render/GridMapsGridEditor.cshtml", "icon": "icon-location-nearby", "config": { "defaultLat": 78.5465, "defaultLng": 6.654654, "defaultZoom": 6 } } } ] } ], "id": "fb5df6c8-ffdd-f205-287b-4c82a3720de2" } ] } ] }

    I've configured to insert GridMaps as a control in row Grid

    I am using: Umbraco version 7.2.5 assembly: 1.0.5610.18894

    What else I have to do?

    Thanks!

    Copy Link
  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    May 25, 2015 @ 12:41
    David Brendel
    0

    Hi alex,

    if you allowed the grid editor in your grid data type and you can use it in the content page then everything should be setup correctly.

    The only necessary thing you have to do in frontend is to add a reference to the google js api:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    But I wonder why it outputs the grid configuration alongside the editor stuff. That is not normal.

    I have tested the package in 7.2.5 and it had worked for me.

    Do you use something special to render the grid contents on frontpage?

    Do you see any errors in the broswer developer console?

    Regards

    David

    Copy Link
  • alex 6 posts 38 karma points
    May 25, 2015 @ 13:20
    alex
    0

    Hi!

    Thanks for your quick response. These are the steps I've followed:

    1. Add <scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> into masterpage
    2. Create a new Data Type called "My Grid Layout" which "Property editor" is "Grid Layout"
    3. Add new row configuration into "My Grid Layout" and set "GridMaps" as allowed control editor
    4. Add new "Generic Properties" to Document Type and define its type as "My grid Layout"
    5. Modify the Document Type Template adding "@Umbraco.Field("Map")", where Map is the tab configured as GridMap
    6. Create a new content page based on the previous Document Type and configure the map tab with a valid address.
    7. When I navigate to the page I've just created, I can't see the map, only the plain text

    :(

    Have I omitted some step?

    Thanks

     

    Copy Link
  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    May 25, 2015 @ 16:56
    David Brendel
    100

    Hi Alex,

    the grid editor needs another call to render properly. So you can't use Umbraco.Field().

    To render the grid editor contents use @CurrentPage.GetGridHtml("propertyAlias") or if you are using strongly typed: @Model.Content.GetGridHtml("propertyAlias").

    More information about rendering the grid can be found here.

    Regards

    David

    Copy Link
  • alex 6 posts 38 karma points
    May 25, 2015 @ 17:29
    alex
    0

    Hi David,

    Thanks a lot. It works perfectly!

    Is possible to set the map zoom before render it?

    Thanks in advance

    Copy Link
  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    May 25, 2015 @ 17:32
    David Brendel
    0

    HI Alex,

    the zoom gets saved when you zoom on the map in the backoffice.

    I'm currently working on a package version where the zoom can be set through a dialog.

    If it is properly tested I will release it. If you want to help me testing I can send you the package by email.

    Regards

    David

    Copy Link
  • alex 6 posts 38 karma points
    May 25, 2015 @ 19:04
    alex
    0

    Great!

    Yes, of course. I am now learning and understanding Umbraco, so all I can do to contribute will be ok ;)

    with regards


    Alex

    Copy Link
  • Arjan Woldring 124 posts 231 karma points
    Jun 01, 2015 @ 13:00
    Arjan Woldring
    0

    Hi David. Package is working great. Thanks.

    Like you already said the only issue is that when you scroll in the Grid, the maps start to zoom in/out. So it would definately be great to zoom in/out through a dialog or something and disable the scroll zoom.

    Copy Link
  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    Jun 01, 2015 @ 15:31
    David Brendel
    0

    Hi Arjan,

    thanks for the feedback. Currently working on an update with some more settings. Think it would really be the best to disable the "in map" zoom and just using an external method to set zoom.

    Regards David

    Copy Link
  • Arjan Woldring 124 posts 231 karma points
    Jun 01, 2015 @ 15:48
    Arjan Woldring
    0

    Well, the map has a scroll function on the left which is working nicely. My only issue is that scroll-zoom needs to be disabled. I have been playing around with the mapOptions. I added scrollwheel: false. But no luck so far.

    Copy Link
  • Arjan Woldring 124 posts 231 karma points
    Jun 01, 2015 @ 16:04
    Arjan Woldring
    0

    Got it working. scrollwheel: false did the trick. Had a typo ;)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft