I have not been able to render certain ArcGis Service layers on a web map with the esri leaflet plugin. I can run L.esri.query and get data back. Also, metadata returns a response with no errors. I've tried using the Esri Leaflet Renderers plugin to load the service symbology instead of custom styling, with no success. I've narrowed the issue down to the renderer given on the service. The layers that won't render look like this in the drawing section of the service:
Drawing Info:
Renderer:
Unique Value Renderer:
Field 1: STR_TYPE
Field 2: null
Field 3: null
Field Delimiter: ,
Services that render successfully to the map look like this:
Drawing Info:
Renderer:
Simple Renderer:
I've verfified that the field STR_TYPE is exposed in the service that is not able to render.
Fields:
OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID_1 )
STR_TYPE ( type: esriFieldTypeString , alias: STR_TYPE , length: 50 , Coded Values: [Catch basin: Catch basin] , [Junction box: Junction box] , [Drop inlet: Drop inlet] , ...15 more... )
I get the same results with any geometry type with the same renderer on the service.
My prototype html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/styles.css" />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.1/dist/leaflet.js"></script>
<!-- Load Esri Leaflet -->
<script src="assets/dist/esri-leaflet.js"></script>
<!-- Esri Leaflet Renderers -->
<script src="https://unpkg.com/esri-leaflet-renderers#2.0.6"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="map"></div>
<!-- main js file -->
<script src="assets/js/main.js?v="+Math.floor(Math.random() * 1001)></script>
</body>
</html>
My js (actual service url not shown):
var map = L.map('map', {
center: [lat, lng],
zoom: 10
});
var esriStreets = L.esri.basemapLayer('Streets').addTo(map);
var url = serviceurl;
var fl = L.esri.featureLayer({
url: url,
simplifyFactor: 1
}).addTo(map);
fl.metadata(function(error,metadata){
console.log(metadata);
});
When attempting to render custom styling, the renderers plugin is not included, simplifyFactor is not present, and pointToLayer option is added to featureLayer returning a circleMarker with custom styling. (this also doesn't render anything). However, on production I can select an area where shapes would be and I get data back.
Any help would be appreciated.
Related
I'm currently trying to build a click to dial link in the browser as an Outlook Addin. I'm getting the error:
Refused to frame '' because it violates the following Content Security Policy directive: "frame-src *". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. tel:' must be added explicitely. [https://localhost:44371/]
I've set the meta tags a bunch of different ways trying to explicitly state the tel scheme that they mention. For instance:
<meta http-equiv="Content-Security-Policy" content="frame-src 'self' tel:">
I've tried about 20 different variations on this. I've also noticed that many people are saying something about changing the HTTP response headers, but I'm not sure exactly how to do this or even why it would be needed.
I'm working on Visual Studio using a template from their own program. Because I'm testing this out on my own computer, I've also tried to whitelist my own localhost. Still nothing.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="frame-src 'self' tel:">
<title>standard_item_properties</title>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="default_entities.css" />
<script type="text/javascript" src="MicrosoftAjax.js"></script>
<script src="CallFunctionFile.js" type="text/javascript"></script>
<!-- Use the CDN reference to Office.js. -->
<script type="text/javascript" src="default_entities.js"></script>
</head>
<body>
<!-- NOTE: The body is empty on purpose. Since this is invoked via a button, there is no UI to render. -->
<div id="container">
<div><a id="tel-link">Make Call from Phone</a></div>
</div>
</body>
</html>
and here is the javascript:
// Global variables
let item;
let myEntities;
// The initialize function is required for all add-ins.
Office.initialize = function () {
const mailbox = Office.context.mailbox;
// Obtains the current item.
item = mailbox.item;
// Reads all instances of supported entities from the subject
// and body of the current item.
myEntities = item.getEntities();
JSON.stringify(myEntities.phoneNumbers[0].originalPhoneString));
// Checks for the DOM to load using the jQuery ready function.
window.addEventListener('DOMContentLoaded', (event) => {
// After the DOM is loaded, app-specific code can run.
});
let a = document.getElementById("tel-link");
a.href = "tel:" + encodeURIComponent(myEntities.phoneNumbers[0].originalPhoneString);
}
I'm having problems with iron-ajax and data binding in Polymer 1.0.2. Not even a slightly changed example from the Polymer documentation is working.
Here is the code with my changes:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">
</head>
<body>
<template is="dom-bind">
<iron-ajax
auto
url="http://jsonplaceholder.typicode.com/posts/"
lastResponse="{{data}}"
handleAs="json">
</iron-ajax>
<template is="dom-repeat" items="{{data}}">
<div><span>{{item.id}}</span></div>
</template>
</template>
<script>
(function (document) {
'use strict';
var app = document.querySelector('#app');
window.addEventListener('WebComponentsReady', function() {
var ironAjax = document.querySelector('iron-ajax');
ironAjax.addEventListener('response', function() {
console.log(ironAjax.lastResponse[0].id);
});
ironAjax.generateRequest();
});
})(document);
</script>
</body>
</html>
All I changed was entering a URL to get a real JSON response and setting the auto and handleAs properties. I also added a small script with a listener for the response event. The listener is working fine and handles the response, but the spans in the dom-repeat template aren't rendered.
I'm using Polymer 1.0.2 and iron-elements 1.0.0
It seems the documentation you is missing a - character in the lastresponse attribute of the example.
You must change lastResponse to last-response.
Look at this example from the iron-ajax github page.
when you use a attribute on a element, you have to convert the camelcase sentence to dashes sentence, I mean:
lastResponse is maps to last-response
Property name to attribute name mapping
I am currently trying to use the Bing Maps AJAX API v7 in the new 'Multi-device hybrid App" template provided in Visual Studio, which uses Apache Cordova to provide crossplatform compatibility. I have written the following code, following the template at http://msdn.microsoft.com/en-us/library/gg427624.aspx :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta charset="utf-8" />
<title>Wand</title>
<!-- Wand references -->
<link href="css/index.css" rel="stylesheet" />
<script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1">
</script>
<script type="text/javascript">
function GetMap() {
var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr " });
}
</script>
</head>
<body onload="GetMap();">
<div id='map' class="mainview"></div>
<div class="menu">This is the menu</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
But when I debug it in Windows 8.1, it says that Microsoft is not defined (in the GetMap function). I asume that the library from
https:// ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1
has not been loaded properly. Is there anything wrong with my code? Should I use the AJAX WEB API, or is there another for apps (the only one I have seen is for Windows 8 only)?
I think that my app is unable to load the web library because it doesn't have the proper permisions. In the config.xml there is a domain access section, but it says it doesn't appy to the windows platform, so how can I set it to allow loading pages from https:// ecn.dev.virtualearth.net ?
EDIT: Loading the script from a Web context (ms-appx-web) makes the script run, but if I want the code to be multiplatform I cannot use it. The solution would be to include in the Windows 8 manifest a permission for the Bing maps URL, how can I do it?
INDEX.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Cordova Bing Mapping</title>
<link href="css/index.css" rel="stylesheet" />
<!--Needed for iOS & Android-->
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</head>
<body>
<div id='map' class="mainview"></div>
<div class="menu">This is the menu</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
</body>
INDEX.JS
(function () {
"use strict";
document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
//Loads Scripts Dynamically
function loadScript(filename) {
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", filename)
}
function onDeviceReady() {
// Load Local Scripts if Windows
if (device.platform == "windows") {
MSApp.execUnsafeLocalFunction(
function () {
loadScript("scripts/veapicore.js"); //Bing Maps SDK VS 2013
loadScript("scripts/veapiModules.js"); //Bing Maps SDK VS 2013
loadScript("scripts/mapcontrol.js"); //downloaded from http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0
Microsoft.Maps.loadModule("Microsoft.Maps.Map", {
callback: loadMap
});
})
}
};
function loadMap() {
var map = new Microsoft.Maps.Map(document.getElementById("map"), {
credentials: "BING_MAPS_KEY"
});
}
})();
NOTES
* This will work on Windows 8, Windows Phone 8, iOS, Android
* Bing Maps SDK VS 2013
1. Download Location: https://visualstudiogallery.msdn.microsoft.com/224eb93a-ebc4-46ba-9be7-90ee777ad9e1
2. Local Location: C:\Users\[USER]\AppData\Local\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\Bing.Maps.JavaScript\1.313.0825.1\redist\commonconfiguration\neutral\Bing.Maps.JavaScript\
* For Windows Phone (Universal) - Microsoft.Maps.loadModule("Microsoft.Maps.Map", { callback: loadMap }); is still undefined.
I've implemented Bing Maps in a "Multi-Device Hybrid App" by doing the following:
Copied the C:\Users\\AppData\Local\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\Bing.Maps.JavaScript\1.313.0825.1\redist\commonconfiguration\neutral\Bing.Maps.JavaScript folder into my local project
Copied http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0 into my local project as remoteBingMaps.js
On "deviceready" (where addScript dynamically adds a script file to document.body)
a. If device.platform == "windows8", then MSApp.execUnsafeLocalFunction(function () {
addScript("Bing.Maps.JavaScript/js/veapicore.js");
addScript("Bing.Maps.JavaScript/js/veapiModules.js");
});
b. Else addScript("scripts/frameworks/remoteBingMaps.js")
When loading the map control (where loadMap initializes the map control)
a. If device.platform == "windows8", then Microsoft.Maps.loadModule("Microsoft.Maps.Map", {callback:loadMap}}
b. Else loadMap()
I've gotten this working for Windows 8.1, Windows Phone, Android, and iOS.
There seems to be a couple of problems with the code.
Firstly, you are directly referencing a library from a URL. That might be causing issues on the Windows platform. You might want to download the file and add it to your project locally.
Secondly, your Bing Maps key has a space at the end, which is why the app is throwing errors at runtime.
<script type="text/javascript">
function GetMap() {
var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr " });
}
</script>
Change that to:
<script type="text/javascript">
function GetMap() {
var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr" });
}
</script>
I had the same issue, but neither of the proposed solutions worked for me. Interesting that Bing maps were loaded without any problems on the Ripple Simulator, but on Android emulator or device I had a problem with Microsoft namespace not defined - clearly namespace was not loaded. After some searching I found, that in the config.xml there is configuration for the Whitelist plugin, which controls which pages can be requested from the app (and you can configure that separately for each platform), so I just added:
<allow-intent href="https://ecn.dev.virtualearth.net/mapcontrol/*" />
for the android platform, commented out Content-Security-Policy from index.html and it started to work.
I'm just starting to use Parse Core (as Google'e ScriptDB is being decommissioned soon) and am having some trouble.
So I'm able to get Parse Core db to read/write using just a standard HTML page as shown below:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>We've also just created your first object using the following code:</p>
<code>
var TestObject = Parse.Object.extend("TestObject");<br/>
var testObject = new TestObject();<br/>
testObject.save({foo: "bar"});
</code>
</div>
</div>
<script type="text/javascript">
Parse.initialize("PyMFUxyBxR8IDgndjZ378CeEXH2c6WLK1wK2JHYX", "IgiMfiuy3LFjzH0ehmyf5Rkti8AmVtwcGqc6nttN");
var TestObject = Parse.Object.extend("TestObject");
var testObject = new TestObject();
testObject.save({foo: "bar"}, {
success: function(object) {
$(".success").show();
},
error: function(model, error) {
$(".error").show();
}
});
</script>
</body>
</html>
However, when I try to serve that up using the HtmlService shown below, I get no response from Parse. Parse Core.html basically has all of the code I have above ( only thing I changed was to remove the css calls).
function doGet() {
var htmlPage = HtmlService.createTemplateFromFile('Parse Core.html')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
.setTitle('Parse Core Test');
return htmlPage;
}
Link to ParseDb Library for Apps Script
Here is the key to add the library: MxhsVzdWH6ZQMWWeAA9tObPxhMjh3Sh48
Install that library and it allows you to use most of the same methods that were used by ScriptDb. As far as saving and querying go they almost identical. Make sure to read the Library's notes, how to add the applicationId and restApiKey. It is a little different that you can silo data by classes which must be defined in the call to Parse.
Bruce here is leading the way on database connection for Apps Script, he has plenty of documentation on using Parse.com, and also his own DbConncection Drive that would allow you to use a number of back-end systems.
Excel Liberation - Bruce's Site.
My canvas has image which programly generated from local file or from images from internet. When I try to save it using toDataURl function I get secure error. How can I save result (without server, using only js ) and is it possible?
I know about security rule but maybe there is some solution to bypass this rule
All my code is in github if need
Shame! Don't bypass rules built to provide security for our users.
The key to satisfying CORS security and still getting what you need is to let the user select the image file you need to load into canvas.
If the user selects the file, CORS security is satisfied and you can use the canvas as you need (including using canvas.toDataURL to save the canvas).
Here are the steps to let a user select a file from their local drive:
Add an html input element with type="file"
The user clicks browse on this element and selects their file
When the user clicks OK, use window.URL.createObjectURL to create a URL from their selected file.
Create a new Image and set its source to the URL you created in #3.
Use context.drawImage to draw your new image on the canvas.
The resulting canvas is CORS compliant so canvas.toDataURL will work.
Here's example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
$("#fileInput").change(function(e){
var URL = window.webkitURL || window.URL;
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
canvas.width=img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
ctx.fillStyle="black";
ctx.fillRect(0,canvas.height-30,canvas.width,30);
ctx.fillStyle="white";
ctx.font="18px verdana";
ctx.fillText("I'm OK with CORS!",5,canvas.height-8);
}
img.src = url;
});
$("#save").click(function(){
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
}); // end $(function(){});
</script>
</head>
<body>
<input type="file" id="fileInput">
<button id="save">Save</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>