How do i attach an onclick event to Placemarks specified in the KML file. Can event listeners be added to both google maps and google earth plugin?
How would I go about this?
In the Google Earth plugin...
google.earth.fetchKml(ge, href, function(kmlObject) {});
google.earth.addEventListener(kmlObject, 'click', function(event) {
event.preventDefault();
var kmlPlacemark = event.getTarget();
alert(kmlPlacemark.getName());
});
In Google Maps API
var ctaLayer = new google.maps.KmlLayer('http://www.****.com/index.kml');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
alert(text);
});
Seemingly the onlick event is wrapped up when the kml loads (GMaps v3, kml with Placemarks) Any Placemark references to "BallonStyle" bundled in the same kml file causes these to replace the default popup - and you can achieve a lot with them.
These are the kml elements supported by Gmaps v3 http://code.google.com/apis/kml/documentation/kmlelementsinmaps.html
If your question is how to intercept that onlick event, then I am sorry I do not know how you can achieve that.
Related
I am new in using ckeditor and its API. I would like to find a way to validate the content of the users through the accessibility checker while they are typing.
The information available in the documentation do not make clear how to do this.
I'm trying to figure out how to do this...
<script>
var instance = CKEDITOR.replace('editorck');
instance.on('focus', function(event) {
var editor = CKEDITOR.instances['editorck'];
if(editor.plugins.a11ychecker){
var a11ycheckerCommand = new CKEDITOR.command(editor, {
exec: function( editor ) {
editor.execCommand("a11ychecker");
}
});
a11ycheckerCommand.setState(CKEDITOR.TRISTATE_ON);
a11ycheckerCommand.exec(editor);
}
});
instance.on('key', function (event) {
var editor = CKEDITOR.instances['editorck'];
editor.execCommand("a11ychecker.listen");
});
</script>
The code above expects two events. The first is the "onfocus" which activate the accessibility checker when the editor area is focused. The second is what I'm looking for, call some command or execute something to validate the content while keyup event is occuring.
The next step is to allow the user to save the content if it is validated. Perhaps a way to get the current accessibility issues list?
CKEDITOR.plugins.a11ychecker.IssueList or editor.plugins.a11ychecker.IssueList ?
I haven't seen much documentation and cant seem to get my code to work. the code snippet is below. I'm trying to remove the on mouse over listener but have had no success. Google charts docs has the method as such - google.visualization.events.remove Listener(listener_handler).
I'm uncertain what the listener_handler actually pertains to. Im trying to remove the on mouse over listener once the chart has been clicked.
google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);
google.visualization.events.addListener(chart, 'select', function () {
google.visualization.events.removeListener(chartMouseOver);
}
You need to store the returned event object in a variable, and pass that to removeListener :
var event = google.visualization.events.addListener(chart, 'onmouseover', function() {
alert('onmouseover');
google.visualization.events.removeListener(event); //the event object as param
});
demo -> http://jsfiddle.net/cmDT2/
In Fabric.js we have Object modified events like object:modified. Do we have similar event for the entire canvas.
Actually I am trying to implement undo and redo features. I am saving the canvas as JSON if something happens on it and loading it again for undo feature.
Do we have any better solution for this features in Fabric.js?
Don't forget to check for added/removed objects too. You could implement it like this:
var canvasModifiedCallback = function() {
console.log('canvas modified!');
};
canvas.on('object:added', canvasModifiedCallback);
canvas.on('object:removed', canvasModifiedCallback);
canvas.on('object:modified', canvasModifiedCallback);
This is better explained in this link. Use it this way:
canvas.on('object:moving', function(e) { // or 'object:added'
var activeObject = e.target;
console.log(activeObject.get('left'), activeObject.get('top'));
});
I have a dynamic google map on my site with some custom markers. What I need to do is, when I click a specific marker I want a div to load underneath the map with the information about that marker (a shop) using Ajax.
Thanks a mil for your help,
Joanne
You can bind event handler to your marker and execute ajax request to get marker information from server side script e.g. using jquery post.
Then on server side you can get necesswary info on the basis of some marker data like its position.
google.maps.event.addListener (marker, 'click', function(event) {
var position = marker.getPosition();
$.post("getmarkerdata.php",{
latitute: position.lat(),
longitude: position.lng()
}),
function(data){
$(yourdiv).html(data);
}
});
I'm trying to figure out how to manually trigger events for Leaflet polygons (loaded via GeoJSON).
In a nutshell, I have a Leaflet map with numerous polygons. I also have a regular hyperlink outside of the map that when clicked, should trigger a mouseover event (or any event really) on a particular polygon.
How do I assign ID's to all of my polygons so that I can bind hyperlink(s) to a specific polygon's event? Or is that even the most logical way of doing this?
Ultimately, I'm trying to create a map with numerous polygons along with an HTML table of text labels that are associated to each polygon. When clicking on the HTML table text, I'd like to trigger events on the map polygons (and vice versa). I just don't know how to reference each polygon.
Here is my very simplified HTML:
<body>
<div id="map" style="height: 550px; width:940px"></div>
Click to trigger a specific polygon mouseover event
</body>
Here is my very simplified JS:
$(document).ready(function () {
// build the map and polygon layer
function buildMap(data) {
var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/***yourkeyhere***/66267/256/{z}/{x}/{y}.png',
cloudmadeAttribution = '',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var mapLoc = new L.LatLng(43.675198,-79.383287);
map.setView(mapLoc, 12).addLayer(cloudmade);
var geojsonLayer = new L.GeoJSON(null, {});
geojsonLayer.on("featureparse", function (e){
// apply the polygon style
e.layer.setStyle(polyStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
// change the style to the hover version
layer.setStyle(polyHover);
});
});
layer.on("mouseout", function (e) {
// reverting the style back
layer.setStyle(polyStyle);
});
layer.on("click", function (e) {
// do something here like display a popup
console.log(e);
});
})(e.layer, e.properties);
});
map.addLayer(geojsonLayer);
geojsonLayer.addGeoJSON(myPolygons);
}
// bind the hyperlink to trigger event on specific polygon (by polygon ID?)
$('#testlink').click(function(){
// trigger a specific polygon mouseover event here
});
});
OK, I've figured it out.
You need to create a click event for each polygon that opens the popup, and assign a unique ID to each polygon so you can reference it later and manually trigger its popup.
The following accomplishes this:
var polyindex = 0;
popup = new L.Popup();
geojsonLayer = new L.GeoJSON(null, {});
geojsonLayer.on("featureparse", function (e){
(function(layer, properties) {
//click event that triggers the popup and centres it on the polygon
layer.on("click", function (e) {
var bounds = layer.getBounds();
var popupContent = "popup content here";
popup.setLatLng(bounds.getCenter());
popup.setContent(popupContent);
map.openPopup(popup);
});
})(e.layer, e.properties);
//assign polygon id so we can reference it later
e.layer._leaflet_id = 'polyindex'+polyindex+'';
//increment polyindex used for unique polygon id's
polyindex++;
});
//add the polygon layer
map.addLayer(geojsonLayer);
geojsonLayer.addGeoJSON(neighbourhood_polygons);
Then to manually trigger a specific layers click event, simply call it like this:
map._layers['polyindex0'].fire('click');
Everything between the square brackets is the unique ID of the layer you want to trigger. In this case, I'm firing the click event of layer ID polyindex0.
Hope this info helps somebody else out!
So, quick update.
Just call fireEvent (or its alias fire) on whatever layer you need.
You don't need to risk ._private[Vars], just get a reference to the target layer and fire away, e.g.
var vectorLayer = map.getLayer('myVectorLayer');
vectorLayer.fire('click');
function clickMarker(i){
var popupContent = "content here or html format",
popup = new L.Popup({offset:new L.Point(0,-28)});
popup.setLatLng(LatLng);
popup.setContent(popupContent);
map.panTo(LatLng);
map.openPopup(popup); }
i = got a corresponding coordinate which is LatLng