I have two concurrent video tracks in my room : the presenter (always present) and the guestspeaker (dynamically changes, blancks allowed). For the records composition, I want to:
display the presenter video full screen if they are the only one publishing video
display the presenter video in big format,and to the right, the guestspeaker video in a smaller format.
Here is what I tried ( for a "1280x720" resolution) :
var videoLayout = new Dictionary<string, Object>()
{
{"main", new Dictionary<string, Object>()
{
{"x_pos", 0},
{"y_pos", 0},
{"width", 995},
{"height", 720},
{"video_sources", new object [] {"video-composer-presentation" } }
}},
{"speaker", new Dictionary<string, Object>()
{
{"x_pos", 1000},
{"y_pos", 210},
{"width", 280},
{"height", 200},
{"video_sources", new object [] {
"guest-speaker"
}}
}}
};
Good result, but not dynamic( which is normal, dimensions being explicitly set)
and does not look well centered when there is only one video
Then I tried the grid layout :
var videoLayout = new Dictionary<string, Object>()
{
{"grid", new Dictionary<string, Object>()
{
{"max_rows", 1},
{"video_sources", new object [] {
"video-composer-presentation",
"guest-speaker"
}}
}}
};
same problem, plus, I don't have control over the dimensions:
How can I achieve the desired layout ? thanks
Related
I am viewing BuildingSceneLayer using ArcGIS Javascript API.
I want to display a SceneLayer which is not shared as public in the ArcGIS portal.
When I try viewing it I get
Sceenshot
When I view in Codepen
https://codepen.io/arnofiva/pen/c410babb5384945a12b1d8206ebe27ce?editors=1010
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/BuildingSceneLayer"
], function(Map, SceneView, BuildingSceneLayer) {
// Create Map
var map = new Map({
basemap: "terrain",
ground: "world-elevation"
});
// Create the SceneView
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: [-74.0338, 40.6913, 707],
tilt: 81,
heading: 50
}
});
// Create SceneLayer and add to the map
var sceneLayer = new BuildingSceneLayer({
portalItem: {
id: "e7bf9f676ed64937bff9f44c84fdae2b"
},
popupEnabled: false
});
map.add(sceneLayer);
sceneLayer.when().then(function() {
view.goTo(sceneLayer.fullExtent);
});
});
I get a popup for logging in. How do I enable that in my code?
I want to put a download link inside Dojo grid . can any one provide me way to generating link in json
Layout
var layout = [{
field: 'id',
name: 'id',
width: '100px'
},
{
field: 'Download',
name: 'Download',
width: '100px'
}];
Java code for generation Json
JSONObject json = new JSONObject();
json.put("Id", "1");
json.put("ProductName", "Download Link");
JSONArray finalArray = new JSONArray();
finalArray.add(json);
setResponse(getTopLevelJsonObject(finalArray).serialize(true));
If you're asking how to put a link in a dgrid cell, then you need to override the column's renderCell function.
e.g.
columns: {
id: {label:'ID'},
name: {
label:'Name',
renderCell: function(object, value, node, options) {
var anchor = domConstruct.create("a");
anchor.href = "http://www.google.com";
anchor.innerHTML = value;
return anchor;
}
}
},
Here's a jsfiddle of an anchor/link in a dgrid cell.
I'm using "gmaps4rails" on rails,
it is useful, I can show the direction form A to B, and some markers on google maps.
Now, I need some advanced features:
I want to show "Street View" on google maps,like this http://www.trulia.com/property/3064331264-482-Mariposa-Ave-Mountain-View-CA-94041
I noticed that in the left of this map http://www.trulia.com/property/3064331264-482-Mariposa-Ave-Mountain-View-CA-94041, you can click "Comparables","Estimates","Schools"...
how are these features achieved in rails?
Thanks in advance!
The answer doesn't really have much to do with rails.
Take a look at this sample code from Google.
In particular, take a look at the javascript:
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
I've been trying to find a way to use the 'Reverse Geocoding' service with the Latitude and Longitude co-ordinates coming from two text boxes on my HTML form, and I must admit I'm not really sure what I need to do.
I have managed to do this with the 'Geocode' service (see code below), but I just wondered whether someone may be able to point me in the right direction of how I could adapt the 'Geocode' javascript I have to the 'Reverse Geocoging' service.
(function Geocode() {
// This is defining the global variables
var map, geocoder, myMarker;
window.onload = function() {
//This is creating the map with the desired options
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
// This is making the link with the 'Search For Location' HTML form
var form = document.getElementById('SearchForLocationForm');
// This is catching the forms submit event
form.onsubmit = function() {
// This is getting the Address from the HTML forms 'Address' text box
var address = document.getElementById('GeocodeAddress').value;
// This is making the Geocoder call
getCoordinates(address);
// This is preventing the form from doing a page submit
return false;
}
}
// This creates the function that will return the coordinates for the address
function getCoordinates(address) {
// This checks to see if there is already a geocoded object. If not, it creates one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// This is creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// This is making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// This checks to see if the Status is 'OK 'before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// This centres the map on the returned location
map.setCenter(results[0].geometry.location);
// This creates a new marker and adds it to the map
var myMarker = new google.maps.Marker({
map: map,
zoom: 12,
position: results[0].geometry.location,
draggable:true
});
//This fills out the 'Latitude' and 'Longitude' text boxes on the HTML form
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
//This allows the marker to be draggable and tells the 'Latitude' and 'Longitude' text boxes on the HTML form to update with the new co-ordinates as the marker is dragged
google.maps.event.addListener(
myMarker,
'dragend',
function() {
document.getElementById('Latitude').value = myMarker.position.lat();
document.getElementById('Longitude').value = myMarker.position.lng();
var point = myMarker.getPosition();
map.panTo(point);
}
);
}
}
)
}
})();
UPDATE
Firstly, many thanks for the code you kindly posted and the suggestion to go and have a look at the Google documentation.
From what you suggested, and from what I took from the additional documentation I came up with the following. However, when I click my submit button nothing happens, almost as if there is no command attached to it. I don't receive any error messages and I've checked to make sure that I've linked the code to the correct fieldnames and all seems ok. I just wondered whether it would be at all possible if you, or indeed anyone else, could take a look at it please to tell me where I've gone wrong.
Many thanks and kind regards
(function ReverseGeocode() {
var form, geocoderRequest, latlng, myMarker, point;
window.onload = function() {
//This is creating the map with the desired options
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var latlng = new google.maps.LatLng('Latitude', 'Longitude');
// This is making the Geocode request
geocoder.geocode({'LatLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
var myMarker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
//This fills out the 'Address' text boxe on the HTML form
document.getElementById('Address').value= results[0].geometry.location.latlng();
var point = myMarker.getPosition();
map.panTo(point);
}
}
}
)}})
Once you have the latitude and longitude from your form, you do something like this (using your above code as a starting point, for the sake of clarity):
var latlng = new google.maps.LatLng(latitudeFromForm,longitudeFromForm);
// This is creating a GeocoderRequest object
var geocoderRequest = {
'latlng':latlng
}
// This is making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// This checks to see if the Status is 'OK 'before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Do stuff with the result here
}
If you haven't read it yet, you may want to read the Reverse Geocoding section of http://code.google.com/apis/maps/documentation/javascript/services.html#ReverseGeocoding.
I am writing an iPad application that uses the MapKit control.
How do I get all my content into Google Maps. i.e. I have a bunch of locations along with photos, video, audio and various other information.
So when the iPad user loads my App and zooms into a certain place in the world I want my Annotations to be visible and when they touch the pins they get access to more information etc.
var myOptions = {
zoom: 4,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mp200 = new google.maps.Map(document.getElementById('dv200m'), myOptions);
var pos = new google.maps.LatLng(tLat, tLon);
var mrk2 = new google.maps.Marker({ position: pos, map: mp200, title: 'bla bla', icon: '/images/twitter.png' });