NetTalk Central

« previous next »
Pages: [1]

Author Topic: Mapping and Geocoding Example  (Read 13248 times)

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Mapping and Geocoding Example
« on: December 23, 2012, 07:57:52 AM »
I have been testing some ideas regarding mapping and geocoding. 

I have attached a test app. 

When you enter an address, the address is reverse geocoded and an latitude and longitude are obtained.

Make sure you use an address with a house number, street, city, state, (Or whatever a full address is for your area).

The maps should automatically center themselves on your location.

The maps will display all of the address records on a Google Map with markers and info windows.

PLEASE play around with the app and double check what I did.  If you know a better way, please tell me!

Thanks,

Don

[attachment deleted by admin]
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #1 on: December 23, 2012, 08:10:28 AM »
App uses:

Port: 88
NetTalk 6.51
String Theory 1.68
Clarion 8.0.9661
« Last Edit: December 23, 2012, 03:37:55 PM by DonRidley »
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Skip Williams

  • Jr. Member
  • **
  • Posts: 53
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #2 on: December 23, 2012, 01:48:57 PM »
Thanks, Don.

This is going to be fun to play with!

It only seems to work all the way on an iPad.  On the desktop, neither of the multiple markers seem to work, and on an ICS Android, none of the maps work, but I suspect that is a nettalk mobile problem. I am using nt7.0.

I might attempt to add a route from my current position to an address for a mobile or ipad device, once i get the js figured out<g>.

Skip
Logged

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #3 on: December 23, 2012, 02:29:27 PM »
I think I have it set where none of the maps will display in mobile mode.

App uses p_web.GetLocation() in the IndexPage to set the Latitude and Longitude of the user.  

Addresses table has a few records in it but they are all close to me.  You may have to enter some records around you.

I tested it using Windows 7 and Firefox exclusively.  Have not checked any other browsers.

Thanks for taking a look at it.  I would like to perfect the technique of using the Google Maps API in NetTalk.

Don

P.S. I have attached a screen capture from one of my production apps (Not Released Yet).

[attachment deleted by admin]
« Last Edit: December 23, 2012, 03:02:53 PM by DonRidley »
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #4 on: December 24, 2012, 06:17:27 AM »
Just as I feared, I ran into a problem of either:

1.  I ran out of room in LOC:MarkersString

or

2. I ran out of room in the packet.  (I think this it).

Either issue will cause the map to fail.

So, instead of creating one really long string, I need to loop through my records but use JavaScript somehow.  Something like this:

Code: [Select]
function makeInfoWindowEvent(map, infowindow, marker) { 
   return function() { 
      infowindow.open(map, marker);
   }; 
}

for(x in locations){
   infowindow[x] = new google.maps.InfoWindow({content: x});

   marker[x] = new google.maps.Marker({title: locations[x][0],
                                       map: map,
                                       position: locations[x][3]});

   google.maps.event.addListener(marker[x], 'click',
                                 makeInfoWindowEvent(map, infowindow[x], marker[x]);
}
I have ZERO clue at his point of how I would do this.

Thanks,

Don
« Last Edit: December 24, 2012, 06:19:23 AM by DonRidley »
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
Re: Mapping and Geocoding Example
« Reply #5 on: December 24, 2012, 06:42:55 AM »
I'm someway into adding Mapping support in NT7 Don - it wasn't ready for the Nov release so I didn't show it, but it's something I'd like to integrate if I can.

Cheers
Bruce
Logged

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #6 on: December 24, 2012, 07:06:57 AM »
Thanks Bruce!!

That would be incredibly awesome!   

As an (free) alternative to Google Maps I would also take a look at Open Street Map (OSM).

http://www.openstreetmap.org/

Thanks again!

Don
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #7 on: December 25, 2012, 04:15:49 PM »
I have solved the problem of running out of room in my markers string.  Using the following example code eliminated the issue.  I moved the LOOP that creates the markers to inside the creation of the packet.

Now - and maybe Bruce can answer this - the limitation may be how large the packet can be.

Code: [Select]
 packet = clip(packet) & p_web.AsciiToUTF(|
    '   <<html><13,10>'&|
    '     <<body><13,10>'&|
    '      <<div id="map_canvas" style="width:800px; height:800px"><</div> <13,10>'&|
    '<13,10>'&|
    '      <<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"><</script> <13,10>'&|
    '      <<script type="text/javascript"> <13,10>'&|
    '<13,10>'&|
    '        var map;<13,10>'&|
    '        var markers = [];<13,10>'&|
    '<13,10>'&|
    '        initialize();<13,10>'&|
    '<13,10>'&|
    '<09H>function initialize() {{<13,10>'&|
    '<09H>var i;<13,10>'&|
    '',net:OnlyIfUTF,net:StoreAsAscii)
  
    packet = clip(packet) & '<09H>var arrDestinations = [<13,10>'
  
    OPEN(Addresses)
    SET(Addresses)
    LOOP UNTIL Access:Addresses.Next()
            LOC:MarkersString = ''
            LOC:MarkersString = '<13,10><123><13,10>' & |
                        'lat: ' & CLIP(Add:Latitude) & '<44><13,10>' & |
                        'lon: ' & CLIP(Add:Longitude) & '<44><13,10>' & |
                        'title: <34>Name: ' & CLIP(Add:Name) & '<34><44><13,10>' & |
                        'description: <34>' & 'Record ID: ' & CLIP(Add:AddressId) & '<br />' & |
                                              'Name: ' & CLIP(Add:Name) & '<br />' & |
                                              'Address: ' & CLIP(Add:Address) & '<34>' & '<13,10>' & |                                          
                        '<125><44><13,10>'
                        packet = CLIP(packet) & p_web.AsciiToUtf(CLIP(LOC:MarkersString),net:OnlyIfUTF,net:StoreAsAscii)
    END
  
    packet = clip(packet) & '<09H>];<13,10>'
  
    packet = clip(packet) & p_web.AsciiToUtf(|
    '<09H><13,10>'&|
    '<09H>var myOptions = {{<13,10>'&|
    '<09H,09H>zoom: 15,<13,10>'&|
    '<09H,09H>center: new google.maps.LatLng(' & p_web.GSV('_Latitude_') & ',' & p_web.GSV('_Longitude_') & '),<13,10>'&|
    '<09H,09H>mapTypeId: google.maps.MapTypeId.ROADMAP<13,10>'&|
    '<09H>};<13,10>'&|
    '<09H><13,10>'&|
    '<09H>var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);<13,10>'&|
    '<09H><13,10>'&|
    '<09H>var infowindow =  new google.maps.InfoWindow({{<13,10>'&|
    '<09H,09H>content: ''''<13,10>'&|
    '<09H>});<13,10>'&|
    '<09H><13,10>'&|
    '<09H>// loop over our array<13,10>'&|
    '<09H>for (i = 0; i << arrDestinations.length; i++) {{<13,10>'&|
    '<09H,09H>// create a marker<13,10>'&|
    '<09H,09H>var marker = new google.maps.Marker({{<13,10>'&|
    '<09H,09H,09H>title: arrDestinations[i].title,<13,10>'&|
    '<09H,09H,09H>position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),<13,10>'&|
    '<09H,09H,09H>map: map<13,10>'&|
    '<09H,09H>});<13,10>'&|
    '<09H,09H><13,10>'&|
    '<09H,09H>// add an event listener for this marker<13,10>'&|
    '<09H,09H>bindInfoWindow(marker, map, infowindow, "<<p>" + arrDestinations[i].description + "<</p>");  <13,10>'&|
    '<09H>}<13,10>'&|
    '<09H>}<13,10>'&|
    '<13,10>'&|
    '<09H>function bindInfoWindow(marker, map, infowindow, html) {{ <13,10>'&|
    '<09H,09H>google.maps.event.addListener(marker, ''click'', function() {{ <13,10>'&|
    '<09H,09H>infowindow.setContent(html); <13,10>'&|
    '<09H,09H>infowindow.open(map, marker); <13,10>'&|
    '<09H>}); <13,10>'&|
    '<09H>} <13,10>'&|
    '<13,10>'&|
    '<09H>google.maps.event.addDomListener(window, ''load'', initialize);<13,10>'&|
    '<13,10>'&|
    '      <</script> <13,10>'&|
    '    <</body><13,10>'&|
    '  <</html><13,10>'&|
    '',net:OnlyIfUTF,net:StoreAsAscii)
« Last Edit: December 25, 2012, 04:36:11 PM by DonRidley »
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #8 on: December 25, 2012, 05:17:49 PM »
Okay, changed the packet length to 1,000,000 and my problems went away.

I have attached a screenshot since I implemented the code change. 

I can generate a map with hundreds of markers in about 1 second.

Very cool!

Don

[attachment deleted by admin]
« Last Edit: December 25, 2012, 05:57:58 PM by DonRidley »
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Robert Iliuta

  • Sr. Member
  • ****
  • Posts: 472
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #9 on: January 23, 2014, 01:44:41 PM »
Hallo Don,

Thanks for sharing this info! very nice demo!
Did you managed to interact tooltip with form or browse?
I would like to have some links on the tooltip that when I click to add new record based on some info from that tooltip. It will be possible something like that? Did you try it?

Thank you,
Robert
Logged

willie53

  • Newbie
  • *
  • Posts: 25
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #10 on: August 22, 2014, 10:59:28 AM »
I tried many times to compile this example and it always fails to compile.

Inside the pagefootertag
I get the following error: cannot call procedure as a function.   the items in bold are the error points.


      packet = clip(packet) & p_web.Script('startCountDown('& int(p_web.site.SessionExpiryAfterHS/100) &',"'& clip(p_web.site.LoginPage) &'","countdown");')
      do SendPacket
    end


2nd procedure  : I get the following error: cannot call procedure as a function. it has a problem with the clip(packet)

rDisplayMap  Routine
  packet = clip(packet) & p_web.AsciiToUTF(|

I also noticed the zip file did not have the simplemap.js file either.



NetTalk 8.25
String Theory 2.06X-Files 2.52
Clarion 8.9661
Windows 7 Pro 64bit
Browser:  IE 9
Logged

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Mapping and Geocoding Example
« Reply #11 on: August 22, 2014, 11:48:47 AM »
Hello Willie,

I haven't looked at that in a very long time.  NetTalk 8 has built in mapping features now. 

Don
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

terryd

  • Hero Member
  • *****
  • Posts: 759
    • View Profile
    • Davcomm
    • Email
Re: Mapping and Geocoding Example
« Reply #12 on: August 22, 2014, 10:47:12 PM »
Willie
I think your problem is that you haven't done the packet fix to the application required when updating an application to Nettalk8. See the upgrading to Nettalk8 FAQ
Logged
Terry Davidson
Windows 10 64 bit/Windows7 64bit
Clarion 9.1.11529/Clarion10 12567
Nettalk 913
Nettalk 1015
StringTheory267/Winevent515/XFiles298/MessageBox239/Cryptonite186
Pages: [1]
« previous next »