Is there a way to associate a GeoJson with a click event?
const features = map.data.addGeoJson(json);
for (const feature of features) {
// Add styling
map.data.overrideStyle(
feature,{
fillColor: 'red',
});
// TODO: Add a click handler for "feature"
}
For normal entities, such as LatLngBounds, there seems to be addListener(instance, eventName, handler). This does however not exist for the feature from the snippet above.
Is there an equivalent alternative for geojson features?
Nevermind, I just found this help page, which gives a snippet on how to do this:
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
// "event" has the feature as a property.
document.getElementById('info-box').textContent =
event.feature.getProperty('letter');
});
Related
There has been a change in the click behavior in the model browser from version 2 to version 3 of the Forge Viewer. In v2, a single click would select the elements and a double click would zoom to the selected elements. In v3, a single click will zoom to the elements. Sometimes this is great, but often it would be nice to disable this behavior. Is there an easy way to do this today? And if not, could it be possible to add a disableZoomOnSelection function to the viewer API?
I know that the eyes in the browser will take care of the show and hide elements, but it’s very easy to klick in the three by accident and suddenly the viewer zoom without the user intention.
Regards
Frode
I dig that code for you looking at the implementation of the ViewerModelStructurePanel that I was exposing in that article: Supporting multiple models in the new ModelStructurePanel
Events that occur in the tree are mapped to predefined actions through the options.docStructureConfig object, so the workaround is to instantiate a new ViewerModelStructurePanel with the desired options:
viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, () => {
var options = {
docStructureConfig: {
// go with default, which is viewer.select(node)
// click: {
// onObject: ["toggleOverlayedSelection"]
//},
clickShift: {
onObject: ["toggleMultipleOverlayedSelection"]
},
clickCtrl: {
onObject: ["toggleMultipleOverlayedSelection"]
}
}
}
var customModelStructurePanel =
new Autodesk.Viewing.Extensions.ViewerModelStructurePanel(
viewer, 'Browser', options)
viewer.setModelStructurePanel(customModelStructurePanel)
})
The double-click however is not linked to an event in the current implementation, so for a more powerful customization I would recommend you replace the whole implementation by a custom one as exposed in the article and implement desired action handlers. I implemented it as drop-in replacement, so in that case you just need to include it to your html after the viewer script and don't have to replace the model browser in OBJECT_TREE_CREATED_EVENT
The model browser receives an options object in its constructor. There, you can specify the actions for different events (click, clickCtrl, clickShift, etc).
To set the old behavior you can try the following:
var options = {};
options.docStructureConfig = {
"click": {
"onObject": ["isolate"]
},
"clickCtrl": {
"onObject": ["toggleVisibility"]
}
};
NOP_VIEWER.setModelStructurePanel(new ave.ViewerModelStructurePanel(NOP_VIEWER, "", options));
NOP_VIEWER can be replaced with your own viewer variable.
I have a spoke in my wheels and I am not sure how to sort this out. I have been struggling with it for a couple days and it isn't like a normal infobox as it is not set to a marker rather a polygon which is something new for me. I have polygons that display with data from an XML file and they show up fine. I have searched the web and got it to have the mouseover set up to where you mouseover a polygon the opacity changes and an infobox pops up. Problem is the infobox when it pop up shows "undefined" instead of the html I have set in it to display with data from the XML file.
Here is a link to the test map for example.
http://www.mesquiteweather.net/googlemap_poly.html
Here is a link to the XML file where I am just trying to show the elements events and expires in the info box.
http://www.mesquiteweather.net/xml/warnings_test.xml
This is the code I am working with to create the infoboxes and mouseover events
function attachPolygonInfoWindow(polygon, html, event, expires)
{
var html = "<strong>" + event + "</strong>";
eventWarnings.infoWindow = new google.maps.InfoWindow({content: html});
google.maps.event.addListener(eventWarnings, 'mouseover', function(e) {
var latLng = e.latLng;
this.setOptions({fillOpacity:80});
polygon.infoWindow.setPosition(latLng);
polygon.infoWindow.open(map);
});
google.maps.event.addListener(eventWarnings, 'mouseout', function() {
this.setOptions({fillOpacity:0.35});
polygon.infoWindow.close();
});
}
var polygon = new google.maps.Polygon(/* omitted for brevity */);
attachPolygonInfoWindow(eventWarnings);
eventWarnings.setMap(map);
}
});
I am pretty sure it is something easy I am overlooking but I haven't been able to find anything that pertains to my issue. I am just lucky I got the infobox to show at all as I have learned it's tricky since polygons don't have a true center and they are not set up like you would with a marker which I can handle.
If anyone has any suggestions please let me know.
-Thanks
You defined your attachPolygonInfoWindow function with 4 argument, but only provide one when you call it:
// definition
function attachPolygonInfoWindow(polygon, html, event, expires)
...
// call
attachPolygonInfoWindow(eventWarnings);
Probably you want (I don't see the html or expires parameters being used):
attachPolygonInfoWindow(eventWarnings, "", event, null);
The other option would be to change the definition to:
// definition
function attachPolygonInfoWindow(polygon, event, expires)
and the call to (assuming you are going to use "expires" for something):
attachPolygonInfoWindow(eventWarnings, event, expires);
As it doesn't look like you need to pass in that parameter (event is serving the function that I would expect it to serve).
Also, FYI, you have a "hanging comma" in your alertColors.js which make IE unhappy...
example
I'm creating a Google Map from the developer API v3. It's populated with markers created dynamically from ColdFusion querying an MsSQL database.
<cfloop query="One">
<script>locations[<cfoutput>#One.userID#</cfoutput>
] = new google.maps.LatLng(<cfoutput>#One.latLng#</cfoutput>);
</script>
</cfloop>
I need a way to recognise the marker when its clicked so I can display address details in a box below the map and also higlight markers when a button is clicked lower on the page.
In general, you would typically assign your own custom properties to the Marker. Something like:
function markerClicked(e) {
console.log('Marker ' + marker.myData + ' has been clicked');
}
var marker = new google.maps.Marker(...);
marker.myData = 1; //this could be arbitrary data or even another object
google.maps.event.addListener(marker, 'click', markerClicked);
Adding custom data to any Google Maps API object has risks though. Google's code is obfuscated and the internal (non-documented) properties can and do change. Make sure your property is named in such a way that it won't conflict with any existing property or future property. Tip: Choose a property name longer than 3 letters.
If you are going to minify/compile/compress your maps code, then there are additional considerations.
What about :
google.maps.event.addListener(marker, "click", function (e) {
var clicked = this;
//...
});
This is pretty thoroughly documented/explained in the documentation.
https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
When you create markers, add dom listeners to the markers like this
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I've already subclass my overlay object under the instruction of google document, and my onAdd() function is listed below:
MyOverlay.onAdd() {
var div_parent = document.createElement("DIV");
var div_child = document.createElement("DIV");
div_child.innerHTML = "Click Me";
div_parent.appendChild( div_child );
this.getPanes().overlayLayer.appendChild(div_parent);
var this = that;
google.maps.event.addDomListener( div_parent, 'click', function(){
google.maps.event.trigger(that, 'click'); // from [http://stackoverflow.com/questions/3361823/make-custom-overlay-clickable-google-maps-api-v3]
alert("Clicked");
} );
}
My code can work well ONLY in IE, but in Firefox and Chrome, the click event will not be triggered anymore.
So how to solve the problem?
Instead of using overlayLayer mapPanes, you should use overlayMouseTarget.
Reference: http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
I know this is an old post, but if you were wondering, here is the solution:
In your code above, you need to change the overlay function from:
this.getPanes().overlayLayer.appendChild(div_parent);
to:
this.getPanes().overlayMouseTarget.appendChild(div_parent);
Also note although your click events will be captured on desktop even if you use overlay pane, for touch events to work, mouse target pane is necessary.
Are there any contextual menus available for Google Maps v3?
You can add context menu as it is decribed here How to add context menu to google maps, using api V3:
Here is a full JQuery solution : http://gmap3.net/examples/context-menu.html
Old question but it came up in my googling so I thought I would post the simplest answer. It's a context menu without the use of more 3rd party js libraries. There's also a latlon object in the event that you can get the lat/lon for where the person clicked, to add a maker or whatever.
var contextMenu = google.maps.event.addListener(
map,
"rightclick",
function (event) {
// use JS Dom methods to create the menu
// use event.pixel.x and event.pixel.y
// to position menu at mouse position
$('.contextmenu').remove(); //remove previous context menus
contextmenuDir = document.createElement("div");
contextmenuDir.className = 'contextmenu';
//now add our options.
contextmenuDir.innerHTML = '<a id="menu1"><div class="context">menu item 1<\/div><\/a>'
+ '<a id="menu2"><div class="context">menu item 2<\/div><\/a>';
$(map.getDiv()).append(contextmenuDir);
contextmenuDir.style.visibility = "visible";
// might need to offset if you have moved the map div like i did (then - the pixel size off)
$('.contextmenu').css('left', event.pixel.x );
$('.contextmenu').css('top', event.pixel.y);
console.log(event); //log some details about the object we get
});
None yet. Google working on one now.