We are using HERE JS API to show a HERE map widget on our site. We need specify a specific language for the map tiles, so we found this API reference that says we can send in a map tile language on creation of the defaultLayers.
ex: this doc, though we did find we had to use "lg" instead of "lang".
We pass in the language on layer creation as follows:
var maptypes = platform.createDefaultLayers({
tileSize: devicePixelRatio > 1 ? 512 : 256,
ppi: devicePixelRatio > 1 ? 320 : 72,
lg: "hin"
});
It seems to partially work. At farther away zoom levels, I can see the labels are in Hindi. However, sometimes when I zoom in or out, the labels become romanized English characters. Is this expected behavior? Is there any way I can resolve this?
Hindi showing up initially:
English showing up in labels when zoomed in by minimal amount:
These are the versions we are using:
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
As you have already figured out in order to change the language of the map tiles you need to pass the lg parameter. It is stated in the HERE Map Tile API documentation.
The MARC three-letter language code for requesting a map tile rendered in a specific language. If the given language is not available, the default language eng is used.
So that is why specifying lg=hin won't show absolutely all labels in that language.
About createDefaultLayers method. So you can call it by passing several arguments or an object. Example:
const tileSize = devicePixelRatio > 1 ? 512 : 256;
const ppi = devicePixelRatio > 1 ? 320 : 72;
platform.createDefaultLayers(tileSize, ppi, "hin");
or (mind the ES6 object initialiser notation)
platform.createDefaultLayers({tileSize, ppi, lg: "hin"});
Try with the following dependencies
<link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1549984893" />
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-clustering.js"></script>
<script type="text/javascript" src="https://js.cit.datalens.api.here.com/latest/mapsjs-datalens.js"></script>
Related
In Official documentation there's a program in which they mentioned reference of Don McCurdy’s aframe-extras to get for Aframe 1.2.0. But when I am running the program using CDN of production link. It never works. And I receive the following error as well.
My code is :
<!
DOCTYPE html>
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<title>Proyectos</title>
</head>
<body>
<a-scene physics>
<script>
AFRAME.registerPrimitive('a-ocean', {
// Attaches the `ocean` component by default.
// Defaults the ocean to be parallel to the ground.
defaultComponents: {
ocean: {},
rotation: {x: -90, y: 0, z: 0}
},
// Maps HTML attributes to the `ocean` component's properties.
mappings: {
width: 'ocean.width',
depth: 'ocean.depth',
density: 'ocean.density',
color: 'ocean.color',
opacity: 'ocean.opacity'
}
});
</script>
<a-ocean color="aqua" depth="100" width="100"></a-ocean>
</a-scene>
</body>
</html>
a-ocean is defined in a-frame extras, so there is no need for you to define it again, you should be able to just use it. That explains the first error ("a-ocean is already registered").
Unfortunately is written using the THREE.js Geometry component, which was deprecated in THREE.js r125.
That corresponds to A-Frame 1.2.0.
This explains the second error ("mergeVertices is not a function").
So (until someone updates a-ocean) you have to use A-Frame 1.1.0 or earlier if you want to use a-ocean.
This code will give you a basic ocean
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<title>Proyectos</title>
</head>
<body>
<a-scene physics>
<a-ocean color="aqua" depth="100" width="100"></a-ocean>
</a-scene>
</body>
</html>
In terms of getting a-ocean fixed, it looks like there has been some work on this:
https://github.com/n5ro/aframe-extras/issues/362
That issue includes sample code for a fix, but nobody has made it into a PR yet...
I'm unable to see any reflexion on my gtLF model using "cube-env-map".
I'd like to get something like this :
helmet from threejs.org examples
I don't know if this is because of the .jpg files I use, or html or linked javascript scripts, or... anything else?
Here's my html :
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><!-- Master file for aframe (== a-scene) -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script><!-- webcam/mobilecam -->
<script src="https://mkwy.fr/js/play-all-model-animations.js"></script><!-- animation -->
<script src="https://mkwy.fr/js/aframe-orbit-controls.min.js"></script><!-- orbit cam around target -->
<script src="https://mkwy.fr/js/aframe-extras.js"></script><!-- cub-env-map -->
</head>
<body>
<a-scene vr-mode-ui="enabled: false" embedded>
<a-assets>
<a-asset-item id="toy" src="https://mkwy.fr/assets/toyDrummerSolo.glb"></a-asset-item>
</a-assets>
<a-entity
gltf-model="#toy"
cube-env-map="path: https://mkwy.fr/assets/cube-env/; extension: jpg; reflectivity: 0.9;"
play-all-model-animations >
</a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1 0; minDistance: 0.5; maxDistance: 60; initialPosition: 0 5 5"></a-entity>
</a-scene>
</body>
</html>
Many thanks in advance for your help,
(Assuming there are no console errors suggesting incorrect cubemap paths, or wrong extensions)
If your model looks like this:
And you want it to be more like this:
Then the answer lies in two factors - metalness, and roughness.
roughness determines whether the material is like a mirror (0), or completely diffuses the reflection (1).
metalness determines whether the material is metallic (1), or not (0).
You can deal with this in at least two ways:
Modify the materials in a modelling software like blender, or maya.
Modify the properties within an a-frame custom component.
A component would have to wait until the model is loaded, and change all (or some selected) model nodes. Like this:
AFRAME.registerComponent("foo", {
init: function() {
// wait until the model is loaded
this.el.addEventListener("model-loaded", e => {
// grab the mesh
let mesh = this.el.getObject3D("mesh");
mesh.traverse(node => {
// ignore nodes without materials
if (!node.material) return;
// assign the values.
node.material.metalness = 1;
node.material.roughness = 0;
})
})
}
})
You can check it out in this example.
The helmet is working with both jpg and png maps. As for arjs, if your model will be glitchy, and you'll experience z-fighting, just set the logarithmicDepthBuffer in the renderer:
<a-scene renderer="logarithmicDepthBuffer: true" embedded arjs>
Example here
.Seems to be working as expected:
Ok, I changed the settings in Blender, adding metalness, and now it works like a charm. It was confusing because in Blender you don't need to set metalness to get reflection (i.e. : a plastic bottle may have reflections). I have to play with these parameters. Many thanks!
I am trying to pass an image as an asset property type to some other component (so that either a #selector or a url(url) can be passed) but it seems to take in the entire html component, instead of just the url.
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name='description' content='Hello, WebVR! - A-Frame'>
<script src='../../global/js/aframe-v0.8.0.min.js'></script>
<script>
AFRAME.registerComponent('some-component', {
schema: {
image: {type:'asset', default:''},
model: {type:'asset', default:''}
},
init: function() {
console.log(this.data.image); //prints out <img id="SomeImage" src="../../someDir/someFile.jpg">
console.log(this.data.model); //prints out '../../someDir/someModel.gltf'
}
});
</script>
</head>
<body>
<a-scene >
<a-assets timeout='3000'>
<!-- this works as an asset no problem -->
<a-asset-item id='SomeModel' src='../../global/assets/models/gltf/UserHead/UserHead.gltf'></a-asset-item>
<!-- this does not pass as an asset but rather an html element -->
<img id='SomeImage' src='../../global/assets/textures/equirectangular/CloudySky.jpg'>
</a-assets>
<a-entity some-component='image:#SomeImage; model:#SomeModel;'></a-entity>
</a-scene>
</body>
</html>
Thought I might look to see how A-Frame handles this in the material component can't see where does the 'src' property on material come from?
<a-entity id='skyBox'
geometry='primitive:sphere; radius:50; segments-height:6; segments-width:6;'
material='shader:flat; src:#skyMap; side:back; height:2048; width:2048'>
</a-entity>
Material component (can't see src): https://github.com/aframevr/aframe/blob/master/src/components/material.js
Thanks!
EDIT:
As per Piotr's discoveries below it looks like images are handed as a special case, as can be in the src code here with frame 0.8.0 where an image source is handed like this:
hash: function (data) {
if (data.src.tagName) {
// Since `data.src` can be an element, parse out the string if necessary for the hash.
data = utils.extendDeep({}, data);
data.src = data.src.src;
}
return JSON.stringify(data);
},
So basically if an image we the asset property will not handle image's properly and an additional step of grabbing the url from it via
data.src.src
OR
data.src.getAttribute('src');
Please correct me if i'm wrong, but i think it's not in the material schema.
I think the devil's in the component.js, which not only seems to allow you to assign a value to any given property, but also has the constructor for any component, and parses the schema.
That being said, the material does not need a src in the schema, as it seems to be a part of every component. Furthermore there are multiple parsers like the assetParse, or src-loader, checking whether an attribute is a html element, or even a video / image asset.
As for the material part, check out the dist source code, where
I think what you're looking for is:
module.exports.updateMapMaterialFromData
where you can see a-frame team uses the data.src for the material, and updates the texture with it. Just give it a ctrl+F (only 3 hits).
So when
module.exports.updateMapMaterialFromData('map', 'src', shader, data);
is called, with the given definition:
module.exports.updateMapMaterialFromData = function (materialName, dataName, shader, data) {
var el = shader.el;
var material = shader.material;
var src = data[dataName];
.......
makes src = data[src] => they make updates using a local variable src.
Also you can see the src-loader in action where the material system is registered, and when a src attribute is found out, the validateSrc function fires one of the two callbacks:
utils.srcLoader.validateSrc(src, loadImageCb, loadVideoCb);
How to change the CSS file of yammer share button? I want to add my own CSS for the alignment for WordPress.
You can tell it to use a custom element and then style that element as you wish.
Source: https://developer.yammer.com/docs/share-button
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_social_buttons.min.js"></script>
<script type="text/javascript">
var yammer_options = {
customButton : true,
classSelector: 'my-custom-yammer-share-button'
};
yam.platform.yammerShare(yammer_options);
</script>
I just posted this in the Google Visualization group, but I thought I would reach out to the Plone community as well for help.
I am using Plone 4.2.4 and wanted to integrate Google Charts with an Oracle back end via cx_Oracle. There is already a very nice package called EEA.Daviz. However, it was way more than I needed and I thought I could do it on my own, so I created some page templates and Python code that wraps the Javascript. On my laptop (Mac OS X) it all worked fine.
However, once I pushed it to my server (SLES 10), BarCharts stopped working. I have only tested Bar, Line and Motion charts. All I get is a red error box that says "e[0].K is undefined". After googling around, I found a very similar description of my problem that suggests it is a Google Visualization error and the fix is to change the width and height properties. However, changing the height or width did not fix it. What is very strange is that, if I copy the example JS from the BarChart page and copy it into a vanilla Zope Page Template, it works just fine. However, once I wrap it in the master template, I get the red error message again.
So I am confused. I have the same theme installed on my laptop and it did not give me any problems. I know I can display BarCharts on the server without the theme in a vanilla Page Template.
Can anyone point me in the right direction?
ZPT that Works:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</body>
</html>
ZPT that does NOT work:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<metal:main fill-slot="javascript_head_slot">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</metal:main>
<body>
<metal:main fill-slot="main">
<tal:main-macro metal:define-macro="main">
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</tal:main-macro>
</metal:main>
</body>
</html>
I've tested your second example and it seems to work as intended so maybe there is something wrong with your data coming from Oracle (format, missing values, etc). You'll have to do some JS debugging out there. Try adding a breakpoint to see what e[0] is and why it doesn't have the K attribute (or why e is an empty Array).
Also, EEA Daviz is a bundle that brings together multiple Visualization frameworks (Google Charts, Simile Exhibit and in the near future Highcharts) but you can always use one or more of its components without bringing in the entire plane Thus, you should also try EEA Google Charts. Don't forget that you'll need collective.js.jqueryui < 1.9 for Plone 4.2.x