NetTalk Central
NetTalk Web Server => Web Server - Share Knowledge => Topic started by: DonRidley 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]
-
App uses:
Port: 88
NetTalk 6.51
String Theory 1.68
Clarion 8.0.9661
-
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
-
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]
-
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:
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
-
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
-
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
-
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.
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)
-
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]
-
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
-
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
-
Hello Willie,
I haven't looked at that in a very long time. NetTalk 8 has built in mapping features now.
Don
-
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