I am struggling with including a custom map with custom data into Highmaps. I am sure it's a pretty dumb thing, but I just can't find any examples and explanations on the web.
I have a JSON file with the data, and a GeoJSON file with the map. So, it could look like this:
$(function ()
{
$.getJSON('http://xxx/data/P_.json', function (data)
{
// Initiate the chart
$('#container').highcharts('Map',
{
series : [
{
data : data,
mapData: 'http://www/data/countries.geojson',
joinBy: ['Name', 'Countries'],
}]
});
});
});
But something is quite obviously wrong. How do I add then the custom mapData?
Thanks for your help!
There is a instruction about how to create custom geoJSON: http://www.highcharts.com/docs/maps/custom-geojson-maps
In 9. there is link to jsFiddle that show how geoJSON file should be parsed to be used by Highcharts as mapData: http://jsfiddle.net/highcharts/xbzxfx2L/
$('#run').click(function () {
var geojson = $.parseJSON($('#geojson').val());
// Initiate the chart
$('#container').slideDown().highcharts('Map', {
series: [{
mapData: geojson
}]
});
});
Related
I have a calendar like this defined:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'list' ],
defaultView: 'dayGridMonth',
events: '/activities/calendar.json?view=' + 'dayGridMonth', //calendarEl.view.title,
I am trying to customize the events JSON feed to the view - way easier to do this on the server side then adding a bunch of JavaScript logic. All I want to do is append the current view to the json url. In my code above I just manually coded 'dayGridMonth' but looking to make it dynamic. Tried calendarEl.view.title but that returns undefined. Read the docs but can't make sense of this. Perhaps I am looking at this the wrong way.
My requirement is to simply play a video (url in json file) on a plane in aframe. I have created video entity in my html as follows
<a-video id="video_1" position="0 0 2" geometry="width:2.4;height:1.4"></a-video>
Inside my register component i have added the src file to video as below
AFRAME.registerComponent('myComp', {
schema: {
file: {type: 'asset', default: 'assets/data/file1.json'},
var: {type: 'number', default: 0}
},
init: function () {
},
update: function () {
var data = this.data;
var scene = this.el.sceneEl;
var screen = scene.querySelector('#video_' + data.var);
load(data.file, function (response) {
var products = response.mydata;
screen.setAttribute('src',products[data.var].videoUrl);
});
this.el.addEventListener('mouseenter', function () {
console.log("mouseenter",screen.getAttribute('src'));
});
}
});
My console log is displayed with path mentioned in the json file
"mouseenter assets/img/movies/videos/video1.mp4"
In network tab, i could see my file got fetched with type media and status 200. But still i am getting error
components:texture:warn `$s` is not a valid video +41ms assets/img/movies/videos/video1.mp4
index.html:1 [.Offscreen-For-WebGL-000000BA313F15D0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
What is the correct way to add the video. Where am i going wrong. Please help
I was having the same problem and just managed to get it work in Chrome with something like this:
// Create a new asset
var new_asset = document.createElement('video');
new_asset.setAttribute('id', 'dynVid'); // Create a unique id for asset
new_asset.setAttribute('src', videoUrl);
// Append the new video to the a-assets, where a-assets id="assets-id"
document.getElementById('assets-id').appendChild(new_asset);
// Add the asset to the a-video
screen.setAttribute('src', '#dynVid');
// Start playback
new_asset.play();
This has the added benefit that you can control playback if necessary (new_asset.pause(), new_asset.currentTime = X, muted = true, etc).
For larger videos, you may need to add some callbacks, like oncanplaythrough, to wait until the video has loaded enough.
https://aframe.io/docs/0.5.0/guides/using-javascript-and-dom-apis.html#creating-an-entity-with-createelement
var videoEl = document.createElement('a-video');
videoEl.setAttribute('src', videoUrl);
this.el.appendChild(videoEl);
I am able to get all the Twitter Typeahead suggestions with the code below after user enters an input and the typeahead:render is called. I would like to hide the dropdown all the time and get the suggestions only in an array. Is there a way to achieve this since typeahead:render would probably require the dropdown be opened.
var bloodhoundData = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: localData
});
$('filter .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
source: bloodhoundData,
limit: 99999
}).on('typeahead:render', getSuggestions);
function getSuggestions() {
var suggestions = Array.prototype.slice.call(arguments, 1);
}
Since Bloodhound.js is a standalone library, you don't have to use typeahead with it. You could tie the input for bloodhound to an ordinary text input and examine the result of the get method.
Something like this might work, with q being the text from the input (borrowed from the NFL Teams example):
var myBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function(obj) { return obj.name; },
local: localData
});
function getMyData(q, sync) {
myBloodhound.search(q, sync);
}
You can check out the bloodhound documentation here and the examples here.
I am using JVector map and marking some locations on the map using Markers.
According to the documentaiton the following code can be used to mark locations.
markers: [
{ latLng: [53.3574436, 9.9076650], name: 'some city' },
{ latLng: [53.3574436, 10.2127204], name: 'another city' },
{ latLng: [56.5611120, 24.0300030], name: 'one more city' }
]
In my case I am not sure how many locations I need to mark. Some times 3, some times 5. So what I want to know is, it is possible to Generate the code inside markers : [ ] dynamically with JSON. Or may be any other way?
You could add code with ClientScriptManager.RegisterClientScriptBlock
See: https://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerclientscriptblock(v=vs.140).aspx
Or you could do it inline in the markup with <% %> tags.
I am trying to update my famous.js surfaces' content by using Meteor's Blaze.toHTMLWithData(template, data), like Blaze.toHTMLWithData(Template.roomIlanSpecsTemplate, data), with a custom template in a function creating a famous surface inside a famous view. I want to pass the template in the cursorToArray function depending on the type of document returned to its callbacks. But I cannot have a rendered page on the browser, even there is no error in the console. If I use hardcoded version like having createFn function for each different template and then defininig and cursorToArray fucntion with that function it works.
What can be the thing I miss here?
cursorToArray = function(cursor, renderablesArray, template, createFn){
//each callback should decide which createFn to use based on result document, cos each result has a different template so a createFn.
cursor.observe({
addedAt: function(document, atIndex, before) {
renderablesArray.splice(atIndex, 0, createFn(document, template));//createRoomIlanView, createRoomRenterIlanView, createFriendLookupIlanView
},
changedAt: function(newDocument, oldDocument, atIndex) {
renderablesArray[atIndex] = createFn(newDocument, template);
},
});
}
cursorToArray(Ilans.find(), ilanViews, Template.roomIlanSpecsTemplate, createIlanView);
portion of the createFn definiton:
function createIlanView(data, template){
var ilanSpecsSurface = new Surface({
content: Blaze.toHTMLWithData(template, data),
properties: {
fontSize: "14px"
}
});
return ilanSpecsSurface;
}
If it is all about older Famous what about using Reactive Surface from https://stackoverflow.com/a/30445791/2288496
var ReactiveTemplate = famodev.ReactiveTemplate;
var reactive = new ReactiveTemplate({
template: Template.mytemplate,
data: Collection.find().fetch(),
properties: {}
});
A good example how to implement Routing, Subscriptions etc. https://github.com/sayawan/flowwy