Announcement

Collapse
No announcement yet.

Get GPS location

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Get GPS location

    I might be interested as well but I would also like to add a GPS location to that, another words when user checks in the Latitude/Longtitude fields are filled in automatically. Any ideas ?
    -----------------------------------------
    Arthur Klisiewicz
    dATA POINT SOFTWARE
    www.datapointsoftware.com

  • #2
    Originally posted by aka View Post
    I might be interested as well but I would also like to add a GPS location to that, another words when user checks in the Latitude/Longtitude fields are filled in automatically. Any ideas ?
    You can use HTML5 for this

    http://www.w3schools.com/HTML/html5_geolocation.asp
    /Giuseppe

    Professional Scriptcase Services
    Some Customers opinions

    Comment


    • #3
      OK Giu, I looked up this script

      HTML Code:
      <script>
      var x = document.getElementById("demo");
      function getLocation() {
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(showPosition);
           } else {
              x.innerHTML = "Geolocation is not supported by this browser.";
          }
      }
      function showPosition(position) {
          x.innerHTML = "Latitude: " + position.coords.latitude +
          "<br>Longitude: " + position.coords.longitude;
      }
      </script>

      Say I have 2 Var's [glo_longtitude] and [glo_lattitide] - how would I get data into those tow variables ?

      Arthur
      -----------------------------------------
      Arthur Klisiewicz
      dATA POINT SOFTWARE
      www.datapointsoftware.com

      Comment


      • #4
        I think the way to go is to fill the fields on screen with JQuery/Javascript.
        /Giuseppe

        Professional Scriptcase Services
        Some Customers opinions

        Comment


        • #5
          Giu is correct. For another project, we used Javascript and the Google Maps API (no Scriptcase) to use those GPS coordinates for a mapping project. Users will have to give their permission for your application to access their GPS location. This is a browser limitation. A good fallback (if they decline to give you permission) is to allow them to enter an address. Using the Google Maps API, you can reverse engineer their long/lat.

          Comment


          • #6
            bradk - can you elaborate on "we used Javascript and the Google Maps API (no Scriptcase)" ?
            I have no experience with API + SC at all so the first question is how / where can I find any examples ? Yes I have seen GOOGLE Api examples etc, but I still do not know how to implement those into SC project (?).


            Giu - I really appreciate your input but the general statements do not help much. I'm looking for some examples (like I said above).

            I think if would be really great if NetMake will allow to upload sample Apps to their sever and share with other users (while giving the uploaders some benefits)
            -----------------------------------------
            Arthur Klisiewicz
            dATA POINT SOFTWARE
            www.datapointsoftware.com

            Comment


            • #7
              There is a complete example here: https://developers.google.com/maps/a...ngUserLocation
              And thus also here: https://developers.google.com/maps/d...ap-geolocation
              It is just basic javascript, just remove the code you dont need...

              Comment


              • #8
                In that code there are JS variables created to hold coordinates. That's clear but I haven't yet used any JS code in SC so the question is how can get values from JS Var
                s into SC Var's ?

                IT would be really helpful to post some examples or create some help/webinar etc. So far anything that's going beyond standard code generation and options is terribly documented.
                -----------------------------------------
                Arthur Klisiewicz
                dATA POINT SOFTWARE
                www.datapointsoftware.com

                Comment


                • #9
                  aka here is a piece of code

                  function showPosition(position){
                  document.getElementById('id_sc_field_latitudine'). value=position.coords.latitude;
                  document.getElementById('id_sc_field_longitudine') .value=position.coords.longitude;
                  document.getElementById('id_sc_field_notegeoref'). value = "Geolocalizzation done.";
                  }

                  if (navigator.geolocation) {
                  navigator.geolocation.getCurrentPosition(showPosit ion);
                  } else {
                  document.getElementById('id_sc_field_notegeoref'). value = "Geolocalizzation not supported.";
                  }

                  The id_sc_field_xxxxxxxxx where xxxxxxxx is the name of your variable glo_longtitude etc...

                  Comment


                  • #10
                    I am interested in the moment is to show the location based on address. If the user enters the location into the form and saves the record the grid (for example would show the Location Pin on the map). This is just to simplify the understanding and implementation. To make it even more simple I'm making temporary assumption that Lattitude/Longtitude coordinates are already given.
                    In the real life of course the proper function need to retrieve those two by using the ADDRESS. I spoke with other users outside of this forum and there is huge lack of examples. The documentation for JS/PHP etc on other websites is OK and everybody can go there and learn the API details. The issue is not how to use tha API but how to integrate it with SC Apps. This is where we need help and examples. The fragments of code which is pulled out of the scope do not help much.

                    VDPVince - I do not fully understand your example code (especially your _xxxxxxxx. How would I fill [glo_lattitude] , [glo_longtitude] from this code ?

                    The better illustrate the whole picture I would like to see a simple form where user enters the address (Street, town, region, zip) and upon validation the map with the pushpin is shown. This of course would require Google API and that is the whole issue how to integrate it (step by step) . I'm completely blank on using API's with SC and many other (not so advanced SC users as well). I just spoke with two other people this week, They have no idea how to do it. The only example I was able to find was a video webinar recorded by Marcia but it is very incomplete and even watching it I saw several things not working.

                    The help on those topics would be greatly appreciated:
                    - how to read/write to JS variables
                    - how to read/write to PHP variables
                    - how to call JS function from SC and get the returned parameters assigned to SC variables
                    - steps to implement API's

                    ARTHUR
                    -----------------------------------------
                    Arthur Klisiewicz
                    dATA POINT SOFTWARE
                    www.datapointsoftware.com

                    Comment


                    • #11
                      I have use drop pin map for one of my application, Let me explain to help you create step by step Guideline:

                      1) create a Blank PHP application and load google map

                      Code should be somethink like this onExecute event

                      ?>
                      <!DOCTYPE html>
                      <head>
                      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
                      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
                      <title>Alra Outreach Audition Venues</title>
                      <script src="https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEMAPKEY"
                      type="text/javascript"></script>
                      <script src="<?php echo sc_url_library('prj', 'APIGoogleMaps', 'functionGoogleMaps.js'); ?>" type="text/javascript"> </script>
                      <style>
                      .google-maps {
                      position: relative;
                      padding-bottom: 75%; // This is the aspect ratio
                      height: 0;
                      overflow: hidden;
                      }
                      .google-maps iframe {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100% !important;
                      height: 100% !important;
                      position:absolute;
                      }
                      </style>
                      </head>
                      <body onload ="load()">

                      <div id="map" class="google-maps"> </div>
                      <!--div id="map" style="width: 600px; height: 580px"> </div-->

                      </body>
                      </html>
                      <?

                      2) Create another blank application that creates xml data rendering data from database

                      Code should be somethink like this onExecute event

                      in here Table audition_location is use to store data.

                      sc_select(my_data, "SELECT school, building_number, street, town_city, postcode, county, country, lat, lng, type FROM audition_location where status ='Approved'");

                      if ({my_data} === false)
                      {
                      sc_error_message("Error on fetching data.");
                      }
                      else{
                      header("Content-type: text/xml");
                      echo '<markers>';
                      while (!$my_data->EOF)
                      {
                      $address = $my_data->fields[1];
                      for($i=2; $i<7; $i++){
                      if($my_data->fields[$i] !=''){
                      $temp = $address. ', '. $my_data->fields[$i];
                      $address =$temp;
                      }
                      else{
                      $temp = $address;
                      $address =$temp;
                      }

                      }
                      echo '<marker ';
                      echo 'name="' . $my_data->fields[0].'" ';
                      echo 'address="'.$address.'" ';
                      echo 'lat="' . $my_data->fields[7].'" ';
                      echo 'lng="' . $my_data->fields[8].'" ';
                      echo 'type="' . $my_data->fields[9].'" ';

                      echo '/>';

                      $my_data->MoveNext();
                      }
                      $my_data->Close();
                      echo '</markers>';
                      }

                      Output of this application will be:

                      This XML file does not appear to have any style information associated with it. The document tree is shown below.

                      <markers><marker name="Orange Country" address="202, Heath Road, Hounslow, Tw3 2Nx, Middlesex , vghbgubghubguh" lat="51.4656105" lng="-0.3483627" type="Private"/><marker name="Alra North" address="Unit 1, Mill At The Pier, Trencherfield Mill, Heritage Way, Wigan, WN3 4BF, Lancashire, UK" lat="53.5420991" lng="-2.6377473" type="Public"/><marker name="Consider This" address="54, Cowley Mill Road, Uxbridge, UB8 2QE, Middlesex , UK" lat="51.5382013" lng="-0.4882847" type="Private"/>
                      </markers>

                      3) create an external libriaries of google api using javascript

                      the code I use is something like this

                      var customIcons = {
                      Private: {
                      icon: '../devel/conf/grp/audition/img/ico/map_pin_red.png'
                      },
                      Public: {
                      icon: '../devel/conf/grp/audition/img/ico/map_pin_green.png'
                      }
                      };

                      function load() {
                      var map = new google.maps.Map(document.getElementById("map"), {
                      //center: new google.maps.LatLng(52.389011, -1.137085),
                      center: new google.maps.LatLng(43.907787, -79.359741)),
                      zoom: 9,
                      mapTypeId: 'roadmap'
                      });
                      var infoWindow = new google.maps.InfoWindow;

                      // Change this depending on the name of your PHP file
                      downloadUrl("../markersXML/markersXML.php", function(data) {
                      var xml = data.responseXML;
                      var markers = xml.documentElement.getElementsByTagName("marker") ;
                      for (var i = 0; i < markers.length; i++) {
                      var name = markers[i].getAttribute("name");
                      var address = markers[i].getAttribute("address");
                      var type = markers[i].getAttribute("type");
                      var point = new google.maps.LatLng(
                      parseFloat(markers[i].getAttribute("lat")),
                      parseFloat(markers[i].getAttribute("lng")));
                      var html = "<b>" + name + "</b> <br/>" + address;
                      var icon = customIcons[type] || {};
                      var marker = new google.maps.Marker({
                      map: map,
                      position: point,
                      icon: icon.icon
                      });
                      bindInfoWindow(marker, map, infoWindow, html);
                      }
                      });
                      }

                      function bindInfoWindow(marker, map, infoWindow, html) {
                      google.maps.event.addListener(marker, 'click', function() {
                      infoWindow.setContent(html);
                      infoWindow.open(map, marker);
                      });
                      }

                      function downloadUrl(url, callback) {
                      var request = window.ActiveXObject ?
                      new ActiveXObject('Microsoft.XMLHTTP') :
                      new XMLHttpRequest;

                      request.onreadystatechange = function() {
                      if (request.readyState == 4) {
                      request.onreadystatechange = doNothing;
                      callback(request, request.status);
                      }
                      };

                      request.open('GET', url, true);
                      request.send(null);
                      }

                      function doNothing() {}

                      This code is for multiple drop pin on the map, if you have notice above on the step 1 it has called this script by using name 'functionGoogleMaps.js

                      Hope this help.




                      Comment


                      • #12
                        Arthur- Been trying to put together an ajax example that would pass longitude/latitiude from JS to php in SC, but so far it's not working. Will keep trying and post if I have a solution. I don't think built-in ajax macros will do the trick and interface with Google Maps API.

                        Comment


                        • #13
                          Aka define a form with two fields

                          {latitude} and {longitude} then define a javascript button and on execute put the code
                          //--------------------------------
                          function showPosition(position){
                          document.getElementById('id_sc_field_latitudine'). value=position.coords.latitude;
                          document.getElementById('id_sc_field_longitudine') .value=position.coords.longitude;
                          }

                          if (navigator.geolocation) {
                          navigator.geolocation.getCurrentPosition(showPosit ion);
                          } else {
                          // there is an error handle
                          }
                          //---------------------------------
                          on return, on the form fields there are the data that can by used saving on mysql or other thinks
                          [glo_latitude] = {latitude};
                          [glo_longitude] = {longitude}

                          etc....

                          Comment


                          • #14
                            VDPVince TABLA_1 created a table with two fields LATITUDE and LONGITUDE, I created an application form for that TABLA_1 in ScriptCase and created a button JAVASCRIPT type in the code that button I wrote the code shared
                            function showPosition(position){
                            document.getElementById('id_sc_field_latitudine'). value=position.coords.latitude;
                            document.getElementById('id_sc_field_longitudine') .value=position.coords.longitude;
                            }

                            if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(showPosit ion);
                            } else {
                            // there is an error handle
                            }
                            when I run the application form the button does nothing; then I tried to place the position data in the form fields to check if they are filled by pressing the button but not so happens, this is what I did:
                            function showPosition(position){
                            document.getElementById('id_sc_field_latitudine'). value=position.coords.latitude;
                            document.getElementById('id_sc_field_longitudine') .value=position.coords.longitude;

                            {latitud} = position.coords.latitude;
                            {longitud}= position.coords.longitude;
                            }

                            if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(showPosit ion);
                            } else {
                            // there is an error handle
                            }
                            I hope I can lend a hand, I am in my first project with SCRIPTCASE.

                            Comment

                            Working...
                            X