we are developing a tour with GEPlugin and I have some questions..
The tour is similar to Tour.
It starts and navigates to a Placemark where its stop and shows a balloon with a specific information for the Placemark.
I have defined the balloon using an iframe inside the description in kml, that points to a php script.
I can load the css and javascript if I click the placemark (via click event attached) however I can´t make it show up when the tour stops setting
<Change><Placemark><gx:balloonVisibility>1</gx:balloonVisibility></Placemark></Change>
in the kml file.
Is there a way to make It show up the way I want?
Thanks!
Ok, I have found the solution.
I attached the event balloonopening (looked all over around the documentation) to the instance of the google earth plugin, get the feature and set the specific balloon.
Here goes some code example:
function showBalloon(placemark){
var content = placemark.getBalloonHtmlUnsafe();
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(placemark);
balloon.setContentString(content);
balloon.setCloseButtonEnabled(false);
ge.setBalloon(balloon);
}
google.earth.addEventListener(ge, 'balloonopening', function(){
var placemark = ge.getBalloon().getFeature();
showBalloon(placemark);
});
Thanks!
Related
Hey I'm trying to scroll the amazon offers page using puppeteer but it is not scrolling and there is no mouse event happening.
This is the offers page URL.
https://www.amazon.com/dp/1416545360/ref=olp_aod_early_redir?_encoding=UTF8&aod=1
This is the selector I'm trying to scroll on the above page. #all-offers-display-scroller
I would appreciate your help regarding this.
I need to use the puppeteer own methods to serve this purpose.
You can use pressing space on main scrollable element. Ideally it works in most of the sites just by pressing space you can go down
Here's the code for the page you given,
const element = await page.$('#aod-container')
await element.press('Space')
I am considering buying the pro version of this plugin, but I want to confirm that I would be able to create a text link , such as "CLICK HERE" that will trigger a lightbox slider show to pop up. Can this plugin does this easily?
There are a LOT of light box plugins and code snips, so it is tough to say, but you should be able to utilize some jQuery javascript to manipulate the click event to do what you desire to do. You could make a div area to hide until needed to show the lightbox, if needed, or just inject it into the body of the document...
<script>
$('popupDiv').hide();
var lightboxCode = '<span>Whatever code your plugin uses to display here</span>';
$('#showButton').click( function() {
$('popupDiv').html(lightboxcode);
$('popupDiv').show();
});
</script>
I seemed to have developed an issue with placemark descriptions not displaying when clicked. The balloon opens, and by the size it looks like the text might actually be there but it's not displaying. The page is fairly dynamic, with multiple kml's loading, so I wonder if somewhere I killed the placemarks in the code? They display fine in the earth app, so I'm assuming it's something with the plugin or the way I'm loading the kml.
Here's an example: http://tour.frederickwildman.com/jaboulet Any help or advice on how to proceed would be very helpful. Thanks
It is hard to be sure as I can only intermittently reproduce the problem but I think there are two possible issues.
Firstly, you balloons are having their content scrubbed be the earth api. You can confirm this by looking at the mark-up of an open balloon. You will see something like the following where content has been removed.
<!--
Content-type: mhtml-die-die-die
-->
Secondly, the balloons appear to be having an issue resizing due to the content.
To overcome these issues you can choose to handle the balloon events yourself. You can then call getBalloonHtmlUnsafe() for the balloon content scrubbing and
setMaxWidth() and setMaxHeight() for the resizing. e.g.
google.earth.addEventListener(ge.getGlobe(), 'click', function(event) {
// exit if not a placemark
if(event.getTarget().getType() != 'kmlPlacemark') return;
// cancel the default behaviour
event.preventDefault();
// get the un-scrubbed content and show the max-sized balloon
var content = placemark.getBalloonHtmlUnsafe(),
balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(event.getTarget());
balloon.setContentString(content);
balloon.setMaxWidth(800);
balloon.setMaxHeight(600);
ge.setBalloon(balloon);
});
Currently, I am loading a lot of placemarks on Google Earth on the website I created. Each placemark corresponds on a single file from the server. The placemarks are created one by one by the server coming from different images during initialization.
To ease the load of the server and the client, I am planning to change the implementation I mentioned using sprite image using css. Is this possible in Google Earth? I can't find any information about this. Maybe you can give some reference to do this.
Thank you very much.
Ability to use Image Sprites for Placemark Icons
I think you can do it something like:
ge.getFeatures().appendChild(me.placemark);
me.point = ge.createPoint('');
me.placemark.setStyleSelector(ge.createStyle(''));
var IconStyle = me.placemark.getStyleSelector().getIconStyle();
IconStyle.getColor().set(colour);
IconStyle.getHotSpot().setXUnits(ge.UNITS_FRACTION);
IconStyle.getHotSpot().setYUnits(ge.UNITS_FRACTION);
IconStyle.getHotSpot().setX(0.5);
IconStyle.getHotSpot().setY(0.5);
me.setLoc(lat,lon);
IMHO: if there are thousands of images in the sprite it will load it as many times as the number of placemarks on the map.
I have many large KML data-sets, which are served using a hierarchy of region-based network-links; as described in the KML reference:
Using Regions in conjunction with NetworkLinks, you can create a hierarchy of pointers, each of which points to a specific sub-Region. The <viewRefreshMode>, as shown in the following KML file, has an onRegion option, which specifies to load the Region data only when the Region is active. If you provide nested Regions with multiple levels of detail, larger amounts of data are loaded only when the user's viewpoint triggers the next load.
This works nicely when loaded in Google Earth.
I now wish to load these in an application using the Google Earth plug-in. And I need to access the loaded content via the Google Earth API; (i.e. attach click events, alter styles) to integrate the content into the application.
The issue is, I haven't found any reference to an 'on-load' event for network links. In my mind, the way this would work is:
Load top-level network link via the API, attaching a call-back function which will be invoked when the network-link is loaded.
In the call-back function, parse the KML returned by network link. For intermediate levels in the regionation hierarchy, this KML will contain only network links to the next regionation level. Load these into the plug-in via the API, again specifying the same call-back function, which will be invoked when these are loaded (i.e. when their region becomes visible).
Eventually, the KML returned will contain the actual 'content'. At this stage we load the actual content (i.e. placemarks) into the plug-in, after performing any desired modifications (e.g. attaching event-listeners, setting styles, etc).
I'm thinking the javascript would look something like the following.
Please note: this is just a rough sketch to perhaps aid in understanding my question. I am NOT asking why this code doesn't work.
//create network link
var networkLink = ge.createNetworkLink("");
networkLink.setName("Regionated hierarchy root");
// create a Link object
//the network-links contained in the kml that will be returned in this file
//are region-based; they will only be loaded when the user zooms into the relevant
//region.
var link = ge.createLink("");
link.setHref("http://foo.com/regionatedRoot.kml");
// attach the Link to the NetworkLink
networkLink.setLink(link);
//specify the callback function to be invoked when the network link is loaded
//this is is the part that doesn't actually exist; pure fiction...
networkLink.onLoad = networkLinkLoaded;
// add the NetworkLink feature to Earth
ge.getFeatures().appendChild(networkLink);
// function which will be invoked when a network-link is loaded
// i.e. when its region becomes active
function networkLinkLoaded(kml) {
//parse the kml returned for child network links,
//this will create the network link KmlObject, with a
//region specified on it.
for (childNetworkLink in parseNetworkLinks(kml)) {
//and append them, again hooking up the call-back
childNetworkLink.onLoad = networkLinkLoaded;
ge.getFeatures().appendChild(childNetworkLink);
}
//if the user has zoomed in far enough, then the kml returned will
//contain the actual content (i.e. placemarks).
//parse the kml returned for content (in this case placemarks)
for (placemark in parsePlacemarks(kml)) {
//here we would attach event-listeners to the placemark
ge.getFeatures().appendChild(placemark);
}
}
Is this possible?
Have I taken a wrong turn in my thinking? I believe I have followed recommended practices for managing large KML datasets, but I am unsure how to use these via the API.
Addendum:
As an example of the type of problem I am trying to solve:
Imagine you are building a web application using the Google Earth Plugin, and you want to display a placemark for every set of traffic-lights in the world. The placemarks should only display at an appropriate level-of-detail (e.g. when the camera is at 5km altitude). When a user clicks on a placemark, we want the web app to load statistics for that set of traffic-lights, and display them in a sidebar.
How would you engineer this?
You wouldn't need access to the object data directly to provide the functionality you require. You would handle the data load exactly like you have done, using a hierarchy of region-based network-links.
Then if your usage scenario is like the one you set out in your addendum then you would simply use the target data from the click event to load your statistical data based on the placemarks as required.
For example, you could simply set up a generic mousedown event handler on the window object and then test to see if the target is a placemark. You can add this generic listener before you load any data and it will still be fired when you click on your dynamically loaded placemarks. There is no need to attach individual event-listeners to the placemarks at all.
e.g.
window.google.earth.addEventListener(ge.getWindow(), 'mousedown', onWindowMouseDown);
var onWindowMouseDown = function(event) {
if (event.getTarget().getType() == 'KmlPlacemark') {
// get the placemark that was clicked
var placemark = event.getTarget();
// do something with it, or one of its relative objects...
var document = placemark.getOwnerDocument();
var parent = placemark.getParentNode();
// etc...
}
}
Not sure if this is quite what you want but there is a kmltree api that will:
build out the kml tree for you based on the kml given
allow you to have a 'kmlloaded' event handler
http://code.google.com/p/kmltree/
function initCB(instance){
ge = instance;
ge.getWindow().setVisibility(true);
var gex = gex = new GEarthExtensions(ge);
var tree = kmltree({
url: 'http://foo.com/regionatedRoot.kml',
gex: gex,
mapElement: $('#map3d'),
element: $('#tree'),
});
$(tree).bind('kmlLoaded', function(event, kmlObject){ //do something here });
tree.load();
}
it does require you to bring in another js api but it works pretty good and gives you some good built in functionality.
So far I haven't found anything just from the plug-in that will fire an event when the kml is loaded...
you might be able to try using fetchKml() especially if you are hardcoding that url for the link in there?
google.earth.fetchKml(ge, 'http://foo.com/regionatedRoot.kml', function(kmlObject){
//do logic here
});