Google Earth Plugin Click Events on 3D Buildings - javascript

I have been looking around and haven't found an answer to this yet. Is it possible to add click events to either the 3D building layer or custom 3D models using javascript for the google earth plugin.
My end goal is to be able to have a user select a 3d building and have an information bubble show up with details about that building. This is rather than the default bubble that Google shows with information about the 3D model.
Ideally one would be able to use the 3D buildings layer as opposed to loading the models manually, though I don't have high hopes of that being possible so doing it via manually uploaded 3D models would be a possibility.
I am using the google maps api V3 with the google earth utility library to activate the plugin.
Thanks in advance for any answers.

I think i've overread this the first time. After taking a closer look it reveals that it seems to be still not possible (in that easy way)
google.earth.addEventListener(placemark, 'click', function(event)
{
alert('click');
});
... Mouse events can be attached to most geometries in the plugin (the exception is 3D models), ...
google earth api
Maybe its possible to do that by implementing a custom intersection 'listener'
//EDIT:
Maybe thats not the hole story. more research revealed that it is possible to make a hittest agaignst some geometry. the ge interface has a function named hitTest(...)
api doc
GEHitTestResult GEView.hitTest( float x,
KmlUnitsEnum xUnits,
float y,
KmlUnitsEnum yUnits,
GEHitTestModeEnum mode
)
unfortunately the GEHitTestModeEnum is only suitable for GEPlugin.HIT_TEST_GLOBE GEPlugin.HIT_TEST_TERRAIN
GEPlugin.HIT_TEST_BUILDINGS
so you can hitTest against buildings but not against custom 3D models...
a slightly useable solution to click custom 3D models could be the one described in this issue using other 'eventable' invisible placemarks to detect a click.
litte code excample of hittesting
//EDIT2:
The solution i use in my current project sounds like that:
create a bounding box with polygons for every 'click event recieving custom 3d model'
that polygons can receive click events
google.earth.addEventListener(polygonPlacemark, 'click', function(event) {
alert('placemark bounding box clicked');
});

Related

Draw custom shape on Google Map and store into Oracle database using C#

Is it possible to make a Custom shape (Using Mouse) on the Google Map using Gmap library in C# and then save it into the database and on the client request draw the stored shape on Google Map again? Is there any possibility for doing such operation in any other library or in Gmap (I am not expecting the code. Just an overview of doing it.)?
Oh Boy....this is absolutely doable! And I do it on day to day basis! Let me share how I achieve it. Another thing to keep in mind that this works for Google Maps and Bing Maps.
First, you have to represent Maps as not just coordinates but as collection of small squares. Now what do I mean by that?!
Have a look at this following picture. It's image of Czech Republic on google maps.
Now Czech Republic a.k.a Czechia, on google maps can be seen as collection of smaller square images or grids. You need to understand this concept very well in order to make this idea work. Now take a look at the following image where it shows how the image of Czechia on Google Maps can be visualised as collection of small square boxes or grid. These small square boxes hold images of parts of Czechia.
If you want to Zoom into a co-ordinate Xm,Ym (Easting:Xm, Northing:Ym), which is a place in Czechia and the name of that place is "Hermanuv Mestec" (as shown in the above picture) then you need to choose the bounding small box with co-ordinates (X1,Y1),(X1,Y2),(X2,Y1)&(X2,Y2), and fetch the underlying images in that box. This feature to fetch underlying images within that bounding box is actually Zooming In. So when you Zoom In or in other words fetch the underlying images within that bounding box, you get something as the following image:
Now, I hope you got the underlying concept of how Zoom In or Zoom Out (reverse process) and mapping co-ordinate system works if you want to achieve what you want to achieve because this concept is very important to grasp before you proceed.
You need to write a program which can do this transformation. And as of your question how to achieve this as follows:
Step 1: Use a Panel (Control) on Windows Form or WPF or asp.net application, which you are building.
Step 2: Use GMap Library in C# to fetch the image within a bounding box as mentioned above and populate/draw that image on the Panel.
Step 3: Have a function that tracks mouse events on the panel. This function/method will track the X,Y position of mouse move event on the panel and use Panel Drawing tools to draw objects on the panel based on this.
Step 4: Write another program to transform these mouse X,Y positions on the panel to co-ordidnates on the map. This piece/part of the program is important because this is what enables you to translate your representation of small square image breakdowns of maps into panel drawable objects, so that you can draw them again and again in future if saved properly in the database.
Step 5: When you draw an abject on the panel you track the X,Y mouse bounds on the panel and transform those points into co-rodinates using your custom program and then you save the co-ordinates in the database table.
Thats it! And in case you need to draw the same object saved in the database, you first need to fetch/draw the google maps image on the panel again, then need to fetch that shape of the object from the database by fetching the co-ordinates of that object saved in the database table, use your translation program to convert those co-ordinates into panel drawable points and draw the object back on the same panel.
Now, you can write this translation program (Easting Northing co-ordinates to Drawing Panel co-ordinates) yourself, which might take good few months or at least some time. Or you can buy customised program specialised to achieve this exact same function for a good amount of price.
Hope this helps.
You can also achieve this with Google Maps drawing object with JavaScript as mentioned in another answer but the issue is with the translation and saving the coordinates in the database. It's much faster and responsive in this aforementioned method. Anyway, this is how I do this, so kind of personal opinion.
Technologies required for the aforementioned technique is as follows:
Google Map Library/Bing Map Library (whichever you choose)
C# with .Net Framework 3.5 or above (.net framework lesser than this is also fine but may require bit more lines of code to achieve some functionality if you want to achieve complexity in this)
SQL Server Management Studio or anything equivalent depending on
the type of database and query you are planning to use.
I think you want to make a map overlay, and you can use Goggle Drawing Tools in conjunction with your map. See: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
This will create the overlay. Presumable you could write javascript code that would save the coordinates and attributes of the overlay to a hidden field once you hit a "Save button" . Then after form submission you could save this info to a database using standard techniques, and then when rendering the map the next time, insert the overlay info into the javascript output by your page,
I am not going to spend the time making this for you, but this is the approach I would take.
steps:
1) Get the geometry/shape out from google api.
2) Send/post to server using some popular exchange format, GeoJSON or WKT
3) Prepare a server's service/asp/web service to accept the request and translate/validate those geometries into Oracle SDO_Geometry user define type/struct.
4) Use some C# oracle library,
a) create Connection,
b) create command with parameter,
c) Initial an OracleObject, assign all the required properties like SDO_GTYPE, SDO_SRID.
d) Assign the OracleObject to the the named parameter in the command.
e) Execute the command and commit.
Hope this help.

Javascript polygon selector, polygon brush

I need a 'polygon' selector type functionality. Basically, the ability to drag lines to form multiple polygons; pref with the ability to edit the 'points' of the polygon after the shape has been 'closed' (but that's secondary) and/or move the polygons...
I generally dislike 'reinventing the wheel' and I figured I'd find tons of examples to work with, but I was wrong...
The polygon tool in Google Maps is just about perfect, but has anyone utilized it outside of GMaps? (I recall it required a GMap as an attribute from my work with Google Maps). Before I roll up my sleeves, I just want to ensure there isn't something already made (this is a very small part) - so if (a) Google Maps Polygon object is usable without a map, or (b) there's another library/project I'm missing please let me know.
Fabricjs is an option you can check.
Have a look at D3.js which has a great api for visualizing data and geo information. Besides the standard one-/two-dimensional brush there are plugins for more advanced types of brushes:
Polybrush. Providing a polygon brush.
lasso. Lassoing a selection by freely drawing a line path.

How to select a polygon covered by another polygon using Google Maps API V3

I am using Overlay Shapes with Google Maps API V3 using Google’s Drawing Manager. I basically allow the user to draw a polygon and save it to a database. They can then edit these polygons at will or create new ones.
The issue I am having is that often new polygons will completely cover existing polygons. Then the user cannot select the polygon beneath the latest one.
I wondered if anyone had managed to devise a script that enabled a user to cycle through the selection of every polygon in a potential stack under the mouse cursor (or pointer/finger...)
The attached image illustrates the predicament. Ideally I'd like something like CTRL+Click to select the polygon beneath the currently selected polygon.
No idea how to even approach this and I could not fine any examples in existence.
Thanks in advance.
You can try using control click to change the z order.

Javascript Google Earth path editor

What I am trying to do is create a embedded javascript application where the google earth plugin is embedded in a webpage with various paths drawn on. Here is an example of what I am trying to achieve.
The catch is that the lines need to be editable, with each joint having a handle where the user can click and drag. I have looked high and low on Googles api documentation and I cannot find anything even close to this. If anyone can point me in the right direction it would be much appreciated.
You want each 'joint' to be a dragable placemark so that when you drag it the line geometry is updated.
For reference check out the Google Earth API Samples - Draggable Placemark:
http://earth-api-samples.googlecode.com/svn/trunk/examples/placemark-dragdrop.html
And possibly James Stafford's polyplot:
http://www.barnabu.co.uk/geapi/polyplot/
Together they should help you achieve what you want.

touch or click/drag to draw arbitrary area on Google Maps

I am familiar with how to draw circles and polygons on a Google Map using the javascript API. However, I've been looking at some android apps that allow you to "touch and draw" a freehand area on a map, not a collection of polyline/points or geometric shapes.
Is this functionality accessible to the js API? If so, how? I only find documentation on the polygons etc.
Note: this type of functionality is not what I'm looking for! Clicking at multiple points to define an area is fine, but I'm trying to do a real "drawing" style.
Thanks

Categories