/// <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)
{
// 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)
{
// user gets to drop a csv
// with X and Y fields.
// where is our csv parser? assetslibary?
// show title?
#region test
new { }.With(
async delegate
{
{ fixup: await Task.CompletedTask; }
var bytes = new byte[] { 0xcc };
await new IHTMLButton { "test worker " + new { Thread.CurrentThread.ManagedThreadId, bytes = bytes.ToHexString() } }.AttachToDocument().async.onclick;
await default(HopToWorker);
var output = "hello " + new { Thread.CurrentThread.ManagedThreadId, bytes = bytes.ToHexString() };
Console.Title = "progress!";
await Task.Delay(500);
new { }.With(
async delegate
{
{ fixup: await Task.CompletedTask; }
// is this supposed to work?
var output2 = "hello " + new { Thread.CurrentThread.ManagedThreadId };
await default(HopToUI);
new IHTMLPre { "progress... " + new { Thread.CurrentThread.ManagedThreadId, output2 } }.AttachToDocument();
}
);
await Task.Delay(500);
await default(HopToUI);
new IHTMLPre { "ready " + new { Thread.CurrentThread.ManagedThreadId, output } }.AttachToDocument();
// ready { ManagedThreadId = 1, output = hello { ManagedThreadId = 10 } }
}
);
#endregion
Native.css[IHTMLElement.HTMLElementEnum.head].style.display = IStyle.DisplayEnum.block;
Native.css[IHTMLElement.HTMLElementEnum.title].style.display = IStyle.DisplayEnum.block;
new { }.With(
async delegate
{
{ fixup: await Task.CompletedTask; }
Native.document.documentElement.css.hover.style.backgroundColor = "pink";
//Native.document.documentElement.css.dragover
// while await ondrop ?
Native.document.documentElement.ondragover += ee =>
{
Native.document.documentElement.style.backgroundColor = "cyan";
// await leave? unless ondrop?
};
Native.document.documentElement.ondragleave += delegate
{
Native.document.documentElement.style.backgroundColor = "";
};
new IHTMLPre { "drop a file" }.AttachToDocument();
//Native.document.documentElement.ondrop += e =>
//var e = await Native.document.documentElement.async.ondrop;
var f = await Native.document.documentElement.async.ondropfile;
Native.document.documentElement.style.backgroundColor = "yellow";
new IHTMLPre { new { Thread.CurrentThread.ManagedThreadId, f.name, f.size } }.AttachToDocument();
// { name = download.csv, size = 20851425 }
var sw = Stopwatch.StartNew();
// if the drop is from a network share it wil take a while..
//{ ManagedThreadId = 1, name = data.csv, size = 110777754 }
//{ ManagedThreadId = 1, ElapsedMilliseconds = 43418 }
var bytes = await f.readAsBytes();
new IHTMLPre { new { Thread.CurrentThread.ManagedThreadId, sw.ElapsedMilliseconds } }.AttachToDocument();
// nuget google
await google.maps.api;
#region map
var div = new IHTMLDiv
{
}.AttachToDocument();
div.style.border = "1px dashed red";
div.style.height = "300px";
div.style.left = "0px";
div.style.right = "0px";
// https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions
map = new google.maps.Map(div,
new
{
disableDefaultUI = true,
center = new { lat = 59.4329527, lng = 24.7023564 },
zoom = 6.0
}
);
new IHTMLPre { () => new { zoom = map.getZoom() } }.AttachToDocument();
var marker0 = new google.maps.Marker(
new
{
position = new
{
lat = 59.4329527,
lng = 24.7023564
},
//label = "T",
//title = "Tallinn",
map
}
);
#endregion
await new IHTMLButton { "go" }.AttachToDocument().async.onclick;
var bytes1 = bytes;
await default(HopToWorker);
// start the static line reader.
WorkerReader = new StreamReader(new MemoryStream(bytes1));
// now before we jump back to ui. lets start reading the lines...
// working... { ManagedThreadId = 1, output = hello { ManagedThreadId = 11, Length = 20851425, WorkerReaderLineCount = 0 } }
new { }.With(
async delegate
{
{ fixup: await Task.CompletedTask; }
var output = "hello " + new { Thread.CurrentThread.ManagedThreadId };
await default(HopToUI);
WorkerUI = new IHTMLPre { "working... " + new { Thread.CurrentThread.ManagedThreadId, output } }.AttachToDocument();
// cant jump back can we?
}
);
var header = WorkerReader.ReadLine();
#region rows
// Jkn;Kohanimi;Keel;Kohanime staatus;Kohanime olek;Nimeobjekti liik;Lisainfo;Maakond,omavalitsus,asustusüksus;X;Y;
//EIC;X;Y;ID;IK3MAX A;POSTOFFICE;ADDRESS
//00117987-Y;6590203.66;534216.50;6250743;2916.98;Tallinn Harju maakond;Tallinn, Nooda tee, 7
//var headerX = header.Split(';').TakeWhile(x => x != "X").Count();
//var headerY = header.Split(';').TakeWhile(x => x != "Y").Count();
var line1 = WorkerReader.ReadLine();
var sw1 = Stopwatch.StartNew();
WorkerReaderLineCount = 0;
var HasLine = !string.IsNullOrEmpty(line1);
// URI malformed at decodeURIComponent
while (HasLine)
{
WorkerReaderLineCount++;
//await Task.Delay(33);
//Console.WriteLine("520 " + new { WorkerReaderLineCount });
var x = new CSVHeaderLookup { header = header, line = line1 }["X"];
var y = new CSVHeaderLookup { header = header, line = line1 }["Y"];
//Console.WriteLine("525 " + new { WorkerReaderLineCount });
// hop supports strings for now..
var lat = "" + (double)LEST97.lest_function_vba.lest_geo(x, y, 0);
var lng = "" + (double)LEST97.lest_function_vba.lest_geo(x, y, 1);
//Console.WriteLine("531 " + new { WorkerReaderLineCount });
#region progress
//if (WorkerReaderLineCount % 500 == 1)
{
Console.Title = WorkerReaderLineCount + " in " + sw1.ElapsedMilliseconds + "ms " + new { WorkerReader.BaseStream.Position, WorkerReader.BaseStream.Length };
}
if (WorkerReaderLineCount % 300 == 1)
{
new { }.With(
async delegate
{
{ fixup: await Task.CompletedTask; }
var lng1 = lng;
var lat1 = lat;
var title1 = line1;
var output = "working... " + WorkerReaderLineCount + " in " + sw1.ElapsedMilliseconds + "ms " + new { x, y, lat, lng };
await default(HopToUI);
WorkerUI.innerText = output;
Console.WriteLine(new { lng1, lat1 });
var position = new
{
// InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
lat = Convert.ToDouble(lat1),
lng = Convert.ToDouble(lng1)
};
Console.WriteLine(new { position });
// http://stackoverflow.com/questions/20044308/google-maps-api-3-show-hide-markers-depending-on-zoom-level
// http://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-markers-visible-markers
var marker = new google.maps.Marker(
new
{
// https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined
// https://developers.google.com/maps/documentation/javascript/markers
//icon = new marker().src,
// can we have two zoom levels?
icon = new markersmall().src,
position,
//label = "T",
title = title1,
map
}
);
// http://stackoverflow.com/questions/8198635/change-marker-icon-on-mouseover-google-maps-v3
AddZoomAwareMarker(map, marker, new markersmall().src, new markerxsmall().src);
while (await marker.async.onmouseover)
{
Console.Title = title1;
}
}
);
//await Task.Delay(300);
}
#endregion
//Console.WriteLine("606 " + new { WorkerReaderLineCount });
//await Task.Delay(3);
line1 = WorkerReader.ReadLine();
HasLine = !string.IsNullOrEmpty(line1);
//Console.WriteLine("611 " + new { WorkerReaderLineCount });
}
#endregion
Console.WriteLine("done at " + new { WorkerReaderLineCount });
// done... { ManagedThreadId = 1, output = done { ManagedThreadId = 10, WorkerReaderLineCount = 153411, ElapsedMilliseconds = 99979 } }
// done... { ManagedThreadId = 1, output = done { ManagedThreadId = 10, WorkerReaderLineCount = 153411, ElapsedMilliseconds = 260865 } }
{
var output = "done " + new { Thread.CurrentThread.ManagedThreadId, WorkerReaderLineCount, sw1.ElapsedMilliseconds };
await default(HopToUI);
WorkerUI.innerText = "done... " + new { Thread.CurrentThread.ManagedThreadId, output };
// done... { ManagedThreadId = 1, output = done { ManagedThreadId = 10, WorkerReaderLineCount = 153411 } }
}
}
);
}
/// <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;
}
}
);
}
/// <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());
}
}
);
}
