Data file location relative to html when running Azure Maps tutorials locally - atlas.io.read() - azure-maps

Trying to determine how to revise the atlas.ioread() function from the Azure Maps tutorial below to read the data locally on my windows machine.
atlas.io.read(window.location.origin + '/Common/data/Gpx/Route66Attractions.xml')
Does the 'window.location.origins +' work with local files?
I have nested the .xml file similarly to the above string, relative to the html file, however, it does reading the file when the map is launched.
Azure Maps Tutorial:
https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Spatial%20IO%20Module/Load%20spatial%20data%20(simple).html

That function won't be able to access local files directly as the URL must be a http or https URL. There are a couple of approaches you can take.
If you plan to host the file later, you can host it locally on localhost and then have a URL pointing to it.
If you want to access local files, you will first need to load the file into your app using the file input tag and the FileReader class. Once you have the raw file data (text), you can pass that into the atlas.io.read function and it will process if for you. Here is a simple example:
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add reference to the Azure Maps Spatial IO module. -->
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>
</head>
<body>
<input type="file" name="inputfile" id="inputfile">
<script type="text/javascript">
window.onload = function() {
var input = document.getElementById('inputfile');
input.addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function(){
atlas.io.read(fr.result).then(function(r){
//r is the parsed data. Do something with it.
});
}
fr.readAsText(input.files[0]);
});
});
</script>
</body>
</html>

Related

Removing .html from end of url in javalin

I'm using Javalin to serve my static web pages, which I've never done before. I know it's possible in Nginx to remove the .html from the end of your url but still route to the correct page, for example mysite.com/login would replace mysite.com/login.html but still point towards my login.html file. Is this possible in Javalin?
I've tried looking into the config (StaticFileConfig) but couldn't seem to find anything that would solve this problem
Here are two examples of what was discussed in the comments to the question, for future visitors:
The first example assumes there is a simple HTML file in the application's resources/html folder.
The test.html file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>Hello world.</div>
</body>
</html>
The /test handler:
public static void main(String[] args) {
Javalin.create(config -> {
})
.get("/test", ctx -> {
ctx.contentType(ContentType.TEXT_HTML);
InputStream in = App.class.getResourceAsStream("/html/test.html");
ctx.result(in);
})
.start(8080);
}
If you choose to configure Javalin with Thymeleaf, and if you place your HTML file in the default location expected by Thymeleaf (resources/thymeleaf), then you can do this:
.get("/test", ctx -> {
Map<String, Object> model = new HashMap<>();
ctx.render("test.html", model);
})
In this case, the model used by Thymeleaf for rendering is empty because you don't need to make any substitutions in your HTML file (it's not a template). But it's a short step from this to using dynamic Thymeleaf templates.
I followed what andrewJames was saying and that worked for me. I was hoping there would be a cleaner way of doing this, as I'm just copy pasting the same code for every endpoint and changing the file path, but this works.

Is there any "serverless" / global database hosting?

I am bulling a little python + GTK app.
I need a way where I can store some index data on a server.
First I looked at RedHat´s OpenShift as the server rest-backend (python + flask + mysql)
But now I am thinking is there a way to just put some data into the "cloud".
I know the cloud just I a buzz word for other peoples computers / servers.
But something like the bitcoin where you just push some key/val data then any node in the network gets the data after some time.
Apache Cassandra look like can do some thing like this.
But I don't want to host anything.
Some thing like this.
$ datacloud <openid> <password> <databucket>
$ datacloud add <key> <jsondata / val>
$ datacloud get <key>
$ <jsondata>
Or in python.
import datacloud as dc
import json
def main():
dc.connect("<myopenid.provider.org>", "<password>", "<databucket>")
ds.add("key", json.dumps({"hello":"world"}))
for data in dc:
print data
print dc.get("<key>")
--> { "hello": "world"}
Or better just with jQuery.
<html>
<head>
<script href="pathto/jquery.js"></script>
<title>ServerLess / local site</title>
<script>
$(function(){
$.ajax({
url: "magnet:?xt=urn:btih:5dee65101db281ac9c46344cd6b175cdcad53426",
data: {
"openid": "<openid.myopenidprovier.org>",
"password": "<12345>",
"bucket": "<databucket>"
}
}).done(function(keys){
for(var i=0; i < keys.length; i++)
$('#news').append('<h3>'+key[i]+'</h3>');
});
});
</script
</head>
<body>
<h1>News with no server</h1>
<div id="news"></div>
</body>
</html>
I am looking for an p2p global key/val store.
... an freenet like data global key/val cache or store..
Update: the idea base on #SLaks comments.
<html>
<head>
<script href="pathto/jquery.js"></script>
<title>ServerLess / local site</title>
<script>
$(function(){
$.ajax({
url: "magnet:?xt=urn:btih:5dee65101db281ac9c46344cd6b175cdcad53426",
data: {
"pubkey": "<id_rsa.pub>",
"bucket": "<databucket>"
}
}).done(function(keys){
for(var i=0; i < keys.length; i++)
$('#news').append('<h3>'+key[i]+'</h3>');
});
});
</script
</head>
<body>
<h1>News with no server</h1>
<div id="news"></div>
</body>
</html>
Use ssh-keygen -t rsa
So only the admin can add data.
Um, no. A P2P network without commercial interest will not host your database for free.
So, you really just need a minimal database storage? You can buy that from multiple places. Look at the overly known Amazon AWS stuff. I'm sure you can rent database VM instances, too, or directly use the Amazon relational database service. I think for your "nearly no users, nearly no data" thing, a simple VM with a secure preconfigured database that you can only connect to through SSH or some VPN will probably be the most cost-effective solution.
However, it sounds like you'd quickly whip up a webservice, which would allow you to authenticate simple HTTPS clients securely, and then ask for / store the data of your application through that. That way, you can also solve the dilemma of not sharing your credentials with others.

Error:The connection to the server was unsuccessfull(fake) in Angularjs App

I am creating an angular app with Intel XDK.I have data on local storage.when I run the app in offline a message will appear after few minutes like "Application error:The connection to the server was unsuccessful(fake)" and stop the application spontaneously.how to manage this.I expect a hopeful solution to recover this.
app.js
$scope.checkConnection=function() {
var networkState = navigator.connection.type;
if(networkState == Connection.NONE){
$scope.footer_message = "No Network Connection";
return false;
}else{
$scope.footer_message = "Obidos Technologies (P) Ltd";
return true;
}
}
$scope.checkConnection();
If you are seeing inconsistent/transient error messages saying something like [Connection to server was unsuccessful to “www/assets/index.html”] when starting up your app. This is caused by your App timing out. You can either increase the time-out time, but will only reduce the frequency of the issue, or you can:
1.Rename your index.html to “main.html”
2.Create a new “index.html” and put the following content into it:
<!doctype html>
<html>
<head>
<title>tittle</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>
3.Rebuild your app! No more errors!

wpf webBrowser NavigateToString script error

I want to use the Wpf webBrowser control to render math equations.
I've downloaded MathJax, and included it in my Visual studio project.
I've tryed to load one of the MathJax example. This is the html code i'm using:
<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
<!-- Copyright (c) 2010-2012 Design Science, Inc. -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="MathJax-Reduced/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></script>
</head>
<body>
<p>
When
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><mo>≠</mo><mn>0</mn>
</math>,
there are two solutions to
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo> <mi>b</mi><mi>x</mi>
<mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
</math>
</p>
</body>
</html>
Everything is working fine with the following code:
string curDir = Directory.GetCurrentDirectory();
this.webBrowser1.Navigate(new Uri(String.Format("file:///{0}/test-1.html", curDir)));
But if i try this code:
string s = File.ReadAllText(Directory.GetCurrentDirectory() + "\\test-1.html");
this.webBrowser1.NavigateToString(s);
i get a Script Error:
An error has occurred in the script on this page.
Line: 1
Char: 1
Error: Syntax Error
Code: 0
URL: about:MathJax-Reduced/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full
What's wrong? It would be really helpful to use something similar to the last code, so i can avoid to save a file just to load it...
Note that the URL in the error is about:MathJax-Reduced/unpacked..., which is an about URL not the file:// URL that you had in the first case. I suspect that is the cause of the problem. That suggests that the NavigateToString function is using about:blank or a similar URL as the base URL for the page, so MathJax is getting the wrong path to itself. Note that you lose the actual page location when reading it from the file and loading it as a string. That means you may have to load MathJax from an absolute URL rather than a relative one (i.e., include the file:// and path to the MathJax-Reduced directory).

Composite C1 4.0 Beta and MVC Player outputting 2nd html and body tags

I have setup and installed the Composite C1 4.0 beta, along with the latest MVC Player build (from 12/7/2012 nightly), but whenever I call the MVCPlayer function, it outputs additional tags on the page. For example, I am calling a MVCPlayer function for breadcrums. This is the output:
..... before breadcrum content .....
<a name="site-nav" class="screen-reader"></a>
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
<html>
<head />
<body>
<!-- START BREADCRUM SECTION -->
<ul id="breadcrumbs">
<li>Homep</li>
<li>Events</li>
</ul>
<!-- END BREADCRUM SECTION -->
</body>
</html>
</body>
</html>
<div class="clear"></div>
</div>
..... rest of page .....
As you can see, it is in the middle of the page. The MVCPlayer is returning an XDocument in the render function. So, how do I get rid of the extra tags before the START & END BREADCRUM SECTION comments? The page renders fine, but this is impacting the ability for me to use a page filter to add additional content to the output, such as switching out image tag src's so I can use a jquery script to perform lazy loading images (see http://www.appelsiini.net/projects/lazyload).
Any thoughts?
Thanks!
Chad
The output of the actual breadcrums page is simply <ul><li>...</li></ul>, and there are no errors in the log files. The MVC Player actually adds the additional code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
</body>
</html>
In the Player.cs file, here is the code:
var sbHtml = new StringBuilder();
sbHtml
.Append(#"<html xmlns=""http://www.w3.org/1999/xhtml"">
<head/>
<body>")
.Append(responseWriter.ToString())
.Append(#"
</body>
</html>");
try
{
return XDocument.Parse(sbHtml.ToString());
}
I was able to modify the /Renderers/Page.aspx.cs and changed this line to "strip" out the extra tags:
Original:
xhtml = _renderingContext.FormatXhtml(xhtml);
Updated:
xhtml = _renderingContext.FormatXhtml(xhtml.Replace(#"<html xmlns=""http://www.w3.org/1999/xhtml"">", "").Replace("<html>", "").Replace("<head />", "").Replace("<head></head>", "").Replace("<body>", "").Replace("</body>", "").Replace("</html>", ""));
I'm sure there is a better solution than this? :)
Chad
It could be that somewhere else on the the page you have markup which makes the whole result document and invalid XHTML, and therefore the system cannot process it correctly.
Try to
a) Check the log files to see if there any related warnings
b) validate the output xhtml http://www.xmlvalidation.com/

Resources