I'm trying to use Google Maps API with new layers created directly in the Google Maps platform, and exported to a .kml file. The guide used was main one available at Google Developer's portal.
However, it seems the KML file is unable to load properly. http://1c.1contact.ch/mandats/map1.html
The code to connect and load the the map is bellow (it was adapted from https://developers.google.com/maps/documentation/javascript/kmllayer):
<script>
var map;
var src = 'http://1c.1contact.ch/file/2573/GE.kml';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* #param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
</script>
What's the proper method to accomplish this .KML usage?
Best wishes,
The KML file you specified (http://1c.1contact.ch/file/2573/GE.kml) won't load because it is not publicly accessible on the web. It appears to be behind a login page on that server. Even if you're logged in with your browser, the Google Maps code and rendering system will not have access to the file, so you need to put it somewhere publicly accessible.
Related
Please help me with Notification in my Firefox add-on.
var notifications = require("sdk/notifications");
function showNotifcation(title, text) {
notifications.notify({
iconURL: data.url("img/icon.png"),
title: title,
text: text
});
setTimeout(notifications.close(), 1000);
}
Not work.
Without more information from you it is not possible to be sure as to what your problem/issue is.
However, a brief look at the sdk/notifications documentation, and source code, indicates that you are attempting to use a non-existent method: notifications.close(). There is no such method in sdk/notifications.
One possible reason for your attempt to use this method is that you are conflating the Web Notification API, more detail, with the Add-on SDK sdk/notifications.
The Add-on SDK, sdk/notifications, has no way for you to programmatically close the notification from your code. Thus, there is no way for you to set a timeout for the notification using this interface. However, in some operating systems/windowing systems there is already a default timeout for these notifications.
You will need to either display a panel on your own, or use the chrome interfaces described in User Notifications and Alerts.
In addition, it would be unusual for you to be able to just call setTimeout(). That will, under most contexts, not be defined. You would normally need to use sdk/timers with:
var { setTimeout } = require("sdk/timers");
In some contexts, you might be able to use window.setTimeout(), when window is appropriately defined (which you will probably have to set yourself).
Modifying the code from my answer to Prevent XUL notificationBox from closing when button is hit (if you want buttons, that answer will show you how to do it), and other answers of mine: Something along the lines of what I believe you desire would be (code for the timeout is at the bottom):
function showNotificationBox(text) {
//Create some common variables if they do not exist.
if (window === null || typeof window !== "object") {
// Add/remove a "/" to comment/un-comment the code appropriate for your add-on:
//* Add-on SDK:
var window = require('sdk/window/utils').getMostRecentBrowserWindow();
//*/
/* Overlay and bootstrap (from almost any context/scope):
var window=Components.classes["#mozilla.org/appshell/window-mediator;1"]
.getService(Components.interfaces.nsIWindowMediator)
.getMostRecentWindow("navigator:browser");
//*/
}
if (typeof gBrowser === "undefined") {
var gBrowser = window.gBrowser;
}
let notifyBox = gBrowser.getNotificationBox();
//appendNotification( label , value , image (URL) , priority , buttons, eventCallback )
let theNotification = notifyBox.appendNotification(text, "Test notification unique ID",
"chrome://browser/content/aboutRobots-icon.png",
notifyBox.PRIORITY_INFO_HIGH, [], null);
//* Add-on SDK:
var { setTimeout } = require("sdk/timers");
setTimeout(theNotification.close(), 10000);
//*/
/* Overlay and bootstrap:
let timerCallback = {
notify:function notify() {theNotification.close(); }
}
let closeNotificationTimer = Components.classes["#mozilla.org/timer;1"]
.createInstance(Components.interfaces.nsITimer);
closeNotificationTimer.initWithCallback(timerCallback,10000,
Components.interfaces.nsITimer.TYPE_ONE_SHOT);
//*/
}
Note: I changed the timeout to 10 seconds from the 1 second which is in the code in your question. One second is a unreasonable amount of time to expect to show anything which you actually desire the user to see and understand.
The above implements the user notification in a notificationBox. As such it shows up within the Firefox window:
It is also possible to use the nsIAlertsService which is what sdk/notifications uses. This will normally display an alert box in the bottom right of the screen, potentially outside of the Firefox window (see image on nsIAlertsService for example). The notification may show up elsewhere depending on how you have your windowing system set up (this is OS dependent). However, the documentation did not have a method to clear the notification, or set a timeout. However, the interface definition does show that a closeAlert() method does exist. The source code for the sdk/notifications does not expose this to the Add-on SDK. Thus, you would need to use the chrome interfaces. I have updated the documentation to show closeAlert().
Such as (some code taken and modified from nsIAlertsService):
//* Add-on SDK:
var {Cc, Ci} = require("chrome");
//*/
/* Overlay and bootstrap:
const Cc = Components.classes;
const Ci = Components.interfaces;
//*/
function showNotifcation(title, text) {
var alertsService = Cc["#mozilla.org/alerts-service;1"].getService(Ci.nsIAlertsService);
try {
//The second use of title is the alert name.
alertsService.showAlertNotification(icon, title, text, false, "", null, title);
} catch (e) {
// This can fail on Mac OS X
}
//* Add-on SDK:
var { setTimeout } = require("sdk/timers");
setTimeout(alertsService.closeAlert(title), 10000);
//*/
/* Overlay and bootstrap:
let alertTimerCallback = {
notify:function notify() {alertsService.closeAlert(title); }
}
let closeAlertTimer = Cc["#mozilla.org/timer;1"].createInstance(Components.interfaces
.nsITimer);
closeAlertTimer.initWithCallback(alertTimerCallback,10000,Ci.nsITimer.TYPE_ONE_SHOT);
//*/
}
I have only tested the above code with a bootstrapped/restartless Firefox add-on. Thus, the Add-on SDK code may be slightly off.
I am working on a Chrome app that switches between medias shown in a webview tag. The medias must be updated when they change on my web server and it must keep playing when the internet or the server go down. My solution was to play the media from a programmatically managed local cache.
I programmed the Chrome app to download the content with webkitRequestFileSystem into persistent local storage and I try to access the files from there. The content ends up with URLs like this filesystem:chrome-extension://kbjjicmijilgpdpkicpbnceofdpfbjcb/persistent/my_file.html.
No matter what I do, I cannot access the local files. Neither the webview nor navigating directly to the file displays it in Chrome. It only shows a ERR_FILE_NOT_FOUND error.
How should I go about showing this local content in my webview?
Here is my saveAsset() code (strongly inspired by this answer) :
function saveAsset(fs, url, filename, callback, failCallback) {
// Set callback when not defined
if (!callback) {
callback = function(cached_url) {
console.log('download ok: ' + cached_url);
};
}
if (!failCallback) {
failCallback = function() {
console.log('download failed');
};
}
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function() {
fs.root.getFile(filename, {create: true, exclusive: false}, function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) {
callback(fileEntry.toURL());
};
writer.onerror = failCallback;
console.log(xhr.response);
var blob = new Blob([xhr.response], {type: ''});
writer.write(blob);
}, failCallback);
}, failCallback);
});
xhr.addEventListener('error', failCallback);
xhr.send();
}
And this is the code that sets the src attribute of the webview to that URL.
window.webkitRequestFileSystem(window.PERSISTENT, 1024*1024, function (fs) {
saveAsset(fs, url, filename, function(localUrl) {
console.log(localUrl);
$(contentSelector).attr("src", localUrl);
});
});
I never managed make the webview work with local content, but switching to an iframe does work perfectly. I have both cached and uncached content so it makes some confusing code, but I fixed my issue by using both a webview and an iframe and hiding the one which is not in use.
PS. For anyone trying to do this, the webview won't load its content correctly if it is hidden with display:none . I had to move it outside of the screen instead.
I have noticed many similar posts about this issue but after reading through them I don't seem to have found my answer.
I want a "view" in my JQM PhoneGap app to take a picture from camera or Photo Library and insert it into the view/screen and also save it to local storage.
When a user exits the app session and removes the application from processes running on the phone (i.e. iOS double tap home button and swipe up on application to remove its processes) - I want the data to persist so that it will be retrieved from Local Storage and the last captured image be visible when the app is opened again and user navigates to the specific view/screen. The existing image can be overwritten with a new one.
I have followed the posting by Jérôme # Capturing and storing a picture taken with the Camera into a local database / PhoneGap / Cordova / iOS and it captures and displays the image OK. But when I remove the app from running on my iPhone and restart it, it does not retrieve the last captured image from Local Storage.
Perhaps there is something that I am missing here? Here is the code for the whole page (bear in mind this is one page of a single page app, everything is combined into 'index.html':
<div id="Ccamera-fun" data-role="page" data-title="Camera Fun Activity">
<header data-role="header" data-theme="e" data-position="fixed">
Back
<h1>3.5 years - 4.5 years</h1>
</header>
<div data-role="content" data-theme="a" class="content">
<h1>Camera Fun</h1>
<div id="imageContainer"></div>
<img width="99%" id="imgProfile" src="" />
<p>Use your photos and ask your child to describe one in detail. Use your photos as picture talks where your child can share their memories and recall events before or after the photo was taken. <strong>Together you could invent their own story.</strong></p>
<p>Use the buttons below to take a picture with your phone or select an image from your phone’s Photo Library. Once you have selected a photo, it will be embedded into the top of this screen.</p>
<script type="text/javascript" charset="utf-8">
// A button will call this function
//
function takePhoto() {
sessionStorage.removeItem('imagepath');
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}
function onPhotoDataSuccess(imageURI) {
// Uncomment to view the base64 encoded image data
// console.log(imageData);
// Get image handle
//
var imgProfile = document.getElementById('imgProfile');
// Show the captured photo
// The inline CSS rules are used to resize the image
//
imgProfile.src = imageURI;
imgProfile.style.display = 'block';
imgProfile.style.border = '2px solid #ccc';
imgProfile.style.marginTop = '10px';
if(sessionStorage.isprofileimage==1){
getLocation();
}
movePic(imageURI);
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
function movePic(file){
window.resolveLocalFileSystemURI(file, resolveOnSuccess, resOnError);
}
//Callback function when the file system uri has been resolved
function resolveOnSuccess(entry){
var d = new Date();
var n = d.getTime();
//new file name
var newFileName = n + ".jpg";
var myFolderApp = "MyAppFolder";
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
//The folder is created if doesn't exist
fileSys.root.getDirectory( myFolderApp,
{create:true, exclusive: false},
function(directory) {
entry.moveTo(directory, newFileName, successMove, resOnError);
},
resOnError);
},
resOnError);
}
//Callback function when the file has been moved successfully - inserting the complete path
function successMove(entry) {
//Store imagepath in session for future use
// like to store it in database
sessionStorage.setItem('imagepath', entry.fullPath);
}
function resOnError(error) {
alert(error.code);
}
</script>
<button onclick="takePhoto();" data-theme="h">Take a Picture</button>
</p>
<p><img src="img/DETE-footer.png" width="320" class="footer" /></p>
</div>
</div>
based on what I have received in http://pastebin.com/4gE2D00a
You save you image path with sessionStorage.setItem('imagepath', entry.fullPath);#2320 line. To read this value you should use sessionStorage.getItem('imagepath') check what you have in this variable with alert or console.log right after cordova initialization #24
Now, if everything is right before this step, you should have path of last image. To read file from filesystem- study FileReader api
I'm attempting to make a sample application for ios using Actionscript (adobe air). But I'm having problems concerning events/event handling. My app basically gives the user the option to take a picture or select one from the camera roll to upload to a server. If the user decides to take a photo, I have to save that photo to the device's camera roll. The part of the code I'm having problem with is below:
private function readMediaData():void {
//set up some variables and data
var file:File = tempDir.resolvePath(filename);
var stream:FileStream = new FileStream();
stream.open(file, FileMode.WRITE);
stream.writeBytes(imageBytes);
stream.close();
file.addEventListener(Event.COMPLETE, uploadComplete, false, 0, true);
//upload file here
}
private function uploadComplete(event:Event):void {
//selectedImage is the MediaPromise
if (selectedImage.file == null) {
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleted);
loader.loadFilePromise(selectedImage);
}
}
private function loaderCompleted(event:Event):void {
//save image
}
The upload is working fine, but once the upload is completed, I get a somewhat infinite loop between loaderCompleted and uploadComplete resulting in multiple images being uploaded to the server. I tried removing the listener for the file once it has entered the uploadComplete function but still get the same result. My guess is that once the event listener for the loader is registered, it triggers an Event.COMPLETE notification which both method (or object) still recognizes. Is there a way to properly handle events with the same type but coming from different objects and with different function listeners?
Try setting the listener to the stream instead of to the file:
// Changed the 'file' with 'stream'
stream.addEventListener(Event.COMPLETE, uploadComplete, false, 0, true);
I write a Mozilla Jetpack based add-on that has to run whenever a document is loaded. For "toplevel documents" this mostly works using this code (OserverService = require('observer-service')):
this.endDocumentLoadCallback = function (subject, data) {
console.log('loaded: '+subject.location);
try {
server.onEndDocumentLoad(subject);
}
catch (e) {
console.error(formatTraceback(e));
}
};
ObserverService.add("EndDocumentLoad", this.endDocumentLoadCallback);
But the callback doesn't get called when the user opens a new tab using middle click or (more importantly!) for frames. And even this topic I only got through reading the source of another extension and not through the documentation.
So how do I register a callback that really gets called every time a document is loaded?
Edit: This seems to do what I want:
function callback (event) {
// this is the content document of the loaded page.
var doc = event.originalTarget;
if (doc instanceof Ci.nsIDOMNSHTMLDocument) {
// is this an inner frame?
if (doc.defaultView.frameElement) {
// Frame within a tab was loaded.
console.log('!!! loaded frame:',doc.location.href);
}
else {
console.log('!!! loaded top level document:',doc.location.href);
}
}
}
var wm = Cc["#mozilla.org/appshell/window-mediator;1"].getService(Ci.nsIWindowMediator);
var mainWindow = wm.getMostRecentWindow("navigator:browser");
mainWindow.gBrowser.addEventListener("load", callback, true);
Got it partially from here: https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads
#kizzx2 you are better served with #jetpack
To the original question: why don't you use tab-browser module. Something like this:
var browser = require("tab-browser");
exports.main = function main(options, callbacks) {
initialize(function (config) {
browser.whenContentLoaded(
function(window) {
// something to do with the window
// e.g., if (window.locations.href === "something")
}
);
});
Much cleaner than what you do IMHO and (until we have official pageMods module) the supported way how to do this.
As of Addon SDK 1.0, the proper way to do this is to use the page-mod module.
(Under the hood it's implemented using the document-element-inserted observer service notification, you can use it in a regular extension or if page-mod doesn't suit you.)