I would like to figure out how to download an image and display it in phonegap app on Blackberry (for iOS and Android I already managed to do so). As a test I'm using Simon's example attached below.
If I run the example on playbook using WebWorks method it sims to run without any errors (non are reported in WebInspector) but the image is not displayed. Although that the file transfer sims successful and the reported entry.fullPath is
file:///accounts/1000/appdata/....../data//doubt.jpg there is something wrong with accessing file on this path. Looking at requests in Network tab (WebInspector) it shows
that size of the file that is being requested at the local image path is only 15B. It looks like this is the empty file created when we called fileSystem.root.getFile and not the file that should have been saved in this path when transfered from server.
I'm trying to resolve this for a couple of days now, with no success only frustration. I found suggestions for using blackberry.io.sharedFolder of blackberry.io.home to declare the path where the file should be saved but although I have blackberry object the blackberry.io.sharedFolder and home are undefined.
I also tried the same example on Blackberry z10 with NDK method, but in this case the entry.fullPath is local:///persistent/.. but then the file can not be accessed from this path (GET error is reported). Also there is no blackberry object available in this case.
So I think the basic question is what local path should be set for the file download so that the file will then be accessible trough URI.
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "user-scalable=no,width=device-width" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<script src="cordova/cordova.BBplaybook.js"></script>
<script type="text/javascript" charset="utf-8">
function init(){
document.addEventListener("deviceready", ready, true);
}
function ready() {
}
function download() {
console.log("calling download");
// // blackberry.io.sandbox = false;
// console.log("blackberry.io.sharedFolder");
// console.log(blackberry.io.sharedFolder);
// console.log("blackberry");
// console.log(blackberry);
var remoteFile = "http://i3.kym-cdn.com/entries/icons/original/000/000/080/doubt.jpg";
var localFileName = remoteFile.substring(remoteFile.lastIndexOf('/')+1);
console.log("localFileName");
console.log(localFileName);
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getFile(localFileName, {create: true, exclusive: false}, function(fileEntry) {
var localPath = fileEntry.fullPath;
console.log("localPath");
console.log(localPath);
if (device.platform === "Android" && localPath.indexOf("file://") === 0) {
localPath = localPath.substring(7);
}
var ft = new FileTransfer();
ft.download(remoteFile,
localPath, function(entry) {
var dwnldImg = document.getElementById("dwnldImg");
dwnldImg.src = entry.fullPath;
console.log("entry.fullPath;");
console.log(entry.fullPath);
dwnldImg.style.visibility = "visible";
dwnldImg.style.display = "block";
}, fail);
}, fail);
}, fail);
}
function fail(error) {
console.log("error");
console.log(error);
console.log(error.code);
}
</script>
</head>
<body onload="init();">
<button onclick="download()" >Download and display image</button>
<img src="" id="dwnldImg" style="display: none"/>
</body>
</html>
In config.xml I have
<access subdomains="true" uri="*" />
<feature id="blackberry.io.file" required="true" version="1.0.0.0" />
<feature id="blackberry.utils" required="true" version="1.0.0.0" />
<feature id="blackberry.io.dir" required="true" version="1.0.0.0" />
<rim:permit>access_shared</rim:permit>
and plugins.xml
<plugin name="File" value="org.apache.cordova.file.FileManager"/>
<plugin name="FileTransfer" value="org.apache.cordova.http.FileTransfer"/>
Related
I am trying to figure out why when hoovering on a village when zoom level is low show's the town of Västerås instead of Irsta, but when I zoom in it shows the village of Irsta.
You guys can try it yourselves in this example.
I would like to be able to locate Irsta when you can see the label of Irsta, it shouldn't be the bigger city of Västerås in that case.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Query Nominatem</title>
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<style>
html, body, #map {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map').setView([48.210033, 16.363449], 10);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
let timeOut;
let popUp;
let queryState = false;
function mousemove(e) {
clearTimeout(timeOut)
if (!queryState) {
timeOut = setTimeout(() => {
queryState = true;
if (popUp) {
popUp.remove()
}
popPup = L.popup()
.setLatLng(e.latlng)
.setContent("Loading data....")
.openOn(map);
queryNominatem(e)
}, 1000);
}
}
function queryNominatem(e) {
fetch(`https://nominatim.openstreetmap.org/reverse.php?lat=${e.latlng.lat}&lon=${e.latlng.lng}&zoom=${map.getZoom()}&format=json`).then(
(x) => {
return x.json()
}
).then(
(data) => {
popUp = L.popup()
.setLatLng(e.latlng)
.setContent(data.display_name)
.openOn(map);
queryState = false;
}
).catch(
(err) => {
console.log(err);
popUp = L.popup()
.setLatLng(e.latlng)
.setContent("Error Loading data ... ")
.openOn(map);
setTimeout(() => {
popUp.remove();
queryState = false;
}, 1000);
}
);
}
map.on("mousemove", mousemove);
</script>
</body>
</html>
Zoom-in picture of village Irsta
Normal zooom of village Irsta
This is happening as you are using a dynamic zoom level in your reverse Nominatim request. If the zoom level is lower than 14, Nominatim will try to get the next city, (or if it way lower, even the country, etc., see https://nominatim.org/release-docs/develop/api/Reverse/#result-limitation )
So you'll have to define a min-value in your zoom while doing the reverse call, e.g. q&d:
reverseZoom=Math.max(14,map.getZoom());
fetch(`https://nominatim.openstreetmap.org/reverse.php?lat=${e.latlng.lat}&lon=${e.latlng.lng}&zoom=${reverseZoom}&format=json`)
Now the reverse call will always try to get a village, but - and this may be a problem - also a suburb instead of a city (but this would have happened with your original code as well if you zoom in). So I would recommend to use addressdetails=1 in your request and parse the addressdetails response for city/village/town to return that value instead of the display name value.
Currently working on showing a popup in the map using ESRI ArcGIS API for JavaScript 4.15.
But that is missing the Maximize button which was available with ArcGIS API for JavaScript 3.35
Is there any config to be set to show the same.
As far as I know the new API does not have that capability out of the box. But no worries, you can implement it by adding a custom action to the popup.
See the example I made for you to get an idea.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Popup actions | ArcGIS API for JavaScript 4.18</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require(["esri/Map", "esri/layers/FeatureLayer", "esri/views/MapView"], function (
Map,
FeatureLayer,
MapView
) {
const map = new Map({
basemap: "gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-117.08, 34.1],
zoom: 11
});
const toggleFullScreenAction = {
type: "toggle",
title: "Full Screen",
id: "toggle-full-screen",
className: "esri-icon-maximize"
};
view.popup.actions.add(toggleFullScreenAction);
const template = {
title: "Trail run",
content: "{name}"
};
featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
outFields: ["*"],
popupTemplate: template
});
map.add(featureLayer);
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.getElementsByClassName('esri-popup__main-container')[0].requestFullscreen()
.catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
view.popup.on("trigger-action", function (event) {
if (event.action.id === "toggle-full-screen") {
toggleFullScreen();
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
To run the snippet, copy and save as an html file. The full screen action does not work in the snippet, I guess because it is embedded, not sure though.
i'm using the Share component in order to share some data to social medias but i don't know to how to share an image like the vinted app (cf image).
onShare = async () => {
try {
const result = await Share.share({
title: "Mariez-Vous",
message:
`Photo partagée : ${this.props.navigation.state.params.photo}
Nom : ${this.props.navigation.state.params.societe}
Site web : https://www.mariezvous.fr/`,
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
alert(error.message);
}
};
Here is the code that I'm using but the image is not displaying it's only passing an url.
You should add OpenGraph meta tags to the website your share. The bots will then show the image for you.
An example:
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
More informations : https://ogp.me and https://developers.facebook.com/docs/sharing/webmasters
I have enabled Localization and Globalization configuration and need to add RTL mode in RTL Culture. How Can i do it?
Using ASP.Net Core 2.2 with razor pages and Individual account configuration
// Configuration Of Localizaion
services.AddLocalization(opts =>
{
opts.ResourcesPath = "CultureResources";
});
//services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddMvc()
.AddViewLocalization(opts => { opts.ResourcesPath = "CultureResources"; })
.AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix)
.AddDataAnnotationsLocalization()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddRazorPagesOptions(options =>
{
options.AllowAreas = true;
options.Conventions.AuthorizeAreaFolder("Identity", "/Account/Manage");
options.Conventions.AuthorizeAreaPage("Identity", "/Account/Logout");
});
services.Configure<RequestLocalizationOptions>(opt =>
{
var supportedCulutures = new List<CultureInfo>
{
new CultureInfo("en"),
new CultureInfo("en-US"),
new CultureInfo("ar-EG")
};
opt.DefaultRequestCulture = new RequestCulture("en-US");
// Formating numbers, date, etc.
opt.SupportedCultures = supportedCulutures;
// UI strings that we have localized
opt.SupportedUICultures = supportedCulutures;
});
RTL mode enabled when choose RTL Culture
Create a new css file for RTL styles e.g. rtl.css
body {
direction:rtl;
}
Then in the _layout.cshtml file check for current culture text direction and include the relevant css file in the head section;
#using System.Globalization
#if(CultureInfo.CurrentCulture.TextInfo.IsRightToLeft) {
<link rel="stylesheet" type="text/css" href="rtl.css">
}
For .Net Core 5.0
You can use bootstrap-rtl.css and adding lang="ar" and dir="rtl" to html tag.
Like <html lang="ar" dir="rtl">
So to make it dynamic and work with ltr add the following code to _Layout.cshtml
#{
var culture = Context.Features.Get<Microsoft.AspNetCore.Localization.IRequestCultureFeature>();
var dir = culture.RequestCulture.UICulture.TextInfo.IsRightToLeft ? "rtl" : "ltr";
var twoLetter = culture.RequestCulture.UICulture.TwoLetterISOLanguageName;
}
<!DOCTYPE html>
<html lang="#twoLetter" dir="#dir">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
#if (dir == "rtl")
{
<link href="~/lib/bootstrap-rtl/css/bootstrap-rtl.css" rel="stylesheet" />
}
More information https://getbootstrap.com/docs/5.0/getting-started/rtl/
I am working on a php application where I used 'arcgis' API for loading a map. please find the URL below:
http://js.arcgis.com/3.11/
In order to load an arcgis map in my application, I must use
dojo.require("esri.map");
So In my single page PHP application I added this require statement as below:
<script type="text/javascript">
dojo.require("esri.map");
</script>
And in a js file I gave the map is loaded as shown below:
var myOptions = {
maxZoom: 20,
minZoom: 3,
zoom:5,
isZoomSlider: false,
sliderStyle: "large",
sliderPosition: "top-right"
};
this.map = new esri.Map("mapDiv", myOptions);
But when I run this application, I am getting an error stated "Uncaught TypeError: undefined is not a function" at the line "this.map = new esri.Map("mapDiv", myOptions);"
If I open developer tools run the same code by keeping breakpoints at require and esri.Map statements, I could see the map is getting loaded. But If I run it without opening developer tools then I am facing this issue.
Why dojo.require statement is not working as expected?
Whats wrong am I doing??
Kindly reply
You are trying to load map module with legacy module require. Try require Map using AMD syntax as shown in docs:
require(["esri/map"], function(Map) { /* code goes here */ });
You need to wrap your JavaScript code in a call to dojo.ready.
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>JavaScript in Separate File</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#mapDiv{padding:0;}
</style>
<script>var dojoConfig = {parseOnLoad: true};</script>
<script src="//js.arcgis.com/3.11/"></script>
<script src="code.js"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.layers.agstiled");
</script>
</head>
<body class="claro" >
<div id="mapDiv"></div>
</body>
</html>
code.js file:
dojo.ready(function() {
var myOptions = {
maxZoom: 20,
minZoom: 3,
zoom:5,
isZoomSlider: false,
sliderStyle: "large",
sliderPosition: "top-right"
};
this.map = new esri.Map("mapDiv", myOptions);
var layer = new esri.layers.ArcGISTiledMapServiceLayer(
"http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
this.map.addLayer(layer);
});