Friday, February 22, 2013

Geo Point Picker property for EPiServer 7 from Making Waves

Piotr Dela from Making Waves created Geo Point Picker property for EPiServer7

GeoPicker property is based on Google Maps API and provides a rich interface for selecting a geo-coordinates – perfect for editing location of points of interests we want to show on a map.

Installation

Install OpenWaves.EPiServer.GeoProperties NuGet package from http://nuget.org/packages/OpenWaves.EPiServer.GeoProperties/

Getting started
To use the property set the type of the property to GeoPoint.
using OpenWaves.EPiServer.GeoProperties;

...

[UIHint(PropertyGeoPoint.UiHint)]
public virtual GeoPoint CustomLocation { get; set; }

From edit mode

Property editor lets editors type the geo-coordinates in Lat/Long number inputs or click on the location thumbnail to display a richer UI.


The popup lets editors search for locations and/or select a point by dragging a marker over the map.


After the location is selected, property editor shows a thumbnail of the location and its geo-coordinates.

40 comments:

  1. I don't seem to make it work. The Google Maps window pops up but whenever i click the map the lat/lng fields don't get their values. The address field gets the correct info though. Do you have a solution to my problem?

    ReplyDelete
  2. Hello, I seem to have the same problem. I'm running EPiServer 7 MVC with patch 1. Installed the geo point picker via nuget. The Long and Lat properties does not get any value, except "undefined" in the map pop-up.

    ReplyDelete
  3. Same problem here...

    ReplyDelete
  4. I am experiencing the same problem as Thomas F.

    ReplyDelete
  5. Please check newest version (1.0.85.478) from nuget. Should work fine now.

    ReplyDelete
  6. Hi Mirosław

    Great property!

    I have tried using it and have two questions.
    1. I get an error message in edit mode

    This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps

    2. How do I retrieve yhe geo point in my template?

    ReplyDelete
  7. Hi Mirosław

    Great property!

    I have tried using it and have two questions.
    1. I get an error message in edit mode

    This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps

    2. How do I retrieve yhe geo point in my template?

    ReplyDelete
  8. Lars,

    1) to change api key set "< add key="GoogleMapsApiKey" value="" />" in appSettings section in web.config

    2) To use marker value you can
    a) display map with marker
    < EPiServer:Property runat="server" PropertyName="CustomLocation" />
    b) display latitude/longitude
    <%= this.CurrentPage.CustomLocation.Latitude %>

    ReplyDelete
  9. Thanks a lot Mirosław for such a quick reply :)

    I'll try that

    /Lars

    ReplyDelete
  10. Yes, functions very well.

    It's just the static map in edit mode where I pick my geo point that will not render.

    If I copy the address
    http://maps.googleapis.com/maps/api/staticmap?center=56.1634554,14.8665148&zoom=19&size=200x200&sensor=false&markers=56.1634554,14.8665148&key=

    and put it in a new reader, it will render. But not in EPiServer Edit mode

    ReplyDelete
  11. Hi

    Another question
    Is there anyway to change the default zoom level in edit mode. It's set to 19.
    Maybe that's why the static map image will not render.

    http://maps.googleapis.com/maps/api/staticmap?center=56.1634554,14.8665148&zoom=19&size=200x200&sensor=false&markers=56.1634554,14.8665148&key=

    /Lars

    ReplyDelete
  12. Have any idea why there is only a static icon in the map area after have picked a location.

    Lat/Lng is saved but there is no map.

    ReplyDelete
  13. Lars,

    When you select location in EPiServe redit mode zoom is also saved. So it means that map is displayed in same zoom as when you selected location.

    In example you posted with zoom 19 map seems not to render correctly because area in Google Maps is gray (no roads, forests etc)
    Check this one (with zoom 16): http://maps.googleapis.com/maps/api/staticmap?center=56.1634554,14.8665148&zoom=16&size=200x200&sensor=false&markers=56.1634554,14.8665148

    When rendering map you can also access zoom level which was used when editor selected point:

    <%= this.CurrentPage.CustomLocation.MapZoom %>

    ReplyDelete
  14. Hi Mirosław

    Thanks for supporting me in this. I think the control is beutiful.

    My problem is not in view mode.

    The problem is in edit mode where the map is not rendered. Just an icon in the top left corner

    ReplyDelete
  15. Is it possible that edit mode uses different url (host name) than view mode? Does firebug show any error in console?

    ReplyDelete
  16. Firebug shows no errors

    view mode: http://localhost:37777/

    Edit mode
    http://localhost:37777/EPiServer/Cms

    /Lars

    ReplyDelete


  17. I have tested this on fresh EPiServer 7 environment and it seems to work in edit mode.

    It might be related to your EPiServer installation/chnages in master pages/included scripts or something similar. I think I need more hints from you what could be source of this behavior - is it javascript related issue or server site. Please consider opening issue at https://openwaves.codeplex.com/workitem/list/basic

    ReplyDelete
  18. Is this tested with the latest EPiServer? I get "undefined" in the latitude and longitude textboxes.

    I had to modify the source because the ClientEditingClass has changed from using "." to "/" as delimiters in the latest Epi release.
    I'm thinking maybe more have changed..

    Would be great if the plugin was updated :)

    ReplyDelete
  19. Is this tested with the latest EPiServer? I get "undefined" in the latitude and longitude textboxes.

    I had to modify the source because the ClientEditingClass has changed from using "." to "/" as delimiters in the latest Epi release.
    I'm thinking maybe more have changed..

    Would be great if the plugin was updated :)

    ReplyDelete
  20. Is this tested with the latest EPiServer? I get "undefined" in the latitude and longitude textboxes.

    I had to modify the source because the ClientEditingClass has changed from using "." to "/" as delimiters in the latest Epi release.
    I'm thinking maybe more have changed..

    Would be great if the plugin was updated :)

    ReplyDelete
  21. Hi! This property would be perfect for me but I can't get it to work. Probably due to EPiServer updates.

    When attempting to go into edit-mode on a page with the property on it wont load: 404 - can't find GeoPointSelector.js or GeoViewPortSelector.js. Any solution?
    Thanks!/Nino

    ReplyDelete
  22. I think your problems might be related with EPiServer updates. We've just published a new version of OpenWaves.EPiServer.GeoProperties
    package in NuGet Gallery. Please update/reinstall package and check the newest version.

    ReplyDelete
  23. I have installed the latest nuget-package on the latest episerver version. I get this script error in edit mode and I can't edit the page.

    SCRIPT5022: declare ow-epi-geoProperties.widgets.GeoPointSelector: mixin #5 is not a callable constructor.
    dojo.js, rad 15 tecken 53934

    ReplyDelete
  24. This comment has been removed by a blog administrator.

    ReplyDelete
  25. Hi Miroslaw,

    When i have the line:
    [UIHint(PropertyGeoPoint.UiHint)]
    in my code I can't go to Edit view.. any ideas?

    Also, where exactly do you add the line:
    <%= this.CurrentPage.CustomLocation.Latitude %>
    in your template? I get the error 'Object reference not set to an instance of an object'

    ReplyDelete
  26. When I have the line,
    [UIHint(PropertyGeoPoint.UiHint)]
    i can't view the form editing for that page. any ideas?

    Also, where exactly do you add the line
    <%= this.CurrentPage.CustomLocation.Latitude %>
    in your templates? I get the error, "object reference not set to an instance of an object."

    I have the latest versions installed as I just installed them today..

    ReplyDelete
  27. Also, if I add the UIHint line I get a webpage error that says,
    Line: 15
    Error: declare ow-epi-geoProperties.widgets.GeoPointSelector: mixin #5 is not a callable constructor

    ReplyDelete
  28. Beth, Which EPiServer version (and patch) do you use?

    ReplyDelete
  29. Miroslaw,

    I did have EpiServer-Platfrom 1.0.9001, Add-On Store UI 1.0.1092, EPiserver Edit UI 1.0.431, and UI Platform 1.0.456.

    Thank you

    ReplyDelete
  30. Hi Miroslow,

    Do you have any ideas/suggestions for me?

    Thank you,

    ReplyDelete
  31. Came across this issue today, may come in use to someone

    Problem:
    Cannot enter edit mode once added [UIHint(PropertyGeoPoint.UiHint)]. 404 errors on LegacyDialogPopup and _HasChildDialogMixin)

    Environment:
    EPiServer 7.0.859.1 and the latest GeoPointPicker 1.0.87.162

    Solution:
    In \modules\ow-epi-geoProperties\Scripts\Widgets\GeoPointSelector.js

    Line 18-19 update the references from:
    "epi-cms/legacy/LegacyDialogPopup",
    "epi-cms/widget/_HasChildDialogMixin",
    to:
    "epi/cms/legacy/LegacyDialogPopup",
    "epi/cms/widget/_HasChildDialogMixin",

    ReplyDelete
  32. Hi.
    Will there be a 7.5 update to the Geo Point Picker soon?

    ReplyDelete
  33. Hi
    Will there be any updates to the Geo Point Picker for the EpiServer 7.5 any time soon?

    ReplyDelete
  34. Expect newer version soon, as we already have project running EPiServer 7.5

    ReplyDelete
  35. Hi again.
    Do you have a release date?
    We are upgrading our website from 7 to 7.5 and the release date is end of february.
    I would be good to know if I need to find another solution or if I can wait for the upgrade.

    Thank you!

    ReplyDelete
  36. i'm new to this and i'm not too sure where i should place the PropertyGeoPoint.cs file in my folders?

    ReplyDelete
  37. Hello I had tried that but for some reason (i tihnk it's due to working on episerver 7.5 ) but it wouldn't work correctly so at the moment I am doing it by hand. so in what folder should i place these files? such as GeoPointSelector.js and/or how do i rewrite the path to the correct file?

    ReplyDelete
  38. We have updated OpenWaves VideoProperty, GeoProperties and GenericListProperty. Now they support EPiServer 7.5+

    Source code is available on Codeplex.

    Cheers,
    Radek

    ReplyDelete