Esempio n. 1
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201510/20151007
            // https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

            //chrome.AppWindow
            new { }.With(
                async delegate
            {
                // tested with
                // s6, s1, tab7, ipad2

                // tested via nfc
                //   SERIALNUMBER=38505300414, G=ARVO, SN=SULAKATKO, CN="SULAKATKO,ARVO,38505300414", OU=authentication, O=ESTEID (DIGI-ID), C=EE

                Native.document.body.style.backgroundColor = "yellow";

                new IHTMLPre {
                    " await google.maps.api"
                }.AttachToDocument();
                await google.maps.api;
                new IHTMLPre {
                    " await google.maps.api done"
                }.AttachToDocument();


                // Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

                //var api = new IHTMLScript
                //{
                //    //src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap"
                //    src = "https://maps.googleapis.com/maps/api/js?&callback=initMap"

                //    //async
                //    //defer
                //    //src = "https://maps.googleapis.com/maps/api/js?"
                //};


                ////Native.document.head.onm


                //var initMapTask = new TaskCompletionSource<object>();

                //// jsc is not exposing delegate as IFunction?
                //// Uncaught TypeError: window.initMap is not a function
                ////(Native.window as dynamic)["initMap"] = (Action)delegate

                //(Native.window as dynamic).initMap = (Action)delegate
                //{

                //    //Native.document.body.style.backgroundColor = "cyan";

                //    initMapTask.SetResult(null);
                //};



                //new { }.With(
                //    async delegate
                //    {
                //        await Native.document.head.async.onmutation;

                //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                //        await Native.document.head.async.onmutation;

                //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                //        await Native.document.head.async.onmutation;

                //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                //    }
                //);

                var div = new IHTMLDiv
                {
                    //id = "map"
                }.AttachToDocument();

                ////map.id = "map_canvas";
                //await api.AttachToHead().async.onload;


                //new IHTMLPre { new { (Native.window as dynamic).google } }.AttachToDocument();
                //new IHTMLPre { new { (Native.window as dynamic).google.maps } }.AttachToDocument();

                //await initMapTask.Task;

                //new IHTMLPre { new { (Native.window as dynamic).google.maps.Map } }.AttachToDocument();


                //api.onlo
                //await api.async.onc

                // {{ Map = function Eh(a,b)


                div.style.border = "1px dashed red";
                div.style.height = "300px";
                div.style.left   = "0px";
                div.style.right  = "0px";

                //div.style.SetSize(400, 300);


                // b: "projectionTopLeft"
                // http://stackoverflow.com/questions/5471848/how-to-get-screen-xy-from-google-maps-v3-latlng

                //await Native.window.async.onframe;

                var map = new google.maps.Map(div,
                                              new
                {
                    //center = new { lat = -34.397, lng = 150.644 },
                    center = new { lat = 59.4329527, lng = 24.7023564 },

                    //https://www.google.ee/maps/@59.4329527,24.7023564,14z?hl=en
                    zoom = 6.0
                }
                                              );

                new IHTMLPre {
                    "do you see it?"
                }.AttachToDocument();

                // https://developers.google.com/maps/documentation/javascript/examples/marker-labels

                // Uncaught TypeError: Cannot read property 'x' of undefined

                //var infoWindow = new google.maps.InfoWindow(new { map });

                //infoWindow.setPosition(map.getCenter());
                //infoWindow.setContent("InfoWindow");


                // https://developers.google.com/maps/documentation/javascript/examples/event-simple

                var marker = new google.maps.Marker(
                    new
                {
                    position = map.getCenter(),
                    //label = new { lat = 59.4329527, lng = 24.7023564 }.ToString(),
                    label = "23",
                    title = "click to zoom",
                    map
                }
                    );

                //marker.onclick += delegate
                //{
                //    map.setZoom(8.0);
                //    map.setCenter(marker.getPosition());
                //};


                //while (await marker.async.onclick)


                next:
                await marker.async.onclick;
                {
                    map.setZoom(8.0);
                    map.setCenter(marker.getPosition());

                    await marker.async.onclick;

                    map.setZoom(6.0);
                    map.setCenter(marker.getPosition());

                    goto next;
                }
            }
                );
        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

            //chrome.AppWindow
            new { }.With(
                async delegate
                {
                    Native.document.body.style.backgroundColor = "yellow";


                    // Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

                    var api = new IHTMLScript
                    {
                        //src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap"
                        src = "https://maps.googleapis.com/maps/api/js?&callback=initMap"

                        //async
                        //defer
                        //src = "https://maps.googleapis.com/maps/api/js?"
                    };


                    //Native.document.head.onm


                    var initMapTask = new TaskCompletionSource<object>();

                    // jsc is not exposing delegate as IFunction?
                    // Uncaught TypeError: window.initMap is not a function
                    //(Native.window as dynamic)["initMap"] = (Action)delegate

                    (Native.window as dynamic).initMap = (Action)delegate
                    {

                        //Native.document.body.style.backgroundColor = "cyan";

                        initMapTask.SetResult(null);
                    };



                    //new { }.With(
                    //    async delegate
                    //    {
                    //        await Native.document.head.async.onmutation;

                    //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                    //        await Native.document.head.async.onmutation;

                    //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                    //        await Native.document.head.async.onmutation;

                    //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                    //    }
                    //);

                    var div = new IHTMLDiv
                    {
                        //id = "map"
                    }.AttachToDocument();

                    //map.id = "map_canvas";
                    await api.AttachToHead().async.onload;


                    new IHTMLPre { new { (Native.window as dynamic).google } }.AttachToDocument();
                    new IHTMLPre { new { (Native.window as dynamic).google.maps } }.AttachToDocument();

                    await initMapTask.Task;

                    //new IHTMLPre { new { (Native.window as dynamic).google.maps.Map } }.AttachToDocument();


                    //api.onlo
                    //await api.async.onc

                    // {{ Map = function Eh(a,b)


                    div.style.border = "1px dashed red";


                    div.style.SetSize(400, 300);


                    // b: "projectionTopLeft"
                    // http://stackoverflow.com/questions/5471848/how-to-get-screen-xy-from-google-maps-v3-latlng

                    //await Native.window.async.onframe;

                    var map = new google.maps.Map(div,
                        new
                        {
                            center = new { lat = -34.397, lng = 150.644 },
                            zoom = 6.0
                        }
                    );

                    new IHTMLPre { "do you see it?" }.AttachToDocument();

                    // Uncaught TypeError: Cannot read property 'x' of undefined

                    var infoWindow = new google.maps.InfoWindow(new { map });

                    infoWindow.setPosition(map.getCenter());
                    infoWindow.setContent("InfoWindow");
                }
            );

        }
Esempio n. 3
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

            //chrome.AppWindow
            new { }.With(
                async delegate
            {
                Native.document.body.style.backgroundColor = "yellow";


                // Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

                var api = new IHTMLScript
                {
                    //src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap"
                    src = "https://maps.googleapis.com/maps/api/js?&callback=initMap"

                          //async
                          //defer
                          //src = "https://maps.googleapis.com/maps/api/js?"
                };


                //Native.document.head.onm


                var initMapTask = new TaskCompletionSource <object>();

                // jsc is not exposing delegate as IFunction?
                // Uncaught TypeError: window.initMap is not a function
                //(Native.window as dynamic)["initMap"] = (Action)delegate

                (Native.window as dynamic).initMap = (Action) delegate
                {
                    //Native.document.body.style.backgroundColor = "cyan";

                    initMapTask.SetResult(null);
                };



                //new { }.With(
                //    async delegate
                //    {
                //        await Native.document.head.async.onmutation;

                //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                //        await Native.document.head.async.onmutation;

                //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                //        await Native.document.head.async.onmutation;

                //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                //    }
                //);

                var div = new IHTMLDiv
                {
                    //id = "map"
                }.AttachToDocument();

                //map.id = "map_canvas";
                await api.AttachToHead().async.onload;


                new IHTMLPre {
                    new { (Native.window as dynamic).google }
                }.AttachToDocument();
                new IHTMLPre {
                    new { (Native.window as dynamic).google.maps }
                }.AttachToDocument();

                await initMapTask.Task;

                //new IHTMLPre { new { (Native.window as dynamic).google.maps.Map } }.AttachToDocument();


                //api.onlo
                //await api.async.onc

                // {{ Map = function Eh(a,b)


                div.style.border = "1px dashed red";


                div.style.SetSize(400, 300);


                // b: "projectionTopLeft"
                // http://stackoverflow.com/questions/5471848/how-to-get-screen-xy-from-google-maps-v3-latlng

                //await Native.window.async.onframe;

                var map = new google.maps.Map(div,
                                              new
                {
                    center = new { lat = -34.397, lng = 150.644 },
                    zoom   = 6.0
                }
                                              );

                new IHTMLPre {
                    "do you see it?"
                }.AttachToDocument();

                // Uncaught TypeError: Cannot read property 'x' of undefined

                var infoWindow = new google.maps.InfoWindow(new { map });

                infoWindow.setPosition(map.getCenter());
                infoWindow.setContent("InfoWindow");
            }
                );
        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // Z:\jsc.svn\examples\javascript\io\DropLESTToDisplay\DropLESTToDisplay\Application.cs
            // http://xgis.maaamet.ee/xGIS/XGis?app_id=UU82&user_id=at&bbox=529464.185181536,6581178.67615528,549196.965601648,6593508.79911233&LANG=1
            // http://www.maaamet.ee/rr/geo-lest/files/geo-lest_function_vba.txt

            // can we have a list of cities on ?

            var Helsinki = new { x = 6671069.664199971, y = 552396.6626611819 };
            var Tallinn = new { x = 6589000.065127177, y = 542791.0230507818 };
            var Haapsalu = new { x = 6533398.0, y = 480832.0 };
            var Narva = new { x = 6589333.658324879, y = 737954.1228769943 };
            var Tartu = new { x = 6474047.4766877275, y = 659622.4604005406 };



            // alright lets do this.

            new { }.With(
              async delegate
              {
                  await google.maps.api;


                  var div = new IHTMLDiv
                  {
                  }.AttachToDocument();

                  div.style.border = "1px dashed red";
                  div.style.height = "300px";
                  div.style.left = "0px";
                  div.style.right = "0px";

                  // Z:\jsc.svn\examples\javascript\io\DropLESTToDisplay\DropLESTToDisplay\Application.cs
                  var map = new google.maps.Map(div,
                      new
                      {

                          center = new { lat = 59.4329527, lng = 24.7023564 },
                          zoom = 6.0
                      }
                  );

                  var all = new[] { Helsinki, Tallinn, Haapsalu, Narva, Tartu };

                  all.WithEach(
                       data =>
                       {
                           var marker = new google.maps.Marker(
                              new
                              {
                                  position = new
                                  {
                                      lat = LEST97.lest_function_vba.lest_geo(data.x, data.y, 0),
                                      lng = LEST97.lest_function_vba.lest_geo(data.x, data.y, 1)
                                  },
                                  //label = "T",
                                  //title = "Tallinn",
                                  map
                              }
                           );
                       }
                     );





                  new IHTMLPre
                  {
                      () =>
                          new
                          {
                              map.getCenter().lat,
                              map.getCenter().lng,

                              x = LEST97.lest_function_vba.geo_lest( map.getCenter().lat, map.getCenter().lng, 0),
                              y = LEST97.lest_function_vba.geo_lest( map.getCenter().lat, map.getCenter().lng, 1),
                          }
                  }.AttachToDocument();


                  // Cannot read property 'getSouthWest' of undefined
                  new IHTMLPre
                  {
                      //  rectangle.addListener('bounds_changed', showNewRect);

                      delegate
                      {

                          if (map.getBounds() == null)
                          {
                              return "n/a";
                          }

                          var getSouthWest_lat = map.getBounds().getSouthWest().lat;
                          var getSouthWest_lng = map.getBounds().getSouthWest().lng;

                          var getNorthEast_lat = map.getBounds().getNorthEast().lat;
                          var getNorthEast_lng = map.getBounds().getNorthEast().lng;


                          var count = (
                            from data in all

                            let lat = (double)LEST97.lest_function_vba.lest_geo(data.x, data.y, 0)
                            let lng = (double)LEST97.lest_function_vba.lest_geo(data.x, data.y, 1)


                            // lng left to right
                            // lng bottom to top

                            where lat <= getNorthEast_lat
                            where lng <= getNorthEast_lng

                            where lat >= getSouthWest_lat
                            where lng >= getSouthWest_lng

                            select data
                          ).Count();

                          return new
                          {
                              getSouthWest_lat,
                              getSouthWest_lng,

                              getNorthEast_lat,
                              getNorthEast_lng,

                              count
                          }.ToString();
                      }
                  }.AttachToDocument();

                  // http://stackoverflow.com/questions/2472957/how-can-i-change-the-color-of-a-google-maps-marker


                  #region Add
                  new IHTMLButton { "Add" }.AttachToDocument().onclick += delegate
                  {
                      var data = new
                      {
                          map.getCenter().lat,
                          map.getCenter().lng,

                          x = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 0),
                          y = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 1),
                      };

                      new IHTMLPre { "new { x = " + data.x + ", y = " + data.y + " }" }.AttachToDocument();

                      var marker = new google.maps.Marker(
                        new
                        {
                            position = new
                            {
                                lat = LEST97.lest_function_vba.lest_geo(data.x, data.y, 0),
                                lng = LEST97.lest_function_vba.lest_geo(data.x, data.y, 1)
                            },
                            //label = "H",
                            title = data.ToString(),
                            map
                        }
                     );
                  };
                  #endregion



                  #region Add Bounds
                  new IHTMLButton { "Add Bounds" }.AttachToDocument().onclick += delegate
                  {
                      new google.maps.Marker(
                        new
                        {
                            position = new
                            {
                                map.getBounds().getSouthWest().lat,
                                map.getBounds().getSouthWest().lng,
                            },
                            map
                        }
                     );

                      new google.maps.Marker(
                        new
                        {
                            position = new
                            {
                                map.getBounds().getNorthEast().lat,
                                map.getBounds().getNorthEast().lng,
                            },
                            map
                        }
                     );

                      new google.maps.Marker(
                    new
                    {
                        position = new
                        {
                            map.getBounds().getSouthWest().lat,
                            map.getBounds().getNorthEast().lng,
                        },
                        map
                    }
                 );

                      new google.maps.Marker(
                        new
                        {
                            position = new
                            {
                                map.getBounds().getNorthEast().lat,
                                map.getBounds().getSouthWest().lng,
                            },
                            map
                        }
                     );
                  };
                  #endregion

              }

            );



        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201510/20151007
            // https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

            //chrome.AppWindow
            new { }.With(
                async delegate
                {
                    // tested with
                    // s6, s1, tab7, ipad2

                    // tested via nfc
                    //   SERIALNUMBER=38505300414, G=ARVO, SN=SULAKATKO, CN="SULAKATKO,ARVO,38505300414", OU=authentication, O=ESTEID (DIGI-ID), C=EE

                    Native.document.body.style.backgroundColor = "yellow";

                    new IHTMLPre { " await google.maps.api" }.AttachToDocument();
                    await google.maps.api;
                    new IHTMLPre { " await google.maps.api done" }.AttachToDocument();


                    // Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

                    //var api = new IHTMLScript
                    //{
                    //    //src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap"
                    //    src = "https://maps.googleapis.com/maps/api/js?&callback=initMap"

                    //    //async
                    //    //defer
                    //    //src = "https://maps.googleapis.com/maps/api/js?"
                    //};


                    ////Native.document.head.onm


                    //var initMapTask = new TaskCompletionSource<object>();

                    //// jsc is not exposing delegate as IFunction?
                    //// Uncaught TypeError: window.initMap is not a function
                    ////(Native.window as dynamic)["initMap"] = (Action)delegate

                    //(Native.window as dynamic).initMap = (Action)delegate
                    //{

                    //    //Native.document.body.style.backgroundColor = "cyan";

                    //    initMapTask.SetResult(null);
                    //};



                    //new { }.With(
                    //    async delegate
                    //    {
                    //        await Native.document.head.async.onmutation;

                    //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                    //        await Native.document.head.async.onmutation;

                    //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                    //        await Native.document.head.async.onmutation;

                    //        new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument();

                    //    }
                    //);

                    var div = new IHTMLDiv
                    {
                        //id = "map"
                    }.AttachToDocument();

                    ////map.id = "map_canvas";
                    //await api.AttachToHead().async.onload;


                    //new IHTMLPre { new { (Native.window as dynamic).google } }.AttachToDocument();
                    //new IHTMLPre { new { (Native.window as dynamic).google.maps } }.AttachToDocument();

                    //await initMapTask.Task;

                    //new IHTMLPre { new { (Native.window as dynamic).google.maps.Map } }.AttachToDocument();


                    //api.onlo
                    //await api.async.onc

                    // {{ Map = function Eh(a,b)


                    div.style.border = "1px dashed red";
                    div.style.height = "300px";
                    div.style.left = "0px";
                    div.style.right = "0px";

                    //div.style.SetSize(400, 300);


                    // b: "projectionTopLeft"
                    // http://stackoverflow.com/questions/5471848/how-to-get-screen-xy-from-google-maps-v3-latlng

                    //await Native.window.async.onframe;

                    var map = new google.maps.Map(div,
                        new
                        {

                            //center = new { lat = -34.397, lng = 150.644 },
                            center = new { lat = 59.4329527, lng = 24.7023564 },

                            //https://www.google.ee/maps/@59.4329527,24.7023564,14z?hl=en
                            zoom = 6.0
                        }
                    );

                    new IHTMLPre { "do you see it?" }.AttachToDocument();

                    // https://developers.google.com/maps/documentation/javascript/examples/marker-labels

                    // Uncaught TypeError: Cannot read property 'x' of undefined

                    //var infoWindow = new google.maps.InfoWindow(new { map });

                    //infoWindow.setPosition(map.getCenter());
                    //infoWindow.setContent("InfoWindow");


                    // https://developers.google.com/maps/documentation/javascript/examples/event-simple

                    var marker = new google.maps.Marker(
                        new
                        {
                            position = map.getCenter(),
                            //label = new { lat = 59.4329527, lng = 24.7023564 }.ToString(),
                            label = "23",
                            title = "click to zoom",
                            map
                        }
                     );

                    //marker.onclick += delegate
                //{
                //    map.setZoom(8.0);
                //    map.setCenter(marker.getPosition());
                //};


                    //while (await marker.async.onclick)


                    next:
                    await marker.async.onclick;
                    {

                        map.setZoom(8.0);
                        map.setCenter(marker.getPosition());

                        await marker.async.onclick;

                        map.setZoom(6.0);
                        map.setCenter(marker.getPosition());

                        goto next;
                    }
                }
            );

        }
Esempio n. 6
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // Z:\jsc.svn\examples\javascript\io\DropLESTToDisplay\DropLESTToDisplay\Application.cs
            // http://xgis.maaamet.ee/xGIS/XGis?app_id=UU82&user_id=at&bbox=529464.185181536,6581178.67615528,549196.965601648,6593508.79911233&LANG=1
            // http://www.maaamet.ee/rr/geo-lest/files/geo-lest_function_vba.txt

            // can we have a list of cities on ?

            var Helsinki = new { x = 6671069.664199971, y = 552396.6626611819 };
            var Tallinn  = new { x = 6589000.065127177, y = 542791.0230507818 };
            var Haapsalu = new { x = 6533398.0, y = 480832.0 };
            var Narva    = new { x = 6589333.658324879, y = 737954.1228769943 };
            var Tartu    = new { x = 6474047.4766877275, y = 659622.4604005406 };



            // alright lets do this.

            new { }.With(
                async delegate
            {
                await google.maps.api;


                var div = new IHTMLDiv
                {
                }.AttachToDocument();

                div.style.border = "1px dashed red";
                div.style.height = "300px";
                div.style.left   = "0px";
                div.style.right  = "0px";

                // Z:\jsc.svn\examples\javascript\io\DropLESTToDisplay\DropLESTToDisplay\Application.cs
                var map = new google.maps.Map(div,
                                              new
                {
                    center = new { lat = 59.4329527, lng = 24.7023564 },
                    zoom   = 6.0
                }
                                              );

                var all = new[] { Helsinki, Tallinn, Haapsalu, Narva, Tartu };

                all.WithEach(
                    data =>
                {
                    var marker = new google.maps.Marker(
                        new
                    {
                        position = new
                        {
                            lat = LEST97.lest_function_vba.lest_geo(data.x, data.y, 0),
                            lng = LEST97.lest_function_vba.lest_geo(data.x, data.y, 1)
                        },
                        //label = "T",
                        //title = "Tallinn",
                        map
                    }
                        );
                }
                    );



                new IHTMLPre
                {
                    () =>
                    new
                    {
                        map.getCenter().lat,
                        map.getCenter().lng,

                        x = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 0),
                        y = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 1),
                    }
                }.AttachToDocument();


                // Cannot read property 'getSouthWest' of undefined
                new IHTMLPre
                {
                    //  rectangle.addListener('bounds_changed', showNewRect);

                    delegate
                    {
                        if (map.getBounds() == null)
                        {
                            return("n/a");
                        }

                        var getSouthWest_lat = map.getBounds().getSouthWest().lat;
                        var getSouthWest_lng = map.getBounds().getSouthWest().lng;

                        var getNorthEast_lat = map.getBounds().getNorthEast().lat;
                        var getNorthEast_lng = map.getBounds().getNorthEast().lng;


                        var count = (
                            from data in all

                            let lat = (double)LEST97.lest_function_vba.lest_geo(data.x, data.y, 0)
                                      let lng = (double)LEST97.lest_function_vba.lest_geo(data.x, data.y, 1)


                                                // lng left to right
                                                // lng bottom to top

                                                where lat <= getNorthEast_lat
                                                where lng <= getNorthEast_lng

                                                where lat >= getSouthWest_lat
                                                where lng >= getSouthWest_lng

                                                select data
                            ).Count();

                        return(new
                        {
                            getSouthWest_lat,
                            getSouthWest_lng,

                            getNorthEast_lat,
                            getNorthEast_lng,

                            count
                        }.ToString());
                    }
                }.AttachToDocument();

                // http://stackoverflow.com/questions/2472957/how-can-i-change-the-color-of-a-google-maps-marker


                #region Add
                new IHTMLButton {
                    "Add"
                }.AttachToDocument().onclick += delegate
                {
                    var data = new
                    {
                        map.getCenter().lat,
                        map.getCenter().lng,

                        x = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 0),
                        y = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 1),
                    };

                    new IHTMLPre {
                        "new { x = " + data.x + ", y = " + data.y + " }"
                    }.AttachToDocument();

                    var marker = new google.maps.Marker(
                        new
                    {
                        position = new
                        {
                            lat = LEST97.lest_function_vba.lest_geo(data.x, data.y, 0),
                            lng = LEST97.lest_function_vba.lest_geo(data.x, data.y, 1)
                        },
                        //label = "H",
                        title = data.ToString(),
                        map
                    }
                        );
                };
                #endregion



                #region Add Bounds
                new IHTMLButton {
                    "Add Bounds"
                }.AttachToDocument().onclick += delegate
                {
                    new google.maps.Marker(
                        new
                    {
                        position = new
                        {
                            map.getBounds().getSouthWest().lat,
                            map.getBounds().getSouthWest().lng,
                        },
                        map
                    }
                        );

                    new google.maps.Marker(
                        new
                    {
                        position = new
                        {
                            map.getBounds().getNorthEast().lat,
                            map.getBounds().getNorthEast().lng,
                        },
                        map
                    }
                        );

                    new google.maps.Marker(
                        new
                    {
                        position = new
                        {
                            map.getBounds().getSouthWest().lat,
                            map.getBounds().getNorthEast().lng,
                        },
                        map
                    }
                        );

                    new google.maps.Marker(
                        new
                    {
                        position = new
                        {
                            map.getBounds().getNorthEast().lat,
                            map.getBounds().getSouthWest().lng,
                        },
                        map
                    }
                        );
                };
                #endregion
            }

                );
        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            Native.body.Clear();

            new IHTMLAnchor { href = "/jsc", innerText = "enter diagnostic mode" }.AttachToDocument();







            new { }.With(
                async delegate
                {


                    // Severity	Code	Description	Project	File	Line
                    //Error CS7069  Reference to type 'TaskAwaiter<>' claims it is defined in 'mscorlib', but it could not be found GoogleMapsTracker Z:\jsc.svn\examples\javascript\data\GoogleMapsTracker\Application.cs    40


                    // the new using
                    // 4.6
                    // stored at Z:\jsc.svn\examples\javascript\data\packages
                    // is that where jsc and nuget both agree to store it? no. jsc needs to mimick nuget here.

                    // did we build it?
                    await google.maps.api;


                    var div = new IHTMLDiv
                    {
                        //}.AttachTo(Native.document.documentElement);


                        // future jsc will have the ability to make offline edit and continue changes
                    }.AttachTo(Native.body);

                    div.style.position = IStyle.PositionEnum.absolute;
                    div.style.borderBottom = "1px dashed red";
                    div.style.height = "400px";
                    div.style.top = "0px";
                    div.style.left = "0px";
                    div.style.right = "0px";

                    Native.body.style.marginTop = "420px";

                    // Free until exceeding 25,000 map loads per day for 90 consecutive days
                    var map = new google.maps.Map(div,
                        new
                        {
                            // https://developers.google.com/maps/documentation/javascript/examples/control-disableUI
                            disableDefaultUI = true,


                            center = new { lat = 59.4329527, lng = 24.7023564 },

                            //https://www.google.ee/maps/@59.4329527,24.7023564,14z?hl=en
                            zoom = 6.0
                        }
                    );

                    // https://developers.google.com/maps/documentation/javascript/examples/event-simple



                    var flightPlanCoordinates = new[] {
                        // Object literals are accepted in place of LatLng objects, as a convenience, in many places
                        new { lat = 59.4329527 - 0.25, lng = 24.7023564 - 0.5},
                        new { lat = 59.4329527 - 0.25, lng = 24.7023564 + 0.5 },

                        // up, right
                        new { lat = 59.4329527 + 0.25, lng = 24.7023564 + 0.5},
                        new { lat = 59.4329527 + 0.25, lng = 24.7023564 - 0.5},

                        // close the line
                        //new { lat = 59.4329527 - 0.25, lng = 24.7023564 - 0.5},
                    };


                    // https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
                    var flightPath = new google.maps.Polyline(new
                    {
                        path = flightPlanCoordinates.Concat(flightPlanCoordinates.Take(1)).ToArray(),
                        geodesic = true,
                        strokeColor = "#FF0000",
                        strokeOpacity = 1.0,
                        strokeWeight = 2
                    });

                    // like a stlus huh.
                    flightPath.setMap(map);


                    // alternative is we play a pre recored session.


                    new { }.With(
                        async delegate
                        {
                            await new IHTMLButton { "load other replays (?)" }.AttachToDocument().async.onclick;

                            var other = new IHTMLSelect { }.AttachToDocument();

                            var replayIDs = await base.GetAllReplays();

                            if (replayIDs.Length == 0)
                            {
                                other.Add("n/a");
                                return;
                            }

                            other.Add(replayIDs);

                            var btn = new IHTMLButton { "select one of them!" }.AttachToDocument();

                            other.onchange += async delegate
                            {
                                var xreplayID = other[other.selectedIndex].value;

                                btn.innerText = "show " + new { other.selectedIndex, xreplayID }.ToString();

                                var count = await base.GetReplayCount(xreplayID);

                                btn.innerText = "show " + new { other.selectedIndex, xreplayID, count }.ToString();

                            };

                            btn.onclick += async delegate
                            {
                                // draw polygon onto map from database.

                                var xreplayID = other[other.selectedIndex].value;

                                var sw = Stopwatch.StartNew();

                                new IHTMLPre { () => new { sw.ElapsedMilliseconds } }.AttachToDocument();

                                var xreplay = await base.GetReplay(xreplayID);

                                sw.Stop();

                                new IHTMLPre { () => new { xreplay.Length } }.AttachToDocument();

                                // can gmaps use our datarows too? yes.
                                // will this work on android? and appengine, mysql? and ubuntu?
                                var xreplayPath = new google.maps.Polyline(new
                                {
                                    path = xreplay.ToArray(),
                                    geodesic = true,
                                    strokeColor = "#00FF00",
                                    strokeOpacity = 1.0,
                                    strokeWeight = 4
                                });

                                // like a stlus huh.
                                xreplayPath.setMap(map);
                            };
                        }
                    );



                    // replayID	lat as double	lng as double	comment
                    // we are to record a new 
                    var replayID = "replayID" + new Random().Next().ToString("x8");

                    // lets use this id to stream to database. can be used for later replay?
                    await new IHTMLButton { "record new session as " + replayID }.AttachToDocument().async.onclick;


                    new IHTMLButton { "reload" }.AttachToDocument().onclick += delegate
                    {
                        Native.document.location.reload();
                    };


                    var sw1 = Stopwatch.StartNew();
                    var stop = new IHTMLButton { "stop" }.AttachToDocument().async.onclick;
                    var stop2 = false;


                    // can we now do the autodrawer?

                    // load from db?
                    var history = new List<google.maps.LatLng> { };

                    //var delete = delegate
                    //  Console: Uncaught SyntaxError: Unexpected token delete http://192.168.1.126:15175/view-source:80480

                    // should jsc rename delete token like we do for catch?
                    Action dodelete = delegate
                    {
                    };

                    new { }.With(
                        async delegate
                        {
                            // at every so often remember the point and redraw.

                            //while  await Task.Delay()
                            do
                            {
                                // 1 fps?
                                //await Task.Delay(1000 / 1);
                                //await Task.Delay(1000 / 15);
                                await Task.Delay(1000 / 4);




                                // unless we did not move?
                                history.Add(
                                    map.getCenter()
                                );

                                while (history.Count > 128)
                                    history.RemoveAt(0);

                                dodelete();

                                var historyPath = new google.maps.Polyline(new
                                {
                                    path = history.ToArray(),
                                    geodesic = true,
                                    strokeColor = "#0000FF",
                                    strokeOpacity = 1.0,
                                    strokeWeight = 4
                                });

                                // like a stlus huh.
                                historyPath.setMap(map);

                                dodelete = delegate
                                {
                                    historyPath.setMap(null);
                                };

                                // show buzy
                                div.style.borderBottom = "1px dashed red";
                                await base.AddHistory(replayID, map.getCenter().lng, map.getCenter().lat);

                                // show ready
                                div.style.borderBottom = "1px dashed blue";

                            }
                            while (!stop.IsCompleted);

                            sw1.Stop();
                        }
                    );



                    var marker = new google.maps.Marker(
                                new
                                {
                                    position = map.getCenter(),
                                    label = "R",
                                    title = "click to zoom",
                                    map
                                }
                             );




                    // lets keep polling where are we looking at
                    //new IHTMLPre { () => new { Position = marker.getPosition() } }.AttachToDocument();
                    new IHTMLPre { () => new { stop = stop.IsCompleted, sw1.ElapsedMilliseconds, history.Count, getCenter = map.getCenter(), map.getCenter().lat, map.getCenter().lng } }.AttachToDocument();



                    //new IHTMLPre { map.getCenter }.AttachToDocument();
                    //new IHTMLPre().Add()
                    //while (!stop.IsCompleted)
                    while (true)
                    {
                        await marker.async.onclick;


                        // can we make the poly dissapear?
                        flightPath.setMap(null);

                        map.setZoom(8.0);
                        map.setCenter(marker.getPosition());

                        await marker.async.onclick;

                        // and reappeaar
                        flightPath.setMap(map);

                        map.setZoom(6.0);
                        map.setCenter(marker.getPosition());

                    }



                }


            );
        }