How can I add a close event to MooDialog.Request?
Update:
There is my code:
window.addEvent('domready', function(){
$('xyz').addEvent('click', function(e) {
e.stop();
var reqDialog = new MooDialog.Request(url,
{view:'show'},
{
size: {
width: 460,
height: 375,
'zIndex':20
}
}
);
reqDialog.setRequestOptions({
onClose: function(){
alert('closed');
}
});
});
});
It's pretty simple:
//Request => new MooDialog.Request(url[, RequestOptions, options]);
var reqD = new MooDialog.Request('URL',null,{
onClose: function(){
alert('closed');
}
});
doc
Edit your code need to be updated this way:
window.addEvent('domready', function(){
$('xyz').addEvent('click', function(e) {
e.stop();
var reqDialog = new MooDialog.Request(url, null, {
class:'dialogClass',
autoOpen: false,
onClose: function(){
alert('closed');
}
});
reqDialog.open();
/*
if you want to add some custom requestOptions, you need to do i.e.:
reqDialog.setRequestOptions({
onRequest: function(){
reqDialog.setContent('loading...');
}
}).open();
*/
});
and you need some css to define the style of the dialog by dialogClass:
.dialogClass{
width:460;
height:375;
z-index:20;
}
Related
I've figured out how to grab the coords when a polyline or polygon is added or a vertex is deleted, but I can't seem to apply how to catch when a polyline or polygon vertex is moved (vertex only, I have dragging entire poly's disabled intentionally). I'm using this link as a reference: event after modifying polygon in google maps api v3
Here is my complete HTML code (posted at pastebin for the sake of the reader):
http://pastebin.com/95HcHqQR
Here is the section I'm trying to make catch moves:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
newShape.type = e.type;
if (e.type !== google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
///////////////////////////////////////////////////////////
//This section is intended to catch vertex moves...currently not
google.maps.event.addListener(newShape, 'polygoncomplete', function(e) {
google.maps.event.addListener(newShape.getPath(), 'set_at', function(e) {
google.maps.event.addListener(newShape.getPath(), 'insert_at', function(e) {
var path = newShape.getPaths().getAt(e.path);
document.getElementById("polygonEditTest").value += path.getAt(e.vertex) + '\n';
})
});
});
google.maps.event.addListener(newShape, 'polylinecomplete', function(e) {
google.maps.event.addListener(newShape.getPath(), 'set_at', function(e) {
google.maps.event.addListener(newShape.getPath(), 'insert_at', function(e) {
var path = newShape.getPaths().getAt(e.path);
document.getElementById("polylineEditTest").value += path.getAt(e.vertex) + '\n';
})
});
});
///////////////////////////////////////////////////////////
// Add an event listener that selects the newly-drawn shape when the user
// clicks it.
google.maps.event.addListener(newShape, 'click', function(e) {
if (e.vertex !== undefined) {
if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
var path = newShape.getPaths().getAt(e.path);
path.removeAt(e.vertex);
/////////////////////////////////////////////////////////////
//Update textboxes with geo data when polygon vertex deleted
document.getElementById("action_gon").value = ''
document.getElementById("action_gon").value += "#polygon vertex deleted\n";
for (var i = 0; i < path.length; i++) {
document.getElementById("action_gon").value += path.getAt(i) + '\n';
}
//
if (path.length < 3) {
newShape.setMap(null);
document.getElementById("action_gon").value = 'This box shows coords when a new POLYGON shape is added and/or vertex deleted'
}
}
if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
var path = newShape.getPath();
path.removeAt(e.vertex);
/////////////////////////////////////////////////////////////
//Update textboxes with geo data when polyline vertex deleted
document.getElementById("action_line").value = ''
document.getElementById("action_line").value += "#polyline vertex deleted\n";
for (var i = 0; i < path.length; i++) {
document.getElementById("action_line").value += path.getAt(i) + '\n';
}
//
if (path.length < 2) {
newShape.setMap(null);
document.getElementById("action_line").value = 'This box shows coords when a new POLYLINE shape is added and/or vertex deleted'
}
}
}
setSelection(newShape);
});
setSelection(newShape);
} else {
google.maps.event.addListener(newShape, 'click', function(e) {
setSelection(newShape);
});
setSelection(newShape);
}
});
EDIT: Here is what I believe to be the minimal code needed to demonstrate the problem (inability to capture vertex moves).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing,places"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
//Map Specifications
function initialize () {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: new google.maps.LatLng(33.27144940863937, -117.2983479390361),
mapTypeId: google.maps.MapTypeId.HYBRID,
disableDefaultUI: true,
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: false
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true,
draggable: false
};
// Creates a drawing manager attached to the map that allows the user to draw
// markers and lines
drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.POLYGON
]
},
markerOptions: {
draggable: false
},
polylineOptions: {
editable: true,
draggable: false
},
//rectangleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
//////////////////////////////////////////
var drawingManager;
var selectedShape;
function clearSelection () {
if (selectedShape) {
if (selectedShape.type !== 'marker') {
selectedShape.setEditable(false);
}
selectedShape = null;
}
}
function setSelection (shape) {
if (shape.type !== 'marker') {
clearSelection();
shape.setEditable(true);
}
selectedShape = shape;
}
//////////////////////////////////////////
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
var newShape = e.overlay;
newShape.type = e.type;
if (e.type !== google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
google.maps.event.addListener(newShape, 'polygoncomplete', function (e) {
google.maps.event.addListener(newShape.getPath(), 'set_at', function() {
google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {
var path = newShape.getPaths().getAt(e.path);
document.getElementById("polygonEditTest").value += path.getAt(e.vertex) + '\n';
})
});
});
google.maps.event.addListener(newShape, 'polylinecomplete', function (e) {
google.maps.event.addListener(newShape.getPath(), 'set_at', function(e) {
google.maps.event.addListener(newShape.getPath(), 'insert_at', function(e) {
var path = newShape.getPaths().getAt(e.path);
document.getElementById("polylineEditTest").value += path.getAt(e.vertex) + '\n';
})
});
});
// Add an event listener that selects the newly-drawn shape when the user
// clicks it.
setSelection(newShape);}
else {
google.maps.event.addListener(newShape, 'click', function (e) {
setSelection(newShape);
});
setSelection(newShape);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="geoinfoboxes">
<textarea id="polylineEditTest" rows="8" cols="46">This box shows coords for edited POLYLINES (ie. moving a vertex)</textarea>
<textarea id="polygonEditTest" rows="8" cols="46">This box shows coords for edited POLYGONS (ie. moving a vertex)</textarea>
</div>
<div id="map"></div>
</body>
</html>
To listen for the drag of an editable polygon's vertex drag, use an MCVArray set_at event listener:
google.maps.event.addListener(polygon.getPath(), 'set_at', processVertex);
google.maps.event.addListener(polygon.getPath(), 'insert_at', processVertex);
function processVertex(e) {
var logStr = ""
for (var i = 0; i < this.getLength(); i++) {
logStr += this.getAt(i).toUrlValue(6) + " ";
}
console.log(logStr);
}
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var polygon = new google.maps.Polygon({
path: [new google.maps.LatLng(37.4544762, -122.1161696),
new google.maps.LatLng(37.3751, -122.1731859),
new google.maps.LatLng(37.4274745, -122.169719)
],
map: map,
editable: true
});
google.maps.event.addListener(polygon.getPath(), 'set_at', processVertex);
google.maps.event.addListener(polygon.getPath(), 'insert_at', processVertex);
function processVertex(e) {
var logStr = ""
for (var i = 0; i < this.getLength(); i++) {
logStr += this.getAt(i).toUrlValue(6) + " ";
}
console.log(logStr);
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
I am trying to get multiple JSON data with deferred object. I have JSON files for individual days. In each individual day, I have data for points, lines and polygons. I have jQueryUI Sliders to visualise for individual days. For example, if the slider has value of 1, only the day1 data (points, lines and polygons) need to be visualised, and for day2, all points, lines and polygons relating to day2 only should be visualised and so on.
I don't know what is problem with my code but it is not serving the required data. Latest data/merged data is shown.
Help me out here.
$(document).ready(function () {
var map = L.map("map", {
center: [27.6419412, 85.1224152],
zoom: 13,
doubleClickZoom: true
});
L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
L.control.scale().addTo(map);
var markerCluster = L.markerClusterGroup({
showCoverageOnHover: false
});
function TableContent(jsonData) {
var content = $('<div></div>').addClass('table-content');
for (row in jsonData) {
var tableRow = $('<div></div>').addClass('table-row').append(function () {
var key = row;
if (!(key === "#uid" || key === "#changeset" || key === "#version" || key === "#timestamp" || key === "#id")) {
return jsonData[row] ? $("<div></div>").text(key).append($("<div></div>").text(jsonData[row])) : "";
}
});
tableRow.prependTo(content).addClass(row);
}
return $(content)[0];
}
function Table(json) {
return $('<div></div>').append($('<div class="title"></div>').text(json.type)).addClass('table-container').append(new TableContent(json.data));
}
var pointBuild = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
var deferred = $.Deferred();
marker = L.marker(latlng, {
icon: L.icon({
iconUrl: 'img/marker.png',
iconSize: [30, 30],
iconAnchor: [15, 15]
}),
riseOnHover: true,
title: "This is a Point feature. Click to have a look at some of its attributes"
});
markerCluster.addLayer(marker);
deferred.resolve();
map.fire('cluster-hover');
return marker;
},
onEachFeature: function (feature, layer) {
var popup = L.popup();
layer.on('click', function (e) {
var deferred = $.Deferred();
popup.setLatLng(e.latlng);
popup.setContent(new TableContent(feature.properties));
popup.openOn(map);
deferred.resolve();
});
}
});
var myStyle = {
weight: 2,
opacity: 1,
color: '#FF0000',
dashArray: '3',
fillOpacity: 0.3,
fillColor: '#FA8072'
};
var wayBuild = L.geoJson(null, {
style: myStyle,
onEachFeature: function (feature, layer) {
var popup = L.popup();
layer.on('click', function (e) {
var deferred = $.Deferred();
popup.setLatLng(e.latlng);
popup.setContent(new TableContent(feature.properties));
popup.openOn(map);
deferred.resolve();
});
}
});
function pointLinePolygon(receivedPoints, receivedLines, receivedPolygon, day) {
var points_, lines_, polygon_;
var deferredPoint = $.Deferred();
var deferredLine = $.Deferred();
var deferredPolygon = $.Deferred();
$.getJSON(receivedPoints, function (data) {
setTimeout(function () {
pointBuild.addData(data);
points_ = markerCluster;
deferredPoint.resolve();
}, 0);
});
$.getJSON(receivedLines, function (data) {
setTimeout(function () {
lines_ = wayBuild.addData(data);
deferredLine.resolve();
}, 0);
});
$.getJSON(receivedPolygon, function (data) {
setTimeout(function () {
polygon_ = wayBuild.addData(data);
deferredPolygon.resolve();
}, 0);
});
$.when(deferredPoint, deferredLine, deferredPolygon).done(function () {
var featureGroup = L.layerGroup([points_, lines_, polygon_]);
featureGroup.addTo(map);
$.map(wayBuild._layers, function (layer, index) {
$(layer._container).find("path").attr("title", "This is a way feature. Click to have a look at some of its attributes.");
});
});
}
map.on('cluster-hover', function () {
setTimeout(function () {
$("#map").find("div.marker-cluster").attrByFunction(function () {
return {
title: "This is a Cluster of " + $(this).find("span").text() + " Point features. Click to zoom in and see the Point features and sub-clusters it contains."
}
});
}, 0);
});
var tooltip = $('<div id="toolTipSlider" />').hide();
$('#slider').slider({
min: 1,
max: 4,
slide: function (event, ui) {
if (ui.value === 1) {
tooltip.text("Day " + ui.value);
$.ajax({
type: 'post',
success: function () {
pointLinePolygon("data/day1/points.geojson", "data/day1/lines.geojson", "data/day1/polygon.geojson", "Day 1");
}
});
}
else if (ui.value === 2) {
tooltip.text("Day " + ui.value);
$.ajax({
type: 'post',
success: function () {
pointLinePolygon("data/day2/points.geojson", "data/day2/lines.geojson", "data/day2/polygon.geojson", "Day 2");
}
});
}
else if (ui.value === 3) {
tooltip.text("Day " + ui.value);
$.ajax({
type: 'post',
success: function () {
pointLinePolygon("data/day3/points.geojson", "data/day3/lines.geojson", "data/day3/polygon.geojson", "Day 3");
}
});
}
else if (ui.value === 4) {
tooltip.text("Day " + ui.value);
$.ajax({
type: 'post',
success: function () {
pointLinePolygon("data/day4/points.geojson", "data/day4/lines.geojson", "data/day4/polygon.geojson", "Day 4");
}
});
}
}
}).find(".ui-slider-handle").append(tooltip).hover(function () {
tooltip.show();
});
});
$.fn.attrByFunction = function (a) {
return $(this).each(function () {
$(this).attr(a.call(this));
});
};
I solved the problem by clearing the map layer every time I am to add new one.
map.eachLayer(function (layer) {
if (layer.feature) {
map.removeLayer(layer);
}
});
How can I filtering gmap markers from Json file?
$(function() {
demo.add(function() {
$('#map_canvas').gmap({'disableDefaultUI':false, 'callback': function() {
var self = this;
$.getJSON('demo.asp', function (data) {
$.each( data.markers, function(i, marker) {
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
self.openInfoWindow({ 'content': marker.content }, this);
});
});
});
}});
}).load();
});
$(function() {
demo.add(function() {
$('#map_canvas').gmap({'disableDefaultUI':false, 'callback': function() {
var self = this;
$.getJSON('demo.asp', function (data) {
$.each( data.markers, function(i, marker) {
if(marker!="filtered data"){
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
self.openInfoWindow({ 'content': marker.content }, this);
}
});
});
});
}});
}).load();
});
You can filter it there, or filter it on the logic that gets the json data.
I am using FloatingTip tool tip for my project and i am struggling for how to stay active and not to be closed when cursor is on tooltip.
Hear is jsFiddle [http://jsfiddle.net/SLvUz/3/][1]
For example: When mouse hover to tooltip and anchor Let me see! tooltip stay open.
Detail link: https://github.com/lorenzos/FloatingTips
Any ideas or suggestions? Thanks.
Unfortunately this plugin doesn't have such option at the moment, but it has methods and events, so you can implement this behavior using them. The code may look like following:
$$('#advanced a').each(function(elem){
var instance = new FloatingTips(elem, {
// example options
content: function() { return $('htmlcontent'); },
html: true, // I want that content is interpreted as HTML
center: false, // I do not want to center the tooltip
arrowOffset: 16, // Arrow is a little more the the right
offset: { x: -10 }, // Position offset {x, y}
// override show/hide events
showOn: null,
hideOn: null
});
// customize tooltip behavior
var delay = 100, timer;
var tipHover = function() {
clearTimeout(timer);
}
var tipLeave = function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.hide(elem);
}, delay);
}
instance.addEvents({
show: function(tip, elem){
tip.addEvents({
mouseover: tipHover,
mouseout: tipLeave
});
},
hide: function(tip, elem){
tip.removeEvents({
mouseover: tipHover,
mouseout: tipLeave
});
}
});
elem.addEvents({
mouseover: function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.show(elem);
}, delay);
},
mouseout: function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.hide(elem);
}, delay);
}
});
});
Check updated fiddle here: http://jsfiddle.net/SLvUz/455/
I've searched all over the web and SO, but I couldn't figure this out.
Here's the problem:
I'm using the below demo from jquery-ui-map site to load a JSON file:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-json.html
It works fine to load my markers, but I need to refresh its content every 30 seconds and grab new markers.
At first I thought I would just call the function again, but that left the markers there. After some research I found out I needed to clear the markers (not so easy on V3, but I was able to to do) but the issue is that I can't get the markers to show again.
If I use the destroy function, then I'm able to reload new markers and remove the old ones, but that causes the map to blink. When I try to clear markers then no new markers are shown.
Any help is greatly appreciated.
Below is my code:
<script type="text/javascript">
function mapTest() {
$('#map_canvas').gmap('destroy');
//clearMap();
demo.add(function() {
$('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
var self = this;
$.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) {
$.each( data.markers, function(i, marker) {
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
self.openInfoWindow({ 'content': marker.content }, this);
});
});
});
}});
}).load();
}
function clearMap(){
$('#map_canvas').gmap('clear', 'markers');
}
mapTest();
setInterval(mapTest, 30000 );
</script>
Cheers.
Your map initialization function is inside the mapTest() function - which you call over an over again every 30 seconds with setInterval.
That is wrong, because you are essentially reloading the map( you destroy it and then recreate it again every 30 seconds ), and that is why it blinks.
Place the map initialization outside the mapTest(), but clear and retrieve new markers from within the mapTest()
Update:
var mapOptions = {
disableDefaultUI: true
// add more options if you wish.
};
function mapTest() {
$('#map_canvas').gmap('clear', 'markers'); // clear old markers
$.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) {
$.each( data.markers, function(i, marker) {
var self = this;
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
self.openInfoWindow({ 'content': marker.content }, this);
});
});
});
}
$(function(){
$('#map_canvas').gmap(mapOptions, function(){
$.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) {
$.each( data.markers, function(i, marker) {
var self = this;
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
self.openInfoWindow({ 'content': marker.content }, this);
});
});
});
});
setInterval(mapTest, 30000 );
});
I found a Solution to update markers without reloading the map. Try this code...
$(document).ready(function() {
var $map = $('#map_canvas');
App.drawMap($map);
setInterval(function() {
$('#map_canvas').gmap('clear', 'markers');
App.drawMap($map);
},10000);
});
var App = {
drawMap: function($divMap) {
Http.doAjaxGetJson('../../js/testjson.json', function(data) {
for (var k in data.gpsData) {
$divMap.gmap({ 'center': new google.maps.LatLng(data.gpsData[k].latitude,data.gpsData[k].longitude),'zoom':15, 'callback': function() {}});
$divMap.gmap('addMarker', {
'title':data.obj.name,
'position': new google.maps.LatLng(data.gpsData[k].latitude, data.gpsData[k].longitude),
'bounds': false,
}).click(function() {
var $_obj = $(this);
});
}
});
}
};
By this code markers will update in every 10 seconds..