I am going to use my local osrm server in order to do routing in a map based on mapbox GL. In mapbox-gl-directions.js there is a server part:
var initialState = {
api: 'https://api.mapbox.com/directions/v5/',
profile: 'driving-traffic',
unit: 'imperial',
proximity: false,
styles: [],
controls: {
inputs: true,
instructions: true
},
I would like to replace api with 'localhost:5000/route/v1/'
but it is not working.
Thanks.
OK. There are two lines that should be modified in mapbox-gl-directions.js.
First: change
api: 'https://api.mapbox.com/directions/v5/',
to
api: 'localhost:5000/route/v1/driving/',
Second: change
request.open('GET', api + 'mapbox/' + profile + '/' + query + '.json?' + options.join('&'), true);
to
request.open('GET', api + query + '?alternatives=true&steps=true&geometries=polyline&overview=full&annotations=true', true);
Related
I am having a problem loading an image using the OpenLayers library. I am trying to load an image that is stored on the device dynamically. If I declare the options manually everything works as expected. If I try to load the image through path using file://... I get the following error:
Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png
To resolve this error I used the Ionic Web View path converter: window.Ionic.WebView.convertFileSrc() .
But this gives me another error, now related to CORS, considering that the access method now uses HTTP GET, which I quite don't understand since I trying to load a local image and not a remote one:
Access to image at 'http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png net::ERR_FAILED
If I include the file in the assets folder and try to upload it, everything works as expected, but it's not how I want it to work.
Working code (manually configured):
let layerImage = new ImageLayer({
source: new Static({
url: 'assets/layers/volume.png',
crossOrigin: '',
projection: 'EPSG:31982',
imageExtent: layerExtent
}),
name: "layerImage",
visible: true,
});
this.map.addLayer(layerImage);
Not working code (dinamically configured inside a for loop):
let filePath = this.win.Ionic.WebView.convertFileSrc(this.file.externalDataDirectory + 'projects/' + this.projectId + '/layers/' + filename);
let layerImage = new ImageLayer({
source: new Static({
url: filePath,
crossOrigin: '',
projection: 'EPSG:31982',
imageExtent: layerExtent
}),
name: "layerImage",
visible: true,
});
this.map.addLayer(layerImage);
I saw in some related questions that this can be caused by debugging with Chrome, but the same problem happens if I not use it.
As per #Mike comment, the problem is solved if I remove the crossOrigin: '' option from Static.
let layerImage = new ImageLayer({
source: new Static({
url: filePath,
projection: 'EPSG:31982',
imageExtent: layerExtent
}),
name: "layerImage",
visible: true,
});
you can use url paramater as a function, maybe that helps.
const convertFileSrc = this.win.Ionic.WebView.convertFileSrc;
let layerImage = new ImageLayer({
source: new Static({
url: (extent) => {
return convertFileSrc(this.file.externalDataDirectory + 'projects/' + this.projectId + '/layers/' + filename);
},
crossOrigin: '',
projection: 'EPSG:31982',
imageExtent: layerExtent
}),
name: "layerImage",
visible: true,
});
this.map.addLayer(layerImage);
I have a Kepware OPC server and I am able to connect with my client (OPC Foundation UA lib). I created a device in Kepware and a group inside. I would like to read opc tags from the database and create them dynamically.
How do I create an item with address in PLC dynamically ?
I can recommend you take a look at KepServerEX Configuration API. Basically, it gives you complete remote management and configuration control over all your KEPServerEX instances. In your case, you can dynamically generate tags through a simple RESTful API call at the device level after reading required information (e.g. tag name, tag address, tag datatype) from your database.
Please refer to this guide for more information in order to enable and test Configuration API.
I also copied the following piece of code from Kepware's sample project to give you an idea:
function createTag(inputServer, inputChannel, inputDevice, inputTag, inputTagAddr) {
console.log("Creating " + inputTag + " with address " + inputTagAddr);
$.ajax({
type: 'POST',
url: 'http://' + inputServer + '/config/v1/project/channels/' + inputChannel + '/devices/' + inputDevice + '/tags',
data: '{"common.ALLTYPES_NAME":"' + inputTag + '","servermain.TAG_ADDRESS":"' + inputTagAddr + '","servermain.TAG_DATA_TYPE":' + inputTagType + '}',
contentType: 'application/json',
xhrFields: {
withCredentials: false
},
headers: {
'Authorization': 'Basic ' + encodeAuth
},
success: function(JSON, status, xhr) {
console.log(inputTag + " created under " + inputDevice);
},
error: function(JSON, status, xhr) {
console.log("Creation of " + inputTag + " failed!");
}
});
}
Within the Kepware Configuration, only certain drivers have the ability to dynamically create tags. For example, most of the Allen-Bradley suite can dynamically search and add tags while lower level drivers like Modbus can not. So it always depends on what driver the device in Kepware is using. To find individual configuration manuals for each driver, search here:
https://www.kepware.com/en-us/products/kepserverex/product-search/
I have one application in angularJs where I use $location.protocol() + '://' + $location.host() when I'm dealing with API calls.
Example:
return $http({
method: 'GET',
url: $location.protocol() + '://' + $location.host() + '/rest/api/category/category',
headers: {
'Jwt-token': store.get('jwt')
}
})
Now I'm building another application in VUEjs and i also wan't to use same "$location" logic to call API, but I don't know how.
My current implementation is hardcoding url
Example:
getCategories() {
fetch(`http://myapp.test/rest/api/category/category`, {
method: 'GET'
})
.then(response => response.json())
.then(json => this.categories = json)
}
How to properly "translate/convert" the code ($location.protocol() + '://' + $location.host()) from my Angular app to VueJs? If you need any additional information's please let me know and I will provide! Thank you!
Use can use the DOM api inside Vue applications:
document.location.protocol for protocol
document.location.host for the current host
or just document.location.origin for protocol+'://'+host
I think TFS RESTful api has a bug. I am trying to access it using an Angular web app. Our TFS server is corporate internal. Here is my code:
var path = 'http://tfs.mycompany.com/tfs/mycompany/_apis/wit/queries?$depth=1&$expand=all&api-version=2.2';
var config = { withCredentials: true };
$http.get(path, config)
.then(function (response) {
$scope.resultList = response.data.d.results || [ response.data.d ];
$scope.message = 'Found ' + $scope.resultList.length + ' item' + ($scope.resultList.length == 1 ? '':'s');
}, function (response) {
$scope.resultList = [];
$scope.message = 'Error ' + response.status + ' ' + JSON.stringify(response.data);
});
The request goes to the server, and the server responds with OK 200. However, the browser (Chrome) blocks the data, and tells me:
A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header
when the credentials flag is true. Origin 'http://localhost' is therefore
not allowed access. The credentials mode of an XMLHttpRequest is controlled
by the withCredentials attribute.
The request headers have Origin:http://localhost
The response headers have Access-Control-Allow-Origin:*
Is there any way for me to tell TFS to not return * in the Access-Control-Allow-Origin? This seems like a serious bug in TFS, which renders the RESTful api practically useless for web apps!
You may check Cross-origin resource sharing (CORS) example below to add Authorization in your code:
$( document ).ready(function() {
$.ajax({
url: 'https://fabrikam.visualstudio.com/defaultcollection/_apis/projects?api-version=1.0',
dataType: 'json',
headers: {
'Authorization': 'Basic ' + btoa("" + ":" + myPatToken)
}
}).done(function( results ) {
console.log( results.value[0].id + " " + results.value[0].name );
});
});
Also, check this case to see whether it is helpful:
AJAX cross domain issue with Visual Studio Online REST API
Now that I'm looking to use Ember-cli for my front-end, I'd need to use OpenID Connect for authentication and authorisation.
Has anyone done anything like this before?. I couldn't find any examples so far. I came across 'ember-cli-simple-auth', 'ember-cli-simple-auth-oauth2', 'ember-cli-simple-auth-token'.
I'm guessing I should be using 'ember-cli-simple-token'? Has anyone tried this? if so could you point me to any examples/reading resources?
Update: (11 Jul 15 )
I've been looking into 'torii' in particular 'ember-cli-torii-azure-provider'. I could get Authorization code fine, but no Id_Token (I guess its because it isn't asking Azure AD for Id_Token ), looks like I do need to look at writing a new torii provider. As per the Torii documentation,
Torii will lookup providers in the Ember application container, so if you name them conventionally (put them in the app/torii-providers directory) they will be available automatically when using ember-cli or ember app kit.
Does it mean, in my ember-cli project, I need to create 'torii-providers' folder and create the new provider? lets say 'torii-azure-openidconnect.js'?
UPDATE:
I'm trying to create a custom Torii provider for AzureAD OpenID Connect.
I'm getting "Error: The response from the provider is missing these required response params: id_token"
Here is my custom provider :
import Ember from 'ember';
import Oauth2 from 'torii/providers/oauth2-code';
import {configurable} from 'torii/configuration';
var computed = Ember.computed;
/**
* This class implements authentication against AzureAD
* using the OAuth2 authorization flow in a popup window.
* #class
*/
export default Oauth2.extend({
name: 'azure-ad-oidc',
baseUrl: computed(function() {
return 'https://login.windows.net/' + this.get('tennantId') + '/oauth2/authorize';
}),
tennantId: configurable('tennantId', 'common'),
// additional url params that this provider requires
requiredUrlParams: ['api-version','response_mode', 'nonce'],
optionalUrlParams: ['scope'],
responseMode: configurable('responseMode', null),
responseParams: computed(function () {
return [ this.get('responseType') ];
}),
state: 'STATE',
apiVersion: '1.0',
nonce : configurable('nonce', null),
responseType: configurable('responseType', 'null'),
redirectUri: configurable('redirectUri', function(){
// A hack that allows redirectUri to be configurable
// but default to the superclass
return this._super();
}),
open: function(){
var name = this.get('name'),
url = this.buildUrl(),
redirectUri = this.get('redirectUri'),
responseParams = this.get('responseParams'),
responseType = this.get('responseType'),
state = this.get('state'),
shouldCheckState = responseParams.indexOf('state') !== -1;
return this.get('popup').open(url, responseParams).then(function(authData){
var missingResponseParams = [];
responseParams.forEach(function(param){
if (authData[param] === undefined) {
missingResponseParams.push(param);
}
});
if (missingResponseParams.length){
throw new Error("The response from the provider is missing " +
"these required response params: " + missingResponseParams.join(', '));
}
if (shouldCheckState && authData.state !== state) {
throw new Error('The response from the provider has an incorrect ' +
'session state param: should be "' + state + '", ' +
'but is "' + authData.state + '"');
}
return {
authorizationCode: authData[responseType],
provider: name,
redirectUri: redirectUri
};
});
}
});
configuration.js
torii: {
sessionServiceName: 'toriiSession',
providers: {
'azure-ad-oidc' :{
tennantId : 'tenant id',
client_id : 'client_id',
redirectUri : 'http://localhost:4200',
nonce : 'my_nonce',
responseMode : 'form_post',
responseType : 'id_token',
scope : 'openid',
apiKey : ''
}
}
},
routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
azureLogin: function() {
this.get('torii').open('azure-ad-oidc').then(function(data) {
var authCode = this.get('toriiSession.authorizationCode');
console.log(authCode);
});
}
}
});
couldn't workout how to fix this..am I missing anything?
Please see ember-simple-auth-oidc, which implements the Authorization Code Flow of OpenID Connect and integrates with ember-simple-auth.
(I realize that the question has been asked a long time ago, but maybe it helps people who run into this in the future)