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:

Tomas Frieberg said...

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?

Gustav Lidälv said...

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.

Anonymous said...

Same problem here...

Thomas Kalve said...

I am experiencing the same problem as Thomas F.

Mirosław Jedynak said...

Will check it

Mirosław Jedynak said...

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

Lars Jonsson said...

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?

Lars Jonsson said...

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?

Mirosław Jedynak said...

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 %>

Lars Jonsson said...

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

I'll try that

/Lars

Lars Jonsson said...

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

Lars Jonsson said...

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

Lars Jonsson said...

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.

Mirosław Jedynak said...

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 %>

Lars Jonsson said...

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

Mirosław Jedynak said...

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

Lars Jonsson said...

Firebug shows no errors

view mode: http://localhost:37777/

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

/Lars

Mirosław Jedynak said...



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

Thomas said...

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 :)

Thomas said...

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 :)

Thomas said...

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 :)

Nino Mengarelli said...

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

Piotr Dela said...

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.

Anonymous said...

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

Anonymous said...
This comment has been removed by a blog administrator.
Beth Andorf said...

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'

Beth Andorf said...

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..

Beth Andorf said...

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

Mirosław Jedynak said...

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

Beth Andorf said...

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

Beth Andorf said...

Hi Miroslow,

Do you have any ideas/suggestions for me?

Thank you,

Colin Bailey said...

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",

Cecilia Håkansson said...

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

Cecilia Håkansson said...

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

Mirosław Jedynak said...

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

Cecilia Håkansson said...

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!

Anonymous said...

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

Mirosław Jedynak said...

The easiest is to use NuGet

Anonymous said...

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?

Radek Piekarz said...

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

Source code is available on Codeplex.

Cheers,
Radek