I want to control the POV (heading and pitch ) of multiple street view panoramas so when one panorama is interactively moved up down left right the other panorama moves with it
I can get this to work where interaction with panorama moves panorama2 another using this javascript:
google.maps.event.addListener(panorama, 'pov_changed', function() {
panorama2.setPov({ heading: panorama.getPov().heading + $headingoffset, pitch: panorama.getPov().pitch, zoom: panorama.getPov().zoom });
});
when I add the same code to control panorama via interaction with panorma2 both panoramas fail to be interactive so I assume the code causes a loop
google.maps.event.addListener(panorama2, 'pov_changed', function() {
panorama.setPov({ heading: panorama2.getPov().heading - $headingoffset, pitch: panorama2.getPov().pitch, zoom: panorama2.getPov().zoom });
});
\\The $headingoffset value is the degree of difference between to two panoramas
do I have to turn the listener off and on again for the other panorama while I change the POV - if so how
Or can this be done via a DIV mouse event instead
Related
I am not able to set bars width if there is only 1 or 2 bars in chart.
I am using Rgraph in my angular 7 app. I am unable to set marginInner property value based on the number of bars.
Is there any property to set the barwidth directly.
There's no property to set the width directly, but what you can do is put the logic for calculating the marginInner in the draw event or an exec() function. Here's an exec function example:
new RGraph.Bar({
id: 'cvs',
data: [8,4,6,3,5,1,5],
options: {
}
}).draw().exec(function (obj)
{
// Calculate marginInner here,set it and call RGraph.redraw();
});
This means that it runs only once after the chart has been drawn so you can then access the data (with obj.data) and then calculate how big the margin should be.
I'm using azure map.
What's happening is that I have 2 layers. A layer that have Circles and a layer with polygons.
I have a functionality in which a popup appear when I click on a specific circle.
The issue occur when I add the polygon layer after the circle layer.
It's like the polygon layer is being drawn on top of the circle layer. In which it prevent the popup from appearing when clicking on the circle.
Here's how I'm adding the polygon layer:
showFetchedResultOnMap(facilities) {
const self = this;
if (facilities && facilities.length > 0) {
self.cleanRestrictionLayer();
//Create a data source and add it to the map.
self.datasource = new atlas.source.DataSource();
self.map.sources.add(self.datasource);
//Add a data set to the data source.
self.CleanMap();
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
self.map.sources.add(datasource);
self.map.imageSprite.add(self.chosenCategory, 'assets/svg/' + self.chosenCategory + '.svg')
.then(function () {
facilities.forEach(cat => {
datasource.add(new atlas.data.Feature(new atlas.data.Point([cat.longitude, cat.latitude])));
});
//Add a layer for rendering point data as symbols.
self.map.layers.add(new atlas.layer.SymbolLayer(datasource, self.chosenCategory, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: self.chosenCategory,
//Optionally scale the size of the icon.
size: 0.1
}
}));
});
}
}
Anyone have an Idea about how I can fix this??
I'm not seeing a polygon layer in the code you provided. That said, when you add layers to the map, the order in which you add them is the z-index by default. Last one added goes on top. That said, when adding the layer using the map.layers.add function, there is a second parameter you can add in which can be another layer or layer id. When this is specified the layer you are adding will be inserted below that second specified layer. Here is the doc on this: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.layermanager?view=azure-maps-typescript-latest#add-layer---layer----string---layer-
Here is a short example:
map.layers.add(new atlas.layers.BubbleLayer(datasource, 'myBubbles'));
map.layers.add(new atlas.layers.PolygonLayer(datasource, 'myPolygons'), 'myBubbles');
In Anystock/AnyChart, I want to listen to the point event when the mouse clicks.
So, I added the following code as a script.
anychart.onDocumentReady(function () {
// create data table
var table = anychart.data.table();
// add data
table.addData([
['2015-12-24', 511.53, 514.98, 505.79, 506.40],
['2015-12-25', 512.53, 514.88, 505.69, 510.34],
['2015-12-26', 511.83, 514.98, 505.59, 507.23],
['2015-12-27', 511.22, 515.30, 505.49, 506.47],
['2015-12-28', 511.53, 514.98, 505.79, 506.40],
['2015-12-29', 512.53, 513.88, 505.69, 510.34],
['2015-12-30', 511.83, 512.98, 502.59, 503.23],
['2015-12-31', 511.22, 515.30, 505.49, 506.47],
['2016-01-01', 510.35, 515.72, 505.23, 508.80]
]);
// map loaded data
var mapping = table.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});
// create a stock chart
var chart = anychart.stock();
// add a series using mapping
chart.plot(0).ohlc(mapping).name('ACME Corp. Stock Prices');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// add a mount event listener - It is fine.
chart.listen('click', function(e){
alert(e);
});
// add a point event listener - It does not work.
chart.listen('pointClick', function(e){
alert(e);
});
});
The mouse event was being raised successfully, but the point event did not work.
How does we add the point event listener into anychart.stock() on AnyChart?
If anyone has a solution already, it would be great if you could share it.
Unfortunately, the current version of AnyStock (8.3.0) doesn't support point related events as basic charts. If you want to show additional information about the point you can show it in the point tooltip using formatter function - https://api.anychart.com/anychart.core.ui.Tooltip#format
I have a problem with WMS overlays in OpenLayers. Basically I just want to add data from a WMS server as an overlay and not as a base layer. This appears to be a very simple problem but I am unable to find a solution. If I set singleTile to true, the overlays appears over the whole map but you cannot zoom in. If it is set to false, only one tile is displayed at every zoom level. If I set it as a base layer, it works just fine but I really want the overlay solution so I can make it transparent and see the map behind it.
Demonstration of the problem, with a different dataset but the issue is the same:
http://jsfiddle.net/adbnC/2/
I think it might be related to some coordinate system issues but I am no expert so any help is appreciated.
Thanks a lot!
Here is the relevant section of the code that does not work as expected:
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000",
"http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false,
// Setting single tile to true will kind of work but than one
// cannot zoom in any more.
singleTile: false
}
);
I can't quite get what exactly is wrong here, but I think it has something to do with messed up reference systems. Here is a workaround:
Modified Jsfiddle.net
I changed the map projection to spherical mercator and now it seems to work fine for me:
var mapOptions = {
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m"
};
map = new OpenLayers.Map('map', mapOptions);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000", "http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false
});
map.addLayer(osm);
map.addLayer(pop_layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
Let me know if that helped!
I have implemented scrollable extjs tab panel in our product. But I also need to support accesskey functionality. For example, an "Alt + P" keystroke will open up one of tab. Does anyone have any experience about implementing this?
The core to this is creating a keymap to recognise you are pressing a combination of keys, once this is detected you can then add a custom handler.
See here: http://dev.sencha.com/deploy/dev/docs/?class=Ext.KeyMap
eg:
var map = new Ext.KeyMap("my-element", [
{
key: [10,13],
fn: function(){ alert("Return was pressed"); }
}, {
key: "abc",
fn: function(){ alert('a, b or c was pressed'); }
}, {
key: "\t",
ctrl:true,
shift:true,
fn: function(){ alert('Control + shift + tab was pressed.'); }
}
]);
Above are a number of sample mappings, you simply replace 'my-element' with the element you wish to look for the key presses on (so which element when selected will detect them). If you wish to have APPLICATION wide key mapping, this element should either be the body of the page, the window itself or the ExtJS Viewport (if you are using one) / Master element. This will mean you can be within any area of your application and the keypress is detected. The subsequent behaviour you define under the 'fn' property (i.e. change tab etc)...