I am trying to update some popups in my map but I am not able to do that.
Firstly I create some markers, and with the next code, I create a popup associated to them. One popup for each marker:
popFeature = new OpenLayers.Feature(markers, location);
popFeature.closeBox = true;
popFeature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
'autoSize': true
});
popFeature.data.popupContentHTML = "hello";
popFeature.data.overflow = (false) ? "auto" : "hidden";
var markerClick = function (evt) {
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
mark.events.register("mousedown", popFeature, markerClick);
After that, I add the new marker to my marker layer.
Everything is fine until here, but, I want to update the popupcontentHTML some time later and I don't know how I can access to that value.
I read OL API but I don't understand how to get it. I am lost about features, events, extensions...
I want to know if I can access to that property and write other word.
I answer myself, maybe it helps other people in future:
for(i = 0; i < map.popups.length; i++){
if(map.popups[i].lonlat.lon == marker.lonlat.lon){
map.popups[i].setContentHTML("new content");
}
}
Content will be refreshed at the moment.
Related
I have a geojson that was added as a feature vector to openlayer. All the geojson in their properties section have some additional information that I want to display on clicking a feature (eg a popup) in 3d space. I used the ol-cesium overlay example to create a pop but there isn't a way to get the feature-geojson properties just with 3d(ol-cesium) enabled.
Are there any approach to get the feature details on clicking a feature in 3d space?
figured it out I think I had to do some think like this .
private getOlFeatureFromMouseLocationInOLCS(cesiumMouseEvent: any): OlFeature | undefined {
if (cesiumMouseEvent.position.x === 0 && cesiumMouseEvent.position.y === 0) {
return;
}
/**
//hoping the below two lines have bee defined early on .
this._ol3d = new OLCesium({ map: this._currentMap });
this.scene = this._ol3d.getCesiumScene();
**/
const pickedFeature = this.scene.pick(cesiumMouseEvent.position);
let olFeature: OlFeature;
if (pickedFeature.primitive) {
olFeature = (pickedFeature.primitive.olFeature)?pickedFeature.primitive.olFeature as OlFeature : undefined;
} else {
olFeature = undefined;
}
return olFeature;
}
Is it possible via the SoundCloud API to get the current playing trackname ? Via the widget it's ok but it will be better (UX point of view) if I could without.
I found nobody mention it, if you have an idea, you're welcome !
Thx
I'm currently looking to do the same thing. Seems that the only way to do it via the API is to use what they call "activities" : https://developers.soundcloud.com/docs/api/reference#activities
So you can have a list of all activities made by a user, which includes the listening of a track. But I assume the activity will appear in the list only once the music has been played, not while the music plays.
Has anyone already used that functionnality ?
Regards,
Seb
I coded this litlle script that bind DOM's updates but it's very tricky.
// Bind new song on the soundcloud player
$('.playbackSoundBadge').bind('DOMSubtreeModified', function(e){
track_info = e.target;
if(track_info.className.indexOf('sc-media-image') > -1){
thumb = track_info.querySelector('span');
if(thumb != null){
splitted_url = track_info.href.split(/\//);
playing.artist = splitted_url[3];
playing.trackname = splitted_url[4];
thumb = track_info.querySelector('span');
playing.thumbnail = standardizeThumb(thumb.style.backgroundImage);
toaster(playing);
}
}
});
// Toast factory
function toaster(playing){
// Is there already a toast ?
toast = document.getElementById('sc-toast');
if(toast == null){
toast = document.createElement('div');
toast.id = 'sc-toast';
document.body.appendChild(toast);
}else{
toast.innerHTML = '';
}
// Build our toast
thumb = document.createElement('img');
thumb.src = playing.thumbnail;
toast.appendChild(thumb);
wrapper = document.createElement('div');
wrapper.className = 'wrapper-text';
playing.artist = standardizeString(playing.artist);
playing.trackname = standardizeString(playing.trackname);
artist = document.createElement('h1');
artist.innerHTML = playing.artist;
trackname = document.createElement('h2');
trackname.innerHTML = playing.trackname;
wrapper.appendChild(artist);
wrapper.appendChild(trackname);
toast.appendChild(wrapper);
}
I'm using this piece for hide/show selected layer:
app.activeDocument.activeLayer.visible = !app.activeDocument.activeLayer.visible;
I wonder if there exist a way of toggling a non selected layer by it's name.
Many thanks
Update:
I got it working with this thing (I know, it must be cleaned):
function toggleLayer() {
for( var i = 0; i < app.activeDocument.artLayers.length; i++) {
if (app.activeDocument.artLayers[i].name == "theLayer"){
app.activeDocument.artLayers[i].allLocked = false;
app.activeDocument.artLayers[i].visible = !app.activeDocument.artLayers[i].visible;
}
}
}
I'd like to know if we can do the same without the loop.
Thanks
Here is the solution I did write. Unexpectedly it worked :P
function toggleLayer() {
var tl = app.activeDocument.layers["theLayer"];
tl.visible = !tl.visible;
}
toggleLayer();
Now, I have another doubt: Whats the difference between "layers" and "artLayers"?
Cheers
I'm trying to add an autocomplete feature in my Google Spreadsheet using this Google Apps Script suggest box library from Romain Vialard and James Ferreira's book:
function doGet() {
// Get a list of all my Contacts
var contacts = ContactsApp.getContacts();
var list = [];
for(var i = 0; i < contacts.length; i++){
var emails = contacts[i].getEmails();
if(emails[0] != undefined){
list.push(emails[0].getAddress());
}
}
var app = UiApp.createApplication();
var suggestBox = SuggestBoxCreator.createSuggestBox(app, 'contactPicker', 200, list);
app.add(suggestBox);
return app;
}
function onEdit() {
var s = SpreadsheetApp.getActiveSheet();
if( s.getName() == "my_sheet_name" ) { //checks that we're on the correct sheet
var r = s.getActiveCell();
if( r.getColumn() == 1) {
doGet();
}
}
}
But when I start editing the column 1 of "my_sheet_name" nothing hapens (if I replace doGet() for other function, this other function runs Ok). I've already installed the Suggest Box library. So, why the doGet() function doesn't work?
small confusion here...
The doGet() ..... return app; structure that you are using here is for standalone webapps that need to be deployed and run with their own url in a browser window.
What you are trying to do is to show a Ui in a popup window in a spreadsheet, the mechanism is different : see example below and have a look at the documentation here.
function doGet_or_any_other_name_preferably_something_more_specific() {
var contacts = ContactsApp.getContacts();
var list = [];
for(var i = 0; i < contacts.length; i++){
var emails = contacts[i].getEmails();
if(emails[0] != undefined){
list.push(emails[0].getAddress());
}
}
var app = UiApp.createApplication();
var suggestBox = SuggestBoxCreator.createSuggestBox(app, 'contactPicker', 200, list);
app.add(suggestBox);
SpreadsheetApp.getActive().show(app);
}
Note that this code will allow the Ui to show up but that's about all.... no data will be written in the spreadsheet since you didn't implement any handler to handle the data return. For details about that step read the aforementioned documentation and the examples shown on Romain's website.
EDIT following your comment : tested with this exact code (copied/pasted) and working, see capture below.
I have the feature ID, I can grab the marker layer on GeoRSS loadend, but I'm still not sure how to cause the popup to appear programmatically.
I'll create the popup on demand if that's necessary, but it seems as though I should be able to get the id of the marker as drawn on the map and call some event on that. I've tried using jQuery and calling the $(marker-id).click() event on the map elements, but that doesn't seem to be working. What am I missing?
Since I was asked for code, and since I presumed it to be boilerplate, here's where I am so far:
map = new OpenLayers.Map('myMap');
map.addLayer(new OpenLayers.Layer.OSM());
map.addLayer(new OpenLayers.Layer.GeoRSS(name,url));
//I've done some stuff as well in re: projections and centering and
//setting extents, but those really don't pertain to this question.
Elsewhere I've done a bit of jQuery templating and built me a nice list of all the points that are being shown on the map. I know how to do a callback from the layer loadend and get the layer object, I know how to retrieve my layer out of the map manually, I know how to iter over the layers collection and find my layer. So I can grab any of those details about the popup, but I still don't know how to go about using the built-in methods of the DOM or of this API to make it as easy as element.click() which is what I would prefer to do.
You don't have to click the feature to open a popup.
First you need a reference to the feature from the feature id. I would do that in the loadend event of the GeoRSS layer, using the markers property on the layer.
Assuming you have a reference to your feature, I would write a method which handles the automatic popup:
var popups = {}; // to be able to handle them later
function addPopup(feature) {
var text = getHtmlContent(feature); // handle the content in a separate function.
var popupId = evt.xy.x + "," + evt.xy.y;
var popup = popups[popupId];
if (!popup || !popup.map) {
popup = new OpenLayers.Popup.Anchored(
popupId,
feature.lonlat,
null,
" ",
null,
true,
function(evt) {
delete popups[this.id];
this.hide();
OpenLayers.Event.stop(evt);
}
);
popup.autoSize = true;
popup.useInlineStyles = false;
popups[popupId] = popup;
feature.layer.map.addPopup(popup, true);
}
popup.setContentHTML(popup.contentHTML + text);
popup.show();
}
fwiw I finally came back to this and did something entirely different, but his answer was a good one.
//I have a list of boxes that contain the information on the map (think google maps)
$('.paginatedItem').live('mouseenter', onFeatureSelected).live('mouseleave',onFeatureUnselected);
function onFeatureSelected(event) {
// I stuff the lookup attribute (I'm lazy) into a global
// a global, because there can be only one
hoveredItem = $(this).attr('lookup');
/* Do something here to indicate the onhover */
// find the layer pagination id
var feature = findFeatureById(hoveredItem);
if (feature) {
// use the pagination id to find the event, and then trigger the click for that event to show the popup
// also, pass a null event, since we don't necessarily have one.
feature.marker.events.listeners.click[0].func.call(feature, event)
}
}
function onFeatureUnselected(event) {
/* Do something here to indicate the onhover */
// find the layer pagination id
var feature = findFeatureById(hoveredItem);
if (feature) {
// use the pagination id to find the event, and then trigger the click for that event to show the popup
// also, pass a null event, since we don't necessarily have one.
feature.marker.events.listeners.click[0].func.call(feature, event)
}
/* Do something here to stop the indication of the onhover */
hoveredItem = null;
}
function findFeatureById(featureId) {
for (var key in map.layers) {
var layer = map.layers[key];
if (layer.hasOwnProperty('features')) {
for (var key1 in layer.features) {
var feature = layer.features[key1];
if (feature.hasOwnProperty('id') && feature.id == featureId) {
return feature;
}
}
}
}
return null;
}
also note that I keep map as a global so I don't have to reacquire it everytime I want to use it