I'm using vue in combination with deck.gl, during a view state transition it keeps playing until the transition has finished even when interrupted.
Init deck:
this.deck = new Deck({
canvas: 'deck-canvas',
width: '100%',
height: '100%',
initialViewState: this.initialViewState,
controller: true,
onViewStateChange: ({ viewState }) => {
this.map.jumpTo({
center: [viewState.longitude, viewState.latitude],
zoom: viewState.zoom,
bearing: viewState.bearing,
pitch: viewState.pitch,
});
},
});
Creating a new view transition:
this.deck.setProps({
viewState: {
...predefinedCameraPosition,
transitionInterpolator: new FlyToInterpolator(),
transitionDuration: 2000,
transitionInterruption: this.deck._onViewStateChange.bind(this)
}
})
I expect the transition to stop when the user interrupts it.
Turns out another function was manipulating deck.gl's layer state. Updating the viewState at the same time fixed this.
this.deck.setProps({
layers: [...this.deckLayers],
viewState: this.deck.viewState
});
Related
I have done Marker Clustering in my Vue js application. And the cluser icon is custom made. But there is a problem.
import { MarkerClusterer } from '#googlemaps/markerclusterer';
this.markerCluster = new MarkerClusterer({
map,
markers,
renderer: {
render: ({ markers, _position: position }) => {
return new vm.google.maps.Marker({
position: {
lat: position.lat(),
lng: position.lng()
},
zIndex: 1,
icon: require('#/assets/marker-clusterer.svg'),
label: {
text: String(markers.length),
color: 'white',
fontSize: '13px',
fontFamily: 'Lato-Reqular,sans-serif'
}
})
}
}
})
Anyone had the experience like this? The issue is, when the map just moved the cluster counts getting merged and can't read the count(See the first screenshot). Once the map just zoom in or zoom out, then the count become ok (Screenshot 2).
I'm looking for the solution to avoid the merging of the Cluster count in the first screenshot.
Anyone can help me on this? Thanks in advance.
I'm using vue-toasted to show notifaction.
By default, it pops down to top.
Code:
<v-btn #click="onTest" />
...
onTest() {
this.$toast.info('Test!', {
containerClass: 'toasted-container',
className: 'toasted',
keepOnHover: true,
})
},
nuxt.config.js:
toast: {
duration: 3800,
action: {
icon: 'mdi-close-circle',
onClick: (e, toastObject) => {
toastObject.goAway(0)
},
},
iconPack: 'mdi',
icon: 'mdi-check-circle',
},
The toast pops down to top.
I tried to add some css like transition.
I'm not familiar with CSS, so I guess it's wrong.
How can I change it to right to left?
I couldn't find any info on their GitHub.
vue-toasted v1.1.27 only supports animating upward or downward. It has no API to add new animations.
I added some #keyframes and animation, it worked.
#keyframes in {
0% {
opacity: 0;
left: 100%
}
100% {
opacity: 1;
left: 0%
}
}
.some-class{
animation: in 300ms;
}
I am trying to render a simple Azure Map in a vue.js single-file component. I can get the map to draw at a specified center and zoom. And draw a line segment exactly where I want it.
But I cannot draw a marker properly. It does draw, but it is seriously south-west from the specified coordinate (which is on the an endpoint of a line segment drawn previously).
Here's a single page Vue.js 'App.vue':
<template>
<div id="myMap"></div>
</template>
<script>
import * as atlas from "azure-maps-control";
export default {
mounted: function() {
this.map = new atlas.Map("myMap", {
center: [-113.666783, 53.806008],
zoom: 7,
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<redacted>",
},
});
let self = this;
//Wait until the map resources are ready.
this.map.events.add("ready", function() {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
self.map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(
new atlas.data.LineString([
[-112.926043, 53.803],
[-113.666783, 53.806],
])
);
//Create a line layer to render the line to the map.
self.map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "blue",
strokeWidth: 5,
})
);
//Create an HTML marker and add it to the map.
var marker1 = new atlas.HtmlMarker({
color: "DodgerBlue",
position: [-112.926043, 53.803],
anchor: "bottom",
htmlContent: '<div class="pulseIconNormal"></div>',
popup: new atlas.Popup({
content:
'<div style="padding:10px">Sensor</div>',
pixelOffset: [0, -30],
}),
});
self.map.markers.add(marker1);
//Add a click event to toggle the popup.
self.map.events.add("click", marker1, () => {
marker1.togglePopup();
});
});
}
}
</script>
<style>
#myMap {
height: 100vh;
width: 100vw;
}
.pulseIconNormal {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: blue;
}
</style>
When I looked at DOM for the marker (in Firefox dev tools), this is the style that I see:
transform: translate(-50%, -100%) translate(737px, 235px) rotateX(0deg) rotateZ(0deg);
This isn't coming from CSS, but is in inline. That's the reason, but not the explanation why. It appears the control itself is generating this.
I found the problem. I am using NPM to load azure-maps-control and I had to explicitly add
<style src='azure-maps-control/dist/atlas.min.css'></style>
to the .vue file.
The map div in your code isn't closed properly. Instead of <div id="myMap" /> it should be <div id="myMap"></div>. HTML standards say self closing div's are invalid. Give that a try and see if it helps.
If it doesn't try inspecting the HTML marker DOM to see if any CSS is being appended to it by your app and try adjusting to see if it addresses the issue.
Looking at your code, the HTML marker should be anchored bottom center to its position.
For the same problem with Angular (11), I had to add the azure css file to my angular.json like so:
"styles": [
"src/styles/styles.scss",
"node_modules/azure-maps-control/dist/atlas.min.css"
],
Has anyone had luck creating a vue application that utilizes Electron webviews? I have the following setup, but when I run the window is blank.
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
webviewTag: true,
width: 1276,
height: 800,
frame: false,
titleBarStyle: 'hiddenInset',
center: true,
movable: true,
webPreferences: {
nodeIntegration: true
}
})
}
Then in my component.
<webview id="foo" src="https://www.youtube.com/" style="display:inline-flex; width:640px; height:480px"></webview>
Move webviewTag: true, to webPreferences
I have a Kendo UI datawiz component, RadialGauge, which I would like to feed with real time data. It's setup using the asp.net wrappers, like so (snipped from kendo demos):
<div id="gauge-container-center">
#(Html.Kendo().RadialGauge()
.Name("tensionGauge")
.Pointer(pointer => pointer.Value(28))
.Scale(scale => scale
.MinorUnit(5)
.StartAngle(-60)
.EndAngle(240)
.Max(180)
.Labels(labels => labels
.Position(GaugeRadialScaleLabelsPosition.Inside)
)
.Ranges(ranges =>
{
ranges.Add().From(80).To(120).Color("#ffc700");
ranges.Add().From(120).To(150).Color("#ff7a00");
ranges.Add().From(150).To(180).Color("#c20000");
})
)
)
</div>
All the underlying functionality is for "real time" data is setup and working fine. My only issue is how I would go about feeding the signalR value into the .Pointer(pointer => pointer.Value(signalRValueHere) part. Any suggestions on how to do this? It doesn't seem to be an abundance of examples combining these two frameworks yet, so search results are scarce.
Ok, so I solved this using a different approach. I opted to use the javascript-initializer instead, allowing me to utilize SignalR-values in the script.
function createGauge() {
$("#tensionGauge").kendoRadialGauge({
pointer: {
value: 0,
color: "black",
},
cap: {
color: "white",
size: 1
},
scale: {
minorUnit: 50,
majorUnit: 100,
startAngle: -50,
endAngle: 230,
min: #Convert.ToInt32(Model.MinTensionRange),
max: #Convert.ToInt32(Model.MaxTensionRange),
labels: {
position: "inside"
},
ranges: [ // TODO: Fetch limits from signalR or Model
{
from: 300,
to: 100,
color: "#ffc700"
},{
from: -300,
to: -100,
color: "#ffc700"
}, {
from: #Convert.ToInt32(Model.MinTensionRange),
to: -300,
color: "#c20000"
},{
from: #Convert.ToInt32(Model.MaxTensionRange),
to: 300,
color: "#c20000"
}
]
}
});
}
$(document).ready(function () {
createGauge();
});
And the js-part to update the value:
messageHub.client.notifyTension = function (tensionMessage) {
$('#tensionGauge').data("kendoRadialGauge").value(tensionMessage);
};