I have an application that leverages Azure Maps to show pins of various locations on a map. All works great, but when I zoom out, some of the pins will disappear. When I zoom back in they reappear.
Is there a way to keep the map from hiding the pins even when zoomed out? I have set my iconOptions in the layer to...
layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
ignorePlacement: true
},
});
But that hasn't really helped.
Also set the allowOverlap option to true. If displaying text in a symbol layer, and you want that to always show, set the same options under the textOptions of the symbol layer.
layer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
allowOverlap: true,
ignorePlacement: true
}
});
Related
I have a reactjs application which needs to print receipts on a very specific paper. Each receipt has a 5.79" x 3.23" printable surface which is configured in CSS within our application as a printable div within a containing page. Printing from the application running in a standard browser is working fine, using a simple window.print(); and a test border applied to the edge of the printed DIV is displaying as expected.
When I try to run the same app wrapped with electron the printed output is scaled down significantly. If I increase my CSS to push the container div to 7.25" x 3.2" I can see the contents approximately fill the expected area.
Is there a known scale down when printing through electron or a setting I can adjust within either the BrowserWindow or webContents? To try and resolve this we did try modifying settings in electron.remote
const { remote } = window.require("electron");
var options = {
silent: false,
printBackground: true,
color: false,
margins: {
marginType: "none", //No setting here seems to make a difference
},
copies: 1,
}
remote.getCurrentWindow().webContents.print(options, (success, failureReason) => {
if (!success) console.log(failureReason);
});
I am using Amazon-chime-sdk-js to create a video conferencing service with React JS. I am keeping track of a 'tileStates' array which includes both the local and the remote video tiles. The tileStates array is updated in the 'videoTileDidUpdate' and 'videoTileWasRemoved' methods of the observer. The tiles from the 'tileStates' array are bound to video elements with 'bindVideoElement' method. All the video tiles seem to work perfectly when a user joins the meeting. But when the user turns his camera off, one of the tiles of the remote users in his screen turns black. The occurence of the bug is not consistent, i.e., someone turning the camera off does not gurantee that one of the remote user's video will go black in his screen. Sometimes it occurs, sometimes it does not.
Here are the observer methods in-essence:
videoTileDidUpdate: tileState => {
setState((state)=> {
const { tileStates } = state;
const tileId = parseInt(tileState.tileId, 10);
const index = tileStatesDraft.findIndex(tileState => tileState.tileId === tileId)});
if (index >= 0) {
return;
}
tileStatesDraft.push(tileState);
return { tileStates: tileStatesDraft };
}
videoTileWasRemoved: tileId => {
setState( state => {
const { tileStates } = state;
const tileStatesDraft = [...tileStates];
let index = tileStatesDraft.findIndex(tileState => tileState.tileId === tileId);
if (index >= 0) {
tileStatesDraft.splice(index, 1);
return { tileStates: tileStatesDraft };
}
})
}
The video stream is bounded as follows:
const videoElement = this.videoRef.current;
meeting.meetingSession.audioVideo.bindVideoElement(tile.tileId, videoElement);
The black screen
Here's the sequence that recreates the bug (please keep in mind that the bug does not always recreate; sometimes everything works perfectly):
User A joins the meeting and turns the camera on
User B joins the meeting and turns the camera on...both the users can perfectly see each other
User A turns his camera off. The local tile of A is removed and the video tile of B in the screen of user A turns black
** P.S.- Once the tile of User B turns black in the screen of User A, the tile does not get removed even if User B turns off his camera. i.e., the videoTileWasRemoved is not called in the end of User A for the camera of User B after User B's tile turns black on his side**
In depth issue -
When a user loads Map Page it initially loads a map of the whole world before quickly loading just the map portion required.
Goal - What i want is to direct moves to my desired location instead of flashing the whole world first.
Cause - As per my knowledge, this is caused due to following code -
this.maper.events.add('ready', () => { })
But the above code is required too as all the other necessary actions are to be done inside this function only once map gets ready.
Please guide me how to achieve this ?
Set the map camera options when loading the map rather than after the map is loaded. For example:
map = new atlas.Map('myMap', {
center: [-110, 50],
zoom: 2,
view: 'Auto',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
Background
In an application I'm working on, I've found that I can define values in sessionStorage in Chrome 62 on Windows 10, and that apparently changing that value in one tab affects other tabs that point to the same key.
I was operating under the assumption that localStorage is supposed to persist information across all browser windows, while sessionStorage is only supposed to persist information for a specific window or tab.
More specifically, I have an AngularJS service I'm using as a layer for sessionStorage interactions:
export class PersistenceSvc {
public static $inject: string[] = ['$window'];
public constructor(public $window: ng.IWindowService) {}
public save<T>(name: string, data: T): void {
const saveData: string = JSON.stringify(data);
this.$window.sessionStorage.setItem(name, saveData);
}
public load<T>(name: string): T {
const loadData: string = this.$window.sessionStorage.getItem(name);
const result: T = JSON.parse(loadData) as T;
return result;
}
}
...That I use from a run block in order to implement some data persistence in my application.
export function persistSomeData(
someSvc: Services.SomeService,
userAgentSvc: Services.UserAgentSvc,
persistenceSvc: Services.PersistenceSvc,
$window: ng.IWindowService) {
if(userAgentSvc.isMobileSafari()) {
// Special instructions for iOS devices.
return;
}
const dataToPersist: Models.DataModel = persistenceSvc.load<Models.DataModel>('SomeData');
if(dataToPersist) {
// Set up the state of someSvc with the data loaded.
} else {
// Phone home to the server to get the data needed.
}
$window.onbeforeunload = () => {
persistenceSvc.save<Models.DataModel>('SomeData', someSvc.dataState);
};
}
persistSomeData.$inject = [
// All requisite module names, omitted from example because lazy.
];
angular
.module('app')
.run(persistSomeData);
When only operating using a single tab, this works fine (unless running from an iOS device, but that's tangential to what I'm encountering.) When you do the following though, you start seeing some more interesting behavior...
Steps:
1. Open a Chrome instance. Create a new tab, and drag that out such that it becomes its own window.
2. Navigate to your site, that's using the above code.
3. Do things on your site that cause someSvc's data state to have different data in the first browser.
4. Do things on your site that cause someSvc's data state to have different data in the second browser.
5. Do something on your site that draws upon someSvc's data state in the first browser.
6. Observe that the data utilized on the first browser instance, was sourced by the second browser instance. (This is the problem, right here.)
Question:
In the past I haven't done a lot of cookie/localStorage/sessionStorage programming, so it's very possible that I've terribly misunderstood something. Bearing that in mind, why is it that window.sessionStorage is behaving in a way that the MDN documentation as well as the winning answer to this SO question says it shouldn't be behaving in?
EDIT: It turns out there is a problem, but it's not clientside. Closing this question, as I was operating under the assumption that the client was the problem.
There is something wrong with your code as a quick and easy test on the browser console shows that sessionStorage only impacts the browser tab that is open. A change in the right tab is not reflecting to the left tab:
If for example, my wifi goes offline, in leaflet i see new map areas grey but no notification about what really happening.
if i open the console i see:
GET https://a.tiles.mapbox.com/v4/image.png?access_token=correct_token
net::ERR_INTERNET_DISCONNECTED
anyone knows a way to catch such events and displaying a custom warning?
I already tried catching:
$scope.$watch('tileerror', function (error, tile) {
alert("No coonection");
});
p.s. using angular-leaflet-directive
EDIT: as pointed out by Ghybs in the comments there is indeed a tileerror event firing from L.TileLayer, however as far as i can see it's not implemented in Angular Leaflet Directive, please correct me if i'm wrong.
L.TileLayer does have an option for setting a replacement image when the tile cannot be loaded called: errorTileUrl:
URL to the tile image to show in place of the tile that failed to load.
new L.TileLayer(URL, {
errorTileUrl: 'error.png'
});
http://leafletjs.com/reference.html#tilelayer-errortileurl
If you need to preform some logic when tiles fail to load you could overwrite L.TileLayer's _tileOnError method:
L.TileLayer.include({
_tileOnError: function (done, tile, e) {
// Do your stuff
alert('whooops!');
// Leaflet stuff
var errorUrl = this.options.errorTileUrl;
if (errorUrl) {
tile.src = errorUrl;
}
done(e, tile);
}
});
https://github.com/Leaflet/Leaflet/blob/master/src/layer/tile/TileLayer.js#L96