We Keep Coding

vue.js mapbox map not showing

I want to have my map to show, but no mater what I do, it doesn't display a map.
The current code I use is the following:
<template>
<div>
<MglMap
:accessToken="mapboxAccessToken"
:mapStyle.sync="mapStyle"
:center="coordinates"
/>
<button class="btn btn-contained btn-success add-location" v-on:click="addLocation"><span>Button</span></button>
</div>
</template>
<script>
import Mapbox from "mapbox-gl";
import { MglMap } from "vue-mapbox";
export default {
components: {
MglMap
},
props: {
currLat: Number,
currLon: Number,
allPoints: Array
},
// Mounted (page load), we ask to track
mounted: function () {
const options = {
enableHighAccuracy: true
};
this.$watchLocation(options)
.then(coordinates => {
// Set the center to my coordinates
this.currLat = coordinates.lat;
this.currLon = coordinates.lng;
// Emit the user data to all connected devices.
this.$socket.emit('USER_COORDS', {
'user': this.$socket.id,
'lat': this.currLat,
'lon': this.currLon
});
});
},
data() {
return {
mapboxAccessToken: "removed",
mapStyle: "mapbox://styles/mapbox/streets-v10",
coordinates: [0.0, 0.0]
};
},
created() {
// We need to set mapbox-gl library here in order to use it in template
this.map = Mapbox;
},
methods: {
geolocateError(control, positionError) {
// console.log(positionError);
Latte.ui.notification.create({
title: "An error occurred!",
message: "We could not get your location, please try again by reloading the application."
});
},
geolocate(control, position) {
console.log(
`User position: ${position.coords.latitude}, ${position.coords.longitude}`
)
},
addLocation: function() {
this.$socket.emit('NEW_LOCATION', {
name: 'VK1',
lat: this.currLat,
lon: this.currLon
});
}
},
sockets: {
USER_COORDS_DATA: function (data) {
// user connects, data of the current location gets emitted
// this.map.flyTo({
// center: [data.lon, data.lat],
// zoom: 15,
// speed: 1
// });
// console.log(data)
},
NEW_LOCATION_DATA: function (data) {
// Returned data from the server (after storage)
console.log(data)
},
},
}
</script>
<style>
#import '../../node_modules/mapbox-gl/dist/mapbox-gl.css';
#map {
width: 100%;
height: calc(100vh - var(--app-bar-height));
}
.btn.add-location {
position: absolute;
left: 2rem;
bottom: 2rem;
}
</style>
I get the follwoing output in my console:
I have no clue on what is going wrong here, even no idea why I get a dom exception?
I just want to have my map to be displayed and show a marker on your location, any idea what is going on here? Why the map isn't rendering?
Packages used:
- "mapbox-gl": "^1.3.1",
- "vue-mapbox": "^0.4.1",

I had a similar problem, I was not able to show the map entirely, even demo from VueMapbox https://soal.github.io/vue-mapbox/ did not work for me.
However, I found out after inspection in chrome that the entire div has height set to 0, which is weird why.. I then set the height manually and it worked
I created an issue on project github so we will probably see where is the problem: https://github.com/soal/vue-mapbox/issues/158
TLDR: set the height manually

In my case the issue was caused by a height: 100% for the body tag. One I set the body tag to px, i.e. height: 500px hight it worked fine for me.

Getting black screen for remote video: WebRTC

I'm developing video calling functionality with WebRTC and facing a very strange problem.
When I make a call everything is fine and I'm getting a remote video stream, but when I receive a call, I get a black screen with no remote video. The strange part is that when I refresh the page I get the remote video!
In the console, I'm getting the following thing:
Video constraints false
But when I refresh the page I get the video object.
This is my video container in index.html,
<video id="video-container" autoplay="autoplay" class="video-style"></video>
Main.js:
(function() {
var vertoHandle, vertoCallbacks, currentCall;
document.getElementById("make-call").addEventListener("click", makeCall);
document.getElementById("hang-up-call").addEventListener("click", hangupCall);
document.getElementById("answer-call").addEventListener("click", answerCall);
$.verto.init({}, bootstrap);
function bootstrap(status) {
vertoHandle = new jQuery.verto({
// ID of HTML video tag where the video feed is placed.
tag: "video-container",
deviceParams: {
// Asking for camera permissions and devices.
useCamera: 'any',
useMic: 'any',
useSpeak: 'any',
},
login: '1008#127.0.0.1',
passwd: '1234',
socketUrl: 'wss://127.0.0.1:8082',
ringFile: '',
iceServers: true,
}, vertoCallbacks);
};
vertoCallbacks = {
onWSLogin : onWSLogin,
onWSClose : onWSClose,
onDialogState: onDialogState,
}
function onWSLogin(verto, success) {
console.log('onWSLogin', success);
}
function onWSClose(verto, success) {
console.log('onWSClose', success);
}
function onDialogState(d) {
console.debug('onDialogState', d);
if(!currentCall) {
currentCall = d;
}
switch (d.state.name) {
case 'trying':
//
break;
case 'ringing':
alert('Someone is calling you, answer!');
break;
case 'answering':
//
break;
case 'active':
//
break;
case 'hangup':
//
break;
case 'destroy':
//
break;
}
}
function makeCall() {
vertoHandle.videoParams({
minWidth: 320,
minHeight: 240,
maxWidth: 640,
maxHeight: 480,
// The minimum frame rate of the client camera, Verto will fail if it's
// less than this.
minFrameRate: 15,
// The maximum frame rate to send from the camera.
vertoBestFrameRate: 30,
});
currentCall = vertoHandle.newCall({
useVideo: true,
mirrorInput: true,
destination_number : '3520',
caller_id_name : 'Test Caller',
caller_id_number: '1008',
outGoingBandwidth: 'default',
inComingBandwidth: 'default',
useStereo: true,
useMic: true,
useSpeak: true,
userVariables: {
email: 'test#test.com'
},
dedEnc: false,
});
}
function hangupCall() {
currentCall.hangup();
};
function answerCall() {
currentCall.answer();
}
})();
What's wrong with this code?
Thanks in advance!

So after some research, I've found the solution.
I was getting the error Video constraints false because they were set at the time of making a call, not at the time of receiving. So I manually set the property,
useVideo: true
after deviceParams.
Just like,
tag: "video-container",
deviceParams: {
// Asking for camera permissions and devices.
useCamera: 'any',
useMic: 'any',
useSpeak: 'any',
},
useVideo: true,
//other properties
Now I'm getting the video at the time of making a call too.

Making custom chrome app top bar

I am making a chrome app and this is my background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false
});
});
I want to know how to make it so when I run the app, the top bar where you can close the app is a different color. I also want to know how to show text on the top bar with a different color.

The top bar is part of the window's frame.
You can supply a FrameOptions object to create():
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false,
'frame': { /* ... */ }
});
});
You have 2 broad options:
You can keep the default system frame, and have (minimal) customization options: specifically, you can control the frame's color. See this sample.
'frame': { 'color': "#ff0000" }
Optionally, it can be different when active/inactive. See the documentation for appropriate format. You can't control the text color this way.
You can completely disable the OS-supplied frame, and build your own - but you'll need to provide your own controls (e.g. a close button) and draggable areas. See this sample.
'frame' : { 'type' : 'none' }

try this:
innerBounds: {
width: ,
height: ,
minWidth: ,
maxWidth: ,
minHeight: ,
maxHeight:
}

crossrider extension installed on all browsers but working only in chrome

I have successfully installed the my crossrider extension on Chrome, Firefox and IE (all up to date) but the browser button (although enabled on all) only works for Chrome.
Background code seems to work, since I can trigger alerts.
My background.js looks like this:
appAPI.ready(function() {
var popupDims = {
CH: {height: 400, width: 400},
FF: {height: 400, width: 400},
IE: {height: 400, width: 400},
SF: {height: 400, width: 400}
};
if ("CHFFIESF".indexOf(appAPI.platform) !== -1) {
appAPI.browserAction.setPopup({
resourcePath:'popup.html',
height:popupDims[appAPI.platform].height,
width:popupDims[appAPI.platform].width
});
}
else {
alert('This extension is not supported on your browser');
}});
In my popup.html I have some javascript:
function crossriderMain($) {
// load libraries
eval(appAPI.resources.get('select2.js'));
$('[as-trigger]').click(function () {
// retrieves the information for the active tab
appAPI.tabs.getActive(function(tabInfo) {
activeUrl = tabInfo.tabUrl;
appAPI.request.get({
url: 'http://...',
onSuccess: function(response, additionalInfo) {
// show message
},
onFailure: function(httpCode) {
console.log('GET:: Request failed. HTTP Code: ' + httpCode);
}
});
});
})
$('[as-project-dropdown]').select2().on('select2-selecting', function (e) {
// some jquery code
});
appAPI.request.get({
url: 'http://...',
onSuccess: function(response, additionalInfo) {
var dataObject = JSON.parse(response);
$.each(dataObject.data, function(key, value) {
$('[as-project-list]').append('some html...');
});
$('[as-companyname]').html(dataObject.company);
},
onFailure: function(httpCode) {
console.log('GET:: Request failed. HTTP Code: ' + httpCode);
}
});}
And in my firefox console I can see an error thrown by my extension:
MyExtension <Warning: document.getElementById(...) is null Function-name: appAPI.request.get User callback>
#Crossrider support: my app id is 65982

Looking at your code I can see that you did not set the browser action's icon. Per the Browser Action docs, on some browsers this is essential for the button to properly initialize. I created an extension with your code and added the icon using appAPI.browserAction.setResourceIcon and the button worked fine.
So taking the snippet from your background.js, add the icon as follows:
appAPI.ready(function() {
var popupDims = {
CH: {height: 400, width: 400},
FF: {height: 400, width: 400},
IE: {height: 400, width: 400},
SF: {height: 400, width: 400}
};
if ("CHFFIESF".indexOf(appAPI.platform) !== -1) {
appAPI.browserAction.setResourceIcon('logo.jpg');
appAPI.browserAction.setPopup({
resourcePath:'popup.html',
height:popupDims[appAPI.platform].height,
width:popupDims[appAPI.platform].width
});
}
else {
alert('This extension is not supported on your browser');
}});
[Disclosure: I am a Crossrider empployee]

Replacing javascript Alerts with Kendo Notification

I'm wondering the best way to replace all my alert('error...') with kendo notifications, the easiest way.
so I can just do
myKendoAlert('my message', info); and I don't have to add a specific html div or span holder to each page.
currently I'm doing something like:
var popupNotification = $("#popupNotification").kendoNotification({
position: {
pinned: false,
bottom: 100,
right: 100
},
templates: [{
type: "info",
template: "<div>Test : #= myMessage #</div>"
}],
autoHideAfter: 0,
stacking: "up"
}).data("kendoNotification");
But I need to put this in a common javascript file with a function I can use on all pages. with, info, error, success... (and clear on success)

Just add a method to your namespace to do just that, and call it from where ever you need to.
Here is a sample that is similar to what I do, putting two methods, showSuccess and showError on the top level of the javascript namespace for my application (I use toastr, but same approach).
I have my app object on the window object, with two methods I can call from wherever.
http://jsbin.com/novena/1/edit

var notificationWidget = null;
function alert(message, type) {
if (notificationWidget == null) {
notificationWidget = $("#notification").kendoNotification({
button: true,
hideOnClick: true,
//appendTo: "#container",
//width: "30em",
position: {
pinned: true,
top: "5em",
left: null,
bottom: null,
right: 10
},
autoHideAfter: 8000
}).data("kendoNotification");
}
notificationWidget.show(message, type);
}