Microsoft Bing Maps v7 Search Manager GeoCode errorCallBack - geocode

The issue happens during page refresh then browser is minimized or its tab with a map is inactive. Then Search Manager geocode function falls into errorCallback. Everything is working fine, if the page with the map is active (visible).
I checked e.request object in the errorCallback function and it contains correct "where" parameter, but no latitude and longitude nor any information about the error.
The issue can be reproduced in both Chrome and IE browsers.
HTML:
<div id="map" class="map" style="height:270px; width:100%"></div>
JavaScript:
<script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
<script type="text/javascript">
// global variables
var apiKey = 'API_KEY_HIDDEN',
map,
searchManager;
// sample data
var siteData = [
{"Name":"Starbucks","Address":"8400 SW Nimbus Ave 120","City":"Beaverton","State":"OR","Zip":"97008","Latitude":0,"Longitude":0},
{"Name":"Subway","Address":"12160 SW Scholls Ferry Rd","City":"Tigard","State":"OR","Zip":"97223","Latitude":0,"Longitude":0}
];
$(document).ready(function () {
GetMap();
setTimeout(function() { location.reload(); }, 60000);
});
function GetMap() {
// initialize the map
map = new Microsoft.Maps.Map(document.getElementById('map'), {
credentials: apiKey,
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 1
});
// load search module
Microsoft.Maps.loadModule('Microsoft.Maps.Search', {
callback: function () {
searchManager = new Microsoft.Maps.Search.SearchManager(map);
$.each(siteData, function(index, clientSite) {
GeoCodeQuery(clientSite);
});
}
});
}
function GeoCodeQuery(clientSite) {
// set search parameters
var searchRequest = {
where: clientSite.Address + ', ' + clientSite.City + ', ' + clientSite.State + ' ' + clientSite.Zip,
callback: function (data) {
if (data && data.results && data.results.length > 0) {
clientSite.Latitude = data.results[0].location.latitude;
clientSite.Longitude = data.results[0].location.longitude;
}
else {
console.log('No results.');
}
},
errorCallback: function (e) {
console.log('Search error.');
}
};
// make the geocode request
searchManager.geocode(searchRequest);
}
</script>

A couple of issues;
You are missing a comma after your where parameter. This would make the searchRequest an invalid JSON object. Fixing this results in the first address being correctly geocoded. The second is throwing an error and this can be for a large number of reasons, the most likely is the next point.
The Bing Maps V7 control was retired in June and will be shut down soon. Some of its backend services are already being taken down and thus it will have issues. You should be using Bing Maps V8 which replaced V7 over a year ago. You can find a migration guide here: https://social.technet.microsoft.com/wiki/contents/articles/34563.bing-maps-v7-to-v8-migration-guide.aspx

Related

TYPO3: count number of file downloads in v 7.6.x

Is there an extension for counting the number of file downloads (e.g. pdf) compatible with TYPO3 v 7.6.x?
For older versions dbdownloadtracker or cc_awstats did it. But they are not compatible with 7.6.x unfortunately.
I see from its documentation that the extension kk_downloader (https://typo3.org/extensions/repository/view/kk_downloader) has a "counter" feature.
Otherwise, I think that you could set up something with Google Analytics
Google Analytics might be the best choice and you don't depend on a Typo3 extension. It works for any website, Typo3 or not, but needs to be loaded after your GA script. The statistics show up as Events in Google Analytics and they are recorded right away in Google, no need to wait hours to see the stats working.
It tracks Downloads, External site clicks, mailto, and telephones clicked/called from links if set with href="tel:(000)000-0000". You can use your own format for phones in your HTML.
It tracks these file extenions: exe, zip, pdf, doc, docx, xls, xlsx, ppt, pptx. If you need more file types, just add to the list in var filetypes the extensions separated by a pipe.
Make sure you use jQuery or update the code.
<script type="text/javascript">
if (typeof jQuery != 'undefined') {
jQuery(document).ready(function($) {
var filetypes = /\.(exe|zip|pdf|doc*|xls*|ppt*)$/i;
var baseHref = '';
if (jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');
jQuery('a').each(function() {
var href = jQuery(this).attr('href');
if (href && (href.match(/^https?\:/i)) && (!href.match(document.domain))) {
jQuery(this).click(function() {
var extLink = href.replace(/^https?\:\/\//i, '');
ga('send', 'event', 'External', 'Click', extLink);
if (jQuery(this).attr('target') != undefined && jQuery(this).attr('target').toLowerCase() != '_blank') {
setTimeout(function() {
location.href = href;
}, 200);
return false;
}
});
} else if (href && href.match(/^mailto\:/i)) {
jQuery(this).click(function() {
var mailLink = href.replace(/^mailto\:/i, '');
ga('send', 'event', 'Email', 'Click', mailLink);
});
} else if (href && href.match(/^tel\:/i)) {
jQuery(this).click(function() {
var phoneLink = href.replace(/^tel\:/i, '');
ga('send', 'event', 'Phone', 'Click', phoneLink);
});
} else if (href && href.match(filetypes)) {
jQuery(this).click(function() {
var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
var filePath = href;
ga('send', 'event', 'Download', 'Click-' + extension, filePath);
if (jQuery(this).attr('target') != undefined && jQuery(this).attr('target').toLowerCase() != '_blank') {
setTimeout(function() {
location.href = baseHref + href;
}, 200);
return false;
}
});
}
});
});
}
</script>
For more details about this code, the original was found here: http://www.blastam.com/blog/how-to-track-downloads-in-google-analytics, but the code in this answer uses the new ga event and also adds the tracking for Phones clicked.
After you apply this code, in Google Analytics don't forget to filter the current day as per default Google selects the range until the day before today.
Hope this helps someone out there.

How to use the numericRefinementList to set allowed distances?

I would like to be able to use the numericRefinementList to allow users to pick the distance from themselves an item can be? This would be using the IP geo-location feature or inputting the geo-location from browser if available.
Less than 50km
50 - 100km
100 - 150km
More than 150km
https://community.algolia.com/instantsearch.js/documentation/#numericrefinementlist
This is unfortunately not something you can do with the numericRefinementList but you can probably build a custom widget setting the aroundRadius depending on the link you've clicked on:
function radiusList(options) {
if (!options.container) {
throw new Error('radiusList: usage: radiusList({container, ...})');
}
var $container = $(options.container);
if ($container.length === 0) {
throw new Error('radiusList: cannot select \'' + options.container + '\'');
}
return {
init: function(args) {
// event delegation: set the aroundRadius of the underlying link
$(document).on('click', '.radius-link', function(e) {
e.preventDefault();
args.helper.setQueryParameter('aroundRadius', +$(this).data('radius'));
args.helper.search();
});
},
render: function(args) {
// FIXME: display the list of radius links
var html = '<ul>';
html += '<li>< 100km</li>';
html += '</ul>';
$container.html(html);
}
};
}
And then you use it with:
search.addWidget(radiusList({container: '#my-radius-list'}));

Chrome App FileReader

I'm trying to make use of the file system API in a Chrome App. I've tried all the sample code I can find and can't get a simple text file to read. I'm logging almost every step, and what seems to happen (or not happen) is everything stops the first time I reference a file reader object. It creates just fine, because I can log the .readyState, but after that I can't seem to even set an onload()event or execute a .readAsText().
Here's what I'm calling from a button:
function clickButton(){
chrome.fileSystem.chooseEntry({type: 'openFile', acceptsMultiple: false}, function(FileEntry){
if(chrome.runtime.lastError) {console.warn("Warning: " + chrome.runtime.lastError.message);}
else{
console.log(FileEntry);
var thing = new FileReader();
console.log(thing.readyState);
thing.onloadstart(function(){
console.log("Started loading " & FileEntry);
});
console.log("added onloadstart");
console.log(thing.readyState);
console.log(thing);
thing.readAsText(FileEntry);
console.log(thing.readyState);
console.log(thing.result);
}
});
document.getElementById("status").innerHTML = "I did something";
}
I did read somewhere that Chrome doesn't allow access to local files, but the chrome apps seem to be different. At least, the documentation seems to suggest that.
The only thing I end up with in my console is the FileEntry object.
https://developer.chrome.com/apps/app_storage#filesystem
I've used the example code right from the above link and still can't get it right. Anyone else have this issue or know what I'm doing wrong?
There is a difference between a FileEntry and a File. You need to call FileEntry's .file() method. So, replace
thing.readAsText(FileEntry);
with
FileEntry.file(function(File) {
thing.readAsText(File)
})
https://developer.mozilla.org/en-US/docs/Web/API/FileEntry#File
Try this code...
<!doctype html>
<html>
<script>
function handle_files(files) {
for (i = 0; i < files.length; i++) {
file = files[i]
console.log(file)
var reader = new FileReader()
ret = []
reader.onload = function(e) {
console.log(e.target.result)
}
reader.onerror = function(stuff) {
console.log("error", stuff)
console.log (stuff.getMessage())
}
reader.readAsText(file) //readAsdataURL
}
}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>
I've written a function to extract text from a file.
function getFileEntryText(fileEntry) {
return new Promise(function (resolve, reject) {
fileEntry.file(function (file) {
var fileReader = new FileReader();
fileReader.onload = function (text) {
resolve(fileReader.result);
};
fileReader.onerror = function () {
reject(fileReader.error);
};
fileReader.readAsText(file);
});
});
}
You can invoke this method like so:
getFileEntryText(fileEntry).then(function(text) {
// Process the file text here
}, function(error) {
// Handle the file error here
});
One thing I'm grappling with when working with the FileSystem is that every call is asynchronous. Having multiple levels of nested callbacks can make for code that's hard to read. I'm currently working around this by converting everything I can to a Promise.
for anyone who is interested, here's my final (working) code, complete with all the console.log()'s I needed to follow all those callbacks.
var chosenEntry = null;
function clickButton(){
console.log("Button clicked");
var accepts = [{
mimeTypes: ['text/*'],
extensions: ['js', 'css', 'txt', 'html', 'xml', 'tsv', 'csv', 'rtf']
}];
chrome.fileSystem.chooseEntry({type: 'openFile', accepts: accepts}, function(theEntry) {
if (!theEntry) {
output.textContent = 'No file selected.';
return;
}
// use local storage to retain access to this file
chrome.storage.local.set({'chosenFile': chrome.fileSystem.retainEntry(theEntry)});
console.log("local data set. calling loadFileEntry");
loadFileEntry(theEntry);
console.log("loadFileEntry called, returned to clickButton()");
});
}
function loadFileEntry(_chosenEntry) {
console.log("entered loadFileEntry()");
chosenEntry = _chosenEntry;
chosenEntry.file(function(file) {
readAsText(chosenEntry, function(result) {
console.log("running callback in readAsText");
document.getElementById('text').innerHTML = result;
console.log("I just tried to update textarea.innerHTML");
});
});
console.log("added function to chosenEntry.file()");
}
function readAsText(fileEntry, callback) {
console.log("readAsText called");
fileEntry.file(function(file) {
var reader = new FileReader();
console.log("Created reader as FileReader");
reader.onload = function(e) {
console.log("called reader.onload function");
callback(e.target.result);
};
console.log("calling reader.readAsText");
reader.readAsText(file);
});
}

Delete form data for subsequent ajax calls

I have a link that opens a dialog modal asking for a date. When they click submit, javascript takes the form data, generates an ajax call, and returns the response. This works no problem. However if I immediately click the same link again and submit a new date in the form, I get the results from my first ajax POST.
Essentially, subsequent ajax calls are using the original POST data and nothing new. Code has alerts for troubleshooting. Im assuming im setting some var thats not getting reset, but thought this event handler was canceled with the "off", then re-added immediately after and the vars would be in scope to that function alone.
<script>
//Modal submit
$(document).off('click', '#SubmitAllChecks');
$(document).on('click', '#SubmitAllChecks', function(e) {
e.preventDefault();
var form = $('#AllChecks');
var url = form.attr('action');
var method = form.attr('method');
var data = form.serializeArray();
$.each(data, function(k,v) {
alert(v.name + ' : ' + v.value);
});
$.ajax({
url: url,
type: method,
data: data,
dataType: 'json',
beforeSend: function() {
//add load indicator
window.erpui.startload();
},
success: function(data) {
alert('xhr complete');
$.each(data, function() {
alert(this.value + ' data');
if (this.value == 'error' && this.msg != '') {
window.erpui.endload();
window.erpui.notify.error(this.msg);
window.erpui.notify.commit();
}
else if (this.value == 'success') {
window.erpui.endload();
window.erpui.notify.success(this.msg);
window.erpui.notify.commit();
$('.ui-dialog').remove();
//window.location.href="{% url all_checks %}";
//window.location.reload();
}
});
},
error: function() {
alert('error');
//remove load indicator
window.erpui.endload();
}
});
});
</script>

Airport autocomplete by City name and airport code

We are developing an travel web app and here is some scenario with airport code autocomplete, which i am struggling to get it working as intended. I am getting all the airport codes & city name from xml and bind it to text input. The scenario is When user types "Mani" It should display "All cities start with Mani", instead it is displaying all cities which contains that term mani (See this image : http://imgur.com/61WS6). But if user directly inputs airport code, it will display results, obviously.
So for that, i used that monkey patch for autocomplete, now it is working fine. But now, when user types the airport code like "JFK,LHR,MNL" it is not giving any results.
This is the way all travel sites working and i need your help in achieving this. Thanks in advance. Here is my code with monkey patch for autocomplete.
$(document).ready(function() {
var myArr = [];
function parseXml(xml)
{
$(xml).find("CityAirport").each(function()
{
myArr.push($(this).attr("CityName")+"-"+$(this).attr("AirportCode"));
});
}
function setupAC() {
$("#from").autocomplete({
source: myArr,
minLength: 1,
select: function(event, ui) {
$("#from").val(ui.item.value);
}
});
$("#to").autocomplete({
source: myArr,
minLength: 1,
select: function(event, ui) {
$("#to").val(ui.item.value);
}
});
}
$.ajax({
type: "GET",
url: "xmlFiles/flight/AirportCode.xml",
dataType: "html",
success: parseXml,
complete: setupAC,
failure: function(data) {
alert("XML File could not be found");
}
});
});
function hackAutocomplete(){
$.extend($.ui.autocomplete, {
filter: function(array, term){
var matcher = new RegExp("^" + term, "i");
return $.grep(array, function(value){
return matcher.test(value.value);// || value.value || value);
});
}
});
}
This code was taken from this thread : Autocomplete from SOF
You have to split the two data properties and use a callback function as source param, more or less like this (see it in action):
var source = [
{ name: 'New york', code: 'JFK'},
{ name: 'Other name', code: 'BLA'},
{ name: 'Rome', code: 'FCO'}
];
$( "#autocomplete" ).autocomplete({
source: function(request, response){
var searchTerm = request.term.toLowerCase();
var ret = [];
$.each(source, function(i, airportItem){
//Do your search here...
if (airportItem.code.toLowerCase().indexOf(searchTerm) !== -1 || airportItem.name.toLowerCase().indexOf(searchTerm) === 0)
ret.push(airportItem.name + ' - ' + airportItem.code);
});
response(ret);
}
});​