LiveCode Forums.

Posted: **Wed Aug 28, 2013 2:18 pm**

Hi ALL,

I was wondering, how would I add something like a google maps reference into my stack (desktop application)
based on coordinates I input.

Regards,
Gautami

Posted: **Wed Aug 28, 2013 3:25 pm**

have a look on :

http://forums.runrev.com/phpBB2/viewtop ... ipt#p78962

Posted: **Wed Aug 28, 2013 4:17 pm**

Wow. looks exactly right.
Thank you!!!

G

Posted: **Tue Sep 03, 2013 12:55 am**

If you need assistance on this, I have created an application that does just this. The only difference is that I use LeafLet.js and OpenMaps as I got better looking maps than I have had with Google Maps. My application calls an html page from my Web Server and displays in the revBrowser.

Posted: **Tue Sep 03, 2013 7:16 am**

gpearson wrote:If you need assistance on this, I have created an application that does just this. The only difference is that I use LeafLet.js and OpenMaps as I got better looking maps than I have had with Google Maps. My application calls an html page from my Web Server and displays in the revBrowser.

Please, share.

Posted: **Tue Sep 03, 2013 1:25 pm**

The Application is for EBS (Educational Broadband Service) License Holders and is my first application that I converted from Adobe Air to Livecode. The organization I wrote this application for holds 23 EBS Licenses and I created a database of the License Markets with Coordinates. When a person runs this application, it downloads the License Markets via an XML Data and stores it in SQLite.

In my Browser Stack here is what I am doing to call the Webpage to Display the Map.

Code: Select all

on altBrowserOn
     local tWindowId
     put the windowid of this stack into tWindowId
     local tBrowserId, tGoogleMapURL, tGoogleMapSize, tGoogleMapType, tGoogleMapLatLon, tGoogleMapSensor
     put "http://" & gServerName & "/EBSLicense/Version3/MapDisplay.cfm?" into tGoogleMapBaseURL
     put "CLat=" & gMarketDecLatitude & "&CLon=" & gMarketDecLongitude into tGoogleMapCenterLoc
     put "&GoogleMapHeightSize=" & tBrowserImageHeightSize into tGoogleMapHeightSize
     put "&GoogleMapWidthSize=" & tBrowserImageWidthSize into tGoogleMapWidthSize
     put "&MarkerTitle=" & gCallSign into tGoogleMarkerInfo
     put tGoogleMapBaseURL & tGoogleMapCenterLoc & tGoogleMapHeightSize & tGoogleMapWidthSize & tGoogleMarkerInfo into tGoogleMapURL  
     put revBrowserOpen(tWindowId, tGoogleMapURL) into tBrowserId

     if tBrowserId is not an integer then
          answer "Error opening browser: " & tBrowserId
          exit altBrowserOn
     end if

     put tBrowserId into sBrowserId
     revBrowserRefresh sBrowserId
     revBrowserSet sBrowserId, "visible", true
     revBrowserSet sBrowserId, "showborder", false
     revBrowserSet sBrowserId, "rect", the rect of image "BrowserImage"
     set the visible of stack "EBSBrowser.dat" to true  
end altBrowserOn

Since all of the websites I work with are powered by Adobe Coldfusion, I am able to do things behind the scenes like define necessary variables so that when they are not passed in, a generic location gets displayed. The CFIF's do just this.

Code: Select all

<cfif not isDefined("URL.CLat")><cfparam name="CLat" type="String" default="41.616554"><cfelse><cfset CLat = #URL.CLat#></cfif>
<cfif not isDefined("URL.CLon")><cfparam name="CLon" type="String" default="-86.195278"><cfelse><cfset CLon = #URL.CLon#></cfif>
<cfif not isDefined("URL.MarkerTitle")><cfparam name="MarkerTitle" type="String" default="WLX423"><cfelse><cfset MarkerTitle = #URL.MarkerTitle#></cfif>
<cfif not isDefined("URL.GoogleMapHeightSize")><cfparam name="GoogleMapHeightSize" type="String" default="565"><cfelse><cfset GoogleMapHeightSize = #URL.GoogleMapHeightSize#></cfif>
<cfif not isDefined("URL.GoogleMapWidthSize")><cfparam name="GoogleMapWidthSize" type="String" default="772"><cfelse><cfset GoogleMapWidthSize = #URL.GoogleMapWidthSize#></cfif>

<cfset GoogleMapHeightSize = #Variables.GoogleMapHeightSize# - 30>
<cfset GoogleMapWidthSize = #Variables.GoogleMapWidthSize# - 30>
<cfoutput>
<!DOCTYPE html>
<html>
<head>
        <title>EBS License Market Locator</title>
        <meta charset="utf-8" />
        <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
        <META HTTP-EQUIV="EXPIRES" CONTENT="0">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="/EBSLicense/LeafLet/leaflet.css" />
        <!--[if lte IE 8]> <link rel="stylesheet" href="/EBSLicense/LeafLet/leaflet.ie.css" /> <![endif]-->
        <script src="/EBSLicense/LeafLet/leaflet.js"></script>

</head>
<body>
        <div id="map" style="width: #GoogleMapWidthSize#px; height: #GoogleMapHeightSize#px;"></div>
        <script>
                var publicschoolmarker;
                var privateschoolmarker;

                var map = L.map('map');
                map.setView(new L.LatLng(#Variables.CLat#, #Variables.CLon#), 9);

                L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '', maxZoom: 18 }).addTo(map);

                var EBSTowerIcon = L.icon({
                        iconUrl: '../MapIcons/radio-station-2.png'
                });

                var PublicSchoolIcon = L.icon({
                        iconUrl: '../MapIcons/school.png'
                });

                var PrivateSchoolIcon = L.icon({
                        iconUrl: '../MapIcons/privateschool.png'
                });

                var marker = L.marker([#Variables.CLat#, #Variables.CLon#], {icon: EBSTowerIcon}).addTo(map);

                var circle = L.circle([#Variables.CLat#, #Variables.CLon#], 56327, {
                        color: '##000000',
                        fillColor: '##F5F5F5',
                        fillOpacity: 0.5
                }).addTo(map);

                var publicSchoolGroup = new L.layerGroup().addTo(map);
                var privateSchoolGroup = new L.layerGroup().addTo(map);

 function AddPublicSchoolMarker(MarkerType,NESCID,Latitude,Longitude,popUpText) {
                        var popUpHTMLText = new String(popUpText);
                        popUpHTMLText = "'" + popUpHTMLText + "'";

                        publicschoolmarker = new L.marker(new L.LatLng(Latitude, Longitude), {icon: PublicSchoolIcon});
                        publicschoolmarker.bindPopup(popUpHTMLText);
                        publicSchoolGroup.addLayer(publicschoolmarker);
                }

                function AddPrivateSchoolMarker(MarkerType,NESCID,Latitude,Longitude,popUpText) {
                        var popUpHTMLText = new String(popUpText);
                        popUpHTMLText = "'" + popUpHTMLText + "'";

                        privateschoolmarker = new L.marker(new L.LatLng(Latitude, Longitude), {icon: PrivateSchoolIcon});
                        privateschoolmarker.bindPopup(popUpHTMLText);
                        privateSchoolGroup.addLayer(privateschoolmarker);
                }

                function RemovePublicSchoolMarkers() {
                                publicSchoolGroup.clearLayers();
                }

                function RemovePrivateSchoolMarkers() {
                                privateSchoolGroup.clearLayers();
                }

        </script>
</body>
</html>
</cfoutput>

This was a great learning project for me and while I was working on this Livecode project it opened my eyes as to the power of Livecode and I am slowly moving all of my Adobe Air applications over to Livecode. Each time I work on one of these application, I learn something new and then go back to my previous livecode applications to make the adjustments which enhances the applications that much more.

Let me know if you have any questions regarding this. Some of the data conversion like taking an address and producing a Lat/Lon is done with another project that I did by taking the entire US Census Tiger/Line database of 10Gig and creating a web frontend to allow me to save some money by not having to purchase someone's service to get me the Lat/Lon of every School District in the United States.

LiveCode Forums.

Adding map coordinates

Adding map coordinates

Re: Adding map coordinates

Re: Adding map coordinates

Re: Adding map coordinates

Re: Adding map coordinates

Re: Adding map coordinates