facebook

MobiOne Zipcode2Geolocation w/ Google Map Example

  1. MobiOne Archive
  2.  > 
  3. Examples, HOW-TOs
Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #317300 Reply

    support-michael
    Keymaster

    MobiOne Zipcode2Geolocation Demo

    Zipcode2Geolocation is a simple MobiOne mobile webapp that accepts a US zip code as input and outputs the (lat,lng) coordinate and displays a map.
    See attachment zip-lookup-screenshot60.png
    The source code is attached to the bottom of this post. The interesting work is performed in zipcode-details_custom.js. The function fetchZipDate(), does the heavy lifting for querying the ValidateZip webservice (http://www.webservicemart.com/uszip.asmx/ValidateZip) and processing its results. Yahoo’s YQL service is used to provide the webservice result in JSON form and to workaround a classic cross-domain restriction that prevents direct access to the web service. Click this link to open the YQL console with the query used in this app. The JSON result included a literal XML data string that had to be parsed to an XML document and results then extracted and processed.

    Google Maps V3 was used to provide a pannable map. Map options were set to prevent controls such as map type and street view mode. The map options are set in function initMap().

    I created Zipcode2Geolocation mobile webapp as demo to assist a MobiOne user who recently requested assistance. The user had a special need to interface with a public web service that converts a postal zip code to a (lat,lng) coordinate pair.

    See attachment webservicemart-validatezip50.png
    See attachment yql-console-query50.png
    See attachment zipcode.zip

    Attachments:
    You must be logged in to view attached files.
    #317303 Reply

    Yann
    Member

    Hi wayne,
    i have a problem, when i open your project i have this message:

    And the workspace is empty:

    Any idea?
    thanks a lot
    Yann

    #317306 Reply

    support-michael
    Keymaster

    My bad! I used an internal version of 1.2 early-access that will be released this week. I’ll update the src for 1.1 shortly.

    #317351 Reply

    aurontidus
    Member

    I have the same problem that Yann, but thanks a lot.

    #317382 Reply

    support-michael
    Keymaster

    Here is screenshot of this app running in the upcoming Test Center iPad emulator in landscape mode. Recall it was design on iphone in portrait orientation.
    See attachment zip-ipad-ls.png

    Attachments:
    You must be logged in to view attached files.
    #318064 Reply

    bertbeck
    Member

    Hi-

    I just downloaded MobiOne and this test app. I installed MobiOne and opened the project and then I got a message about saving in the latest format. The project seems to compile and run ok. It looks up the zipcode ok but does not show a map.

    Any ideas?

    I’m looking to create a trail map from gps coordiniates with topography and elevations. If you have any suggestions for resources or examples to do this – please let me know.

    tks

    #318065 Reply

    support-michael
    Keymaster

    @bertbeck
    I’m not sure what’s up. As an experiment I downloaded the zipcode zip file and extracted to disk. I then opened the zipcode-details.mobi file in the MobiOne 1.2 Design Center. From the Design Center I selected Run in Test Center and did not override any of the provided html/css/js files. When I entered a valid US zipcode in the Zip Code field the zipcode details and map appear.

    I’m out for most of the weekend but will investigate further and see if I can add some additional error detection. I developed the zipcode app on request of another user.

    #318075 Reply

    bertbeck
    Member

    tks wayne – very strange. I have been able to create a sample app – very nice tool – but I am very confused as to how to create google maps integration and general iPhone specific things (like location awareness and make the google map aware of the users current location and also how to show a video popup over a page). I have not been able to find anything that describes how to do the actual programming (or at least edit the code and use my own javascript). Do I just just use the _custom.js to place my code in ? How can I get to it (and the underlying html) using the designer ?

    #318085 Reply

    bertbeck
    Member

    Hi Wayne-

    I’ve been able to make progress with google maps using separate html pages. I’m still unclear as to how to mix code with what is generated by your tool.

    I’ve come across two more issues:

    1. For some reason – one button with a link will not link to it’s target. I set the target in the designer to the .mobi file I want to link to. It had worked before (before I set the autoresize) and now it doesn’t work. On the same page I have a push button that links to another page – and that works fine. When I look at the generated .html code, I see a “href=…” added for the push button that works, but I do not see an “href=…” generated for the button that does not (but the link is defined in the Link property).

    2. I am working with an iPhone 4 and I see now there are some sizing and layout issues. A list that fits fine in a 320 x 460 page for the 3GS takes up more space in the iPhone 4 and the buttons below it are pushed off the screen. It seems that scaling between your view, the 3GS and the iPhone 4 is off a little. I suggest (unless this can be corrected) that you create an iPhone 4 device in the test center so we can see what it will look like on the iPhone 4.

    I can send you the .mobi for issue #1 – it’s a simple graphic with an “Index” and “Begin” button on the bottom. I layed it out for the GS and set the autoresize so that it looks fine on the iPhone 4. The next button just won’t bring up the linked page.

    #318089 Reply

    bertbeck
    Member

    Item #1 is solved – I had spaces in file names. I recreated without spaces and that solved the problem.

    #318092 Reply

    support-michael
    Keymaster

    @bertbeck
    Can you send me an example of the #2 issue for further investigation? Send to support at genuitec dot com with title “mobione iphone4 list data for wayne”. We have a small window of time to fix problems like this before the 1.2.1 update ships later this week.

    #318112 Reply

    support-michael
    Keymaster
    #318123 Reply

    bertbeck
    Member

    I’ve come across another issue which seems to explain some of the problems I’ve encountered: sometimes the .html or the .css file does not get regenerated (so I end up running off the old copy). After each export to html – I now check the files that are generated and if one has and older date – I delete it – and then export again. This fixes the problem.

    #318127 Reply

    bertbeck
    Member

    I am seeing something similar to http://www.genuitec.com/support-mobione/viewtopic.php?p=3427#p3427?

    but I see it when I create a rounded list with prev and next buttons at the bottom. The list fits fine in the designer – but when I run it on the iPhone 4 the list takes up more space and pushes the button off the screen. I’ve fixed it by using a scrolling panel for the list and anchoring the buttons to the bottom. But – it does show me that the layout does not reflect what actually happens on the iPhone 4 – I’m sure due to scaling issues. If it were possible to preview “as an iPhone 3GS or as an iPhone 4” – that would be nice. I found simulators on the web that helped me see what the generated code looks like on a 3GS.

    I suggest having an option to hide the footer toolbar as well. I think you have the code in there but they still show when using the browser – if there is a way around that – it would help. They disappear when I create an icon on the home page and run from there.

    I do run into the files not being regenerated bug fairly often that I mentioned earlier- not sure what is the cause of it.

    #318129 Reply

    support-michael
    Keymaster

    @bertbeck
    As usually I’m always interested in user experiences where the UI design does not match either in the Test Center or on device. Can you send me your design file or an example that renders differently on the iphone3 and iphone4. We have been working to make the experience as close as possible between devices. Send to support at genuitec dot com with title “mobione list scaling issue for wayne” and I’ll investigate it immediately.

    The Designer and the Test Center both provide options for hiding the buttonbar. The Test Center also provides a Browser>Strict Web Clips Mode that behaves exactly as the iphone device. On the iphone the buttonbar can not be programmatically hidden via an api. It is only hidden when the webapp is saved to the iphone home screen. The Test Center hides this complexity by default to avoid prematurely throwing deployment details at the user before he has even developed anything significant worth testing on a device.

    re: files not being regenerated
    Is there a repeatable scenario that you have encountered? For example, are you designing multiple pages and one of the secondary pages (not the main page) does not get its content regenerated… I am trying a few scenarios on my end.

Viewing 15 posts - 1 through 15 (of 29 total)
Reply To: MobiOne Zipcode2Geolocation w/ Google Map Example

You must be logged in to post in the forum log in