How can I force google to redraw its infoWindow or atleast refresh its contents?
I noticed that I must click twice on a marker before the correct data appears inside the infoWindow -maybe my closure here is the culprit.
var markers = new Array();
var allMarkers = new Array();
var infoWindow = new google.maps.InfoWindow();
var infoWindows = new Array();
// IE caches ajax request - need a way to clear cache with each fetch of data
randomize = function () {
var randomnumber = Math.floor(Math.random() * 100000);
return randomnumber;
}
function getBeachLocations() {
// construct query
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = "&key=apiKey&callback=?";
var query = "SELECT * FROM BeachTable"; // beach locations tbl
var queryText = encodeURI(query);
$.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp',
success: createMarkers,
error: function () {
alert("Sorry, no spatial data is available at this time, please check back on a later date.");
}
});
} //end getBeachLocations
function createMarkers(data) { // =====================create markers
url = "http://swim.jpg";
var rows = data['rows'];
var ecoli_rows;
var algae_rows;
for (var m in rows) {
var ecoli_array = new Array();
var marker = new google.maps.Marker({
map: map,
icon: new google.maps.MarkerImage(url),
beach_id: rows[m][0],
beach_name: rows[m][1],
beach_region: rows[m][2],
position: new google.maps.LatLng(rows[m][4], rows[m][5]),
idx: m,
getHeader: function () {
var str = [
'<div style="width:650px;">',
'<div class="tabs">',
'<ul>',
'<li><span>E. Coli Data</span></li>',
'<li><span>Algae Data</span></li>',
'</ul>',
'<div id="tab-1">',
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>'
].join('');
return str;
}, // end getHeader method
getEcoliData: function () { // begin getEcoliData
var obj;
obj = getEcoliData(this.beach_id);
return obj;
}, // end getEcoliData method
afterGetEcoliData: function (data) {
var ecoli_rows;
var ecoli_rows_str;
ecoli_rows = data['rows'];
var ecoli_rows_str = [
'<table id="ecoli_table " class="data" style="width:500px;">',
'<tr>',
'<th>Sample Date</th>',
'<th>Average E. coli Density <br/> (200 cfu/100 ml)</th>',
'<th>Recreational Water Quality Guideline</th>',
'</tr>'
].join('');
if (typeof ecoli_rows == 'undefined') {
ecoli_rows_str = '<p>Sorry no ecoli data currently exists for this beach.</p></div>'
} else {
for (var i = 0; i < ecoli_rows.length; i++) {
//console.log(rows[i]);
ecoli_rows_str += '<tr><td>' + formatDate(ecoli_rows[i][2]) + '</td><td>' + checkEcoliCount(ecoli_rows[i][3]) + '</td><td>' + ecoli_rows[i][4] + '</td></tr>';
}
ecoli_rows_str += '</table>'
ecoli_rows_str += '</div>';
// remove after test
ecoli_rows_str += '<div id="tab-2"><h1>nothing loaded</h1></div></div></div>';
} //end if
return ecoli_rows_str;
}, // end outPutEcoliData method
getAlgaeData: function () { // begin getAlgaeData
var obj;
var algae_rows_str = [
'<div id="tab-2">',
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>',
'<table id="algae_table " class="data" style="width:500px;">',
'<tr>',
'<th>Sample Date</th>',
'<th>Algal Toxin Microcystin <br/> (20 ug/L)</th>',
'<th>Recreational Water Quality Guideline</th>',
'<th>Blue Green Algae Cells <br/>(100,000 cells/ml)</th>',
'<th>Recreational Water Quality Guideline</th>',
'</tr>'
].join('');
obj = getAlgaeData(this.beach_id);
return obj;
}, // end getAlgaeData method
outPutAlgaeData: function (data) {
obj.done(function (data) {
algae_rows = data['rows'];
}); // end success
//console.log(algae_rows);
if (typeof algae_rows === 'undefined') {
algae_rows_str = [
'<div id="tab-2">',
'<h1>' + this.beach_name + '</h1>',
'<h3>' + this.beach_region + '</h3>',
'<p>Sorry no algae data exists for this beach.</p>',
'</div>',
'</div>',
'</div>',
'</div>'
].join('');
} else {
for (var i = 0; i < algae_rows.length; i++) {
//console.log(rows[i]);
algae_rows_str += '<tr><td>' + formatDate(algae_rows[i][2]) + '</td><td>' + checkAlgaeToxinCount(algae_rows[i][3]) + '</td><td>' + algae_rows[i][4] + '</td><td>' + checkAlgaeCount(algae_rows[i][5]) + '</td><td>' + algae_rows[i][6] + '</td></tr>';
}
algae_rows_str += '</table>'
algae_rows_str += '</div></div></div>';
//return algae_rows_str;
} //end if
return algae_rows_str;
} // end outPutAlgaeData
}); // ====================end marker
allMarkers.push(marker); //required for drop down menu
console.log(marker.beach_id + " " + marker.beach_name);
// click event handler
google.maps.event.addListener(marker, 'click', function () {
var ajaxObj = this.getEcoliData();
var marker = this;
var str;
// add loading gif
//infoWindow.setContent('<img src="../img/loading.gif" alt="loading data"/>');
ajaxObj.done(function (data) {
/*
str = marker.getHeader() + marker.afterGetEcoliData(data);
console.log(str);
*/
infoWindow.setContent(marker.getHeader() + '' + marker.afterGetEcoliData(data));
infoWindow.open(map, this);
$(".tabs").tabs({ selected: 0 });
}); // End done
}); // End click event handler
} // end for loop foreach marker
checkAdvisory(); // determine where this needs to be called from.
} //end function createMarkers
// format date as January 1, 2013
function formatDate(num) {
var d = Date.parse(num).toString('MMMM d, yyyy');
return d;
}
// check ecoli count - anything greater than or equal to 200 cfu/100ml is flagged
function checkEcoliCount(num) {
var str;
num = parseFloat(num);
if (num >= 200) {
str = '<span class="ecoliCount_on" style="color:orange"><b>' + num + '</b></span>';
} else {
return num;
}
return str;
}
// check blue green algae count - anything greater than or equal to 100,000 cells/ml is flagged
function checkAlgaeCount(num) {
var str;
num = parseFloat(num);
if (num >= 100000) {
str = '<span class="algaeCount_on" style="color:orange"><b>' + num + '</b></span>';
} else {
return num;
}
return str;
}
// check algae toxin microcystin - anything greater than or equal to 20 ug/L is flagged
function checkAlgaeToxinCount(num) {
// why include < ? - ask Cassie
var str;
var idx;
idx = num.indexOf("<");
num = num.substring(idx + 1);
num = parseFloat(num);
if (num >= 20) {
str = '<span class="algaeToxinCountOn" style="color:orange"><br>' + num + '</b></span>';
} else {
return num;
}
return str;
}
function checkAdvisory() {
/* add advisory images
ecoliCount_on
algaeCount_on
algaeToxinCountOn
*/
$(".ecoliCount_on").each(function (i, v) {
console.log(i, v);
$(this).css("color", "green");
});
$(".algaeCount_on").each(function (i, v) {
console.log(i, v);
$(this).css("color", "green");
});
$(".algaeToxinCountOn").each(function (i, v) {
console.log(i, v);
$(this).css("color", "green");
});
}
function getEcoliData(beach_id) {
//console.log(beach_id);
var rows;
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = '&key=apiKey&callback=?';
var whereClause = "WHERE 'Beach_ID' = " + beach_id;
var query = "SELECT * FROM EcoliTable "
+ whereClause + " ORDER BY 'Sample_Date' DESC";
var queryText = encodeURI(query);
var ecoli_array = new Array();
return $.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp'
});
}
function getAlgaeData(beach_id) {
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = '&key=apiKey&callback=?';
var whereClause = " WHERE 'Beach_ID' = " + beach_id;
var query = "SELECT * FROM algaeTable "
+ whereClause + " ORDER BY 'Sample_Date' DESC";
var queryText = encodeURI(query);
// ecoli request
return $.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp'
});
}
// create beach locations dropdown
function createDropDownMenu() {
var query = 'SELECT Beach_Location, Beach_ID FROM beachTable ORDER BY Beach_Location ASC';
var queryText = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//Send query and draw table with data in response
gvizQuery.send(function (response) {
var numRows = response.getDataTable().getNumberOfRows();
var numCols = response.getDataTable().getNumberOfColumns();
var name = ['<label style="font-weight:bolder;font-size:16px"> Select a Beach:</label><select id="beach_menu" style="font-size:16px;" onchange="select_beach(this.options[this.selectedIndex].value);"><option class="defaultopt" value="">--All--</option>'];
for (var i = 0; i < numRows; i++) {
var nameValue = response.getDataTable().getValue(i, 0);
var idValue = response.getDataTable().getValue(i, 1);
name.push("<option value=" + "'" + idValue + "'" + ">" + nameValue + "</option>");
}
name.push('</select>');
document.getElementById('beach_location_dropdown').innerHTML = name.join('');
});
} // end createDropDownMenu Function
function select_beach(val) {
$("#beach_menu option[value='" + val + "']").attr('selected', 'selected');
if (val === "") {
resetMapExtent();
displayAllBeaches();
}
else {
update_layer(val)
}
} // end select_beach function
function resetMapExtent() {
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(53.760861, -98.813876));
map.setZoom(5);
} // end resetMapExtent function
// implement update_layer function
function update_layer(beach) {
infoWindow.close();
for (var z = 0; z < allMarkers.length; z++) {
if (beach === allMarkers[z].beach_id) {
allMarkers[z].setVisible(true);
} else {
// hide all other markers
allMarkers[z].setVisible(false);
}
}
} // end update_layer function
function displayAllBeaches() {
infoWindow.close();
// show all markers
for (var z = 0; z < allMarkers.length; z++) {
// hide all markers
allMarkers[z].setVisible(true);
}
} // end displayAllBeaches
/* start map initialization */
function initialize() {
// map
latlng = new google.maps.LatLng(49.894634, -97.119141);
var myOptions = {
center: latlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN
],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
overviewMapControl: true,
overviewMapControlOptions: {
opened: true
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// invocation begins here
createDropDownMenu(); // not working now.
getBeachLocations();
// legend
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
document.getElementById('legend'));
var legend = document.getElementById('legend');
var swim_icon = "swim.jpg";
var div = document.createElement('div');
div.innerHTML = '<h4>Features</h4>' +
'<br/><img src="' + swim_icon + '"> ' + "Beaches";
legend.appendChild(div);
} // end initialization function
$(function () {
$('.view_normal').live('click', function () {
$(".container").css("width", "930px").css("margin", "auto");
$(".onewidecenter").css("width", "930px").css("margin", "auto");
$("#map_canvas").css("width", "930px").css("margin", "auto");
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(53.760861, -98.813876));
map.setZoom(5);
});
$('.view_full_screen').live('click', function () {
$(".container").css("width", "100%").css("margin", "auto");
$(".onewidecenter").css("width", "100%").css("margin", "auto");
$("#map_canvas").css("width", "100%").css("margin", "auto");
$(" #dropdown_container").css("width", "100%").css("margin", "auto");
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(53.760861, -98.813876));
map.setZoom(5);
});
}); // end page load
I have included the sample code above. Please pay special attention to my click event handler. As always, as suggestions on how best to remedy this would be greatly appreciated.
Thanks in advance,
Michael
jQuery AJAX methods are asynchronous. That means:
obj.success(function (data) {
ecoli_rows = data['rows'];
}); // end sucess
Returns immediately but the callback function doesn't run until the ajax request completes.
This means that:
infoWindow.setContent(this.getHeader() + '' +
this.getEcoliData() + '' + this.getAlgaeData());
infoWindow.open(map, this); //ajax callback hasn't fired here
opens the info window with the content BEFORE the ajax request completes.
To correct, you might do something like this:
In marker.getEcoliData:
obj = getEcoliData(this.beach_id);
return obj;
// move processing below this point to new method
And in the click event handler:
google.maps.event.addListener(marker, 'click', function () {
var ajaxObj = this.getEcoliData();
var marker = this;
ajaxObj.done(function() {
infoWindow.setContent(marker.getHeader() + '' +
marker.afterGetEcoliData() + '' +
this.getAlgaeData());
infoWindow.open(map, this);
$(".tabs").tabs({ selected: 0 });
});
This is not a complete solution since you have two asynchronous calls happening. You could either chain them, or set some kind of counter to make sure that the callback only executes when both have completed.
An even better approach would be to immediately open the infowindow with some kind of information to tell the user that data is being loaded. Then after the requests complete, you simply update the infowindow content again (with a handle to the content element) to show the returned data.
Thanks for the help with this. I managed to get this to work as expected. As it turned out I had to restructure the marker class so that two ajax requests weren't be returned an additional time.
Related
I have gallery into my project, when page loads it charge all upload images and categories like these:
As you can see, It suit images depending of selected categories. The problem is the page going to slow because it loads all images... How can I do to optimize these process? I think some like delete All categorie, but I don´t know how to do my query to start for example with office categorie filter
There is my code:
function GalleryCatPopulate(url, listname, target) {
var eng = false;
if ((window.location.href.indexOf("lang=en") > 0)) {
eng = true;
}
// Getting our list items
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items? $select=Title,English",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
completeGalleryCat(data, target, eng);
},
error: function (data) {
failureGalleryCat(data, target);
}
});
}
function completeGalleryCat(data, target, eng) {
var items = data.d.results;
var prefix = "";
var sufix = "<div class='clear'></div>";
if (eng)
prefix = "<div class='filter selected' data-category='cat-all'>All</div>";
else
prefix = "<div class='filter selected' data-category='cat-all'>Todas</div>";
var menu = "";
var cat = "";
var title = "Transporte de Materiales";
console.log(title.replace(/\s/g, "_").replace(/[^\w\s]/gi, ''));
for (var item in items) {
if (eng)
cat = items[item].English;
else
cat = items[item].Title;
menu += "<div class='filter' data-category='" + cat.replace(/\s/g, "_").replace(/[^\w\s]/gi, '') +"'>"+ cat +"</div>";
}
$(target).html(prefix + menu + sufix);
}
function failureGalleryCat(data, target) {
$(target).text("There is something bad wit load images, please check console");
}
function GalleryContentPopulate(url, listname, target) {
var eng = false;
var queryGallery = "$select=Title,Description,Enlace,EncodedAbsUrl,Categoria/Title&$expand=Categoria/Title";
if ((window.location.href.indexOf("lang=en") > 0)) {
queryGallery = "$select=TitleEnglish,DescriptionEnglish,Enlace,EncodedAbsUrl,Categoria/English&$expand=Categoria/English";
eng = true;
}
// Getting our list items
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?$top=1000&" + queryGallery,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
completeGalleryContent(data, target, eng);
},
error: function (data) {
failureGalleryContent(data, target);
}
});
}
function completeGalleryContent(data, target, eng) {
var items = data.d.results;
console.log(items);
var menu = "";
var cat = "";
for (var item in items) {
if(items[item].DescriptionEnglish==null)
items[item].DescriptionEnglish="";
if(items[item].Description==null)
items[item].Description="";
if(items[item].Categoria.results!= null && items[item].Categoria.results!= undefined && items[item].Categoria.results.length > 0){
cat =setCategories(eng,items[item].Categoria.results);
}
if (eng){
menu += "<div class='mega-entry " + cat + " cat-all' id='mega-entry-1' data-src='" + items[item].EncodedAbsUrl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].TitleEnglish + "</div><p>" + items[item].DescriptionEnglish + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].EncodedAbsUrl + "' title='" + items[item].TitleEnglish + "'><div class='mega-view mega-red'></div></a></div> </div>";
}else{
menu += "<div class='mega-entry "+ cat + " cat-all' id='mega-entry-1' data-src='" + items[item].EncodedAbsUrl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].Title + "</div><p>" + items[item].Description + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].EncodedAbsUrl + "' title='"+ items[item].Title +"'><div class='mega-view mega-red'></div></a></div></div>";
}
}
$(target).html(menu);
var api = $(target).megafoliopro(
{
filterChangeAnimation: "pagebottom", // fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle
filterChangeSpeed: 400, // Speed of Transition
filterChangeRotate: 99, // If you ue scalerotate or rotate you can set the rotation (99 = random !!)
filterChangeScale: 0.6, // Scale Animation Endparameter
delay: 20,
defaultWidth: 980,
paddingHorizontal: 10,
paddingVertical: 10,
layoutarray: [9, 11, 5, 3, 7, 12, 4, 6, 13] // Defines the Layout Types which can be used in the Gallery. 2-9 or "random". You can define more than one, like {5,2,6,4} where the first items will be orderd in layout 5, the next comming items in layout 2, the next comming items in layout 6 etc... You can use also simple {9} then all item ordered in Layout 9 type.
});
//console.log("entra");
// FANCY BOX ( LIVE BOX) WITH MEDIA SUPPORT
jQuery(".fancybox").fancybox();
//console.log("sale");
// THE FILTER FUNCTION
$('.filter').click(function () {
$('.filter').each(function () { jQuery(this).removeClass("selected") });
api.megafilter(jQuery(this).data('category'));
$(this).addClass("selected");
});
var categorySelected = getParameterByName("Category");
$("div[data-category='"+categorySelected +"']").click();
}
function failureGalleryContent(data, target) {
console.log(data);
$(target).text("Error loading parallax. Please check console for more info");
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function setCategories(boolLang, objResult){
var cat ="";
for(var item in objResult){
if(boolLang)
cat += replaceAll(" ", "_",objResult[item].English.replace(/[^\w\s]/gi, '')) + ' ';
else
cat += replaceAll(" ", "_",objResult[item].Title.replace(/[^\w\s]/gi, '')) + ' ';
}
return cat;
}
function replaceAll( find, replace,string) {
return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function escapeRegExp(string) {
return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
Thankyou in advance!
I have a leaflet map that displays interest points and an info panel that sorts the points based on a score and displays the top 5 dynamically based on the map extent. I want users to be able to click on the panel and zoom to that point of interest on the map.
the code below shows what I have so far.
var info = L.control({position: 'bottomright'});
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); /
this.update();
return this._div;
};
var inBounds = {},
listed5 =[],
bounds = map.getBounds();
jsonlayer.eachLayer(function(marker) {
if (bounds.contains(marker.getLatLng())) {
inBounds[marker.feature.properties.name] = marker.feature.properties.score ;
}
});
var top5Sorted = Object.keys(inBounds).sort(function(a,b){return inBounds[b]-inBounds[a]});
var listedtop5 = top5Sorted.slice(0,5);
info.update = function (top) {
this._div.innerHTML = '<div class="map-navigation"><h4>Title:</h4>'+ ('1. '+listedtop5[0] +'<br>' + '2. '+ listedtop5[1]+ '<br>' + '3. ' + listedtop5[2] + '<br>' + '4. '+listedtop5[3] + '<br>' + '5. '+ listedtop5[4]) + '</div>' ;
};
info.addTo(map);
map.on('move', function() {
info.removeFrom(map)
var inBounds = {},
listed5 =[],
bounds = map.getBounds();
jsonlayer.eachLayer(function(marker) {
if (bounds.contains(marker.getLatLng())) {
inBounds[marker.feature.properties.name] = marker.feature.properties.score;
//inBounds.push(marker.feature.properties.name=marker.feature.properties.score);
}
});
var top5Sorted = Object.keys(inBounds).sort(function(a,b){return inBounds[b]-inBounds[a]});
var listedtop = top5Sorted.slice(0,5);
info.update = function (top) {
this._div.innerHTML = '<h4>Title:</h4>'+ ('1. '+listedtop[0] +'<br>' + '2. '+ listedtop[1]+ '<br>' + '3. ' + listedtop[2] + '<br>' + '4. '+listedtop[3] + '<br>' + '5. '+ listedtop[4]) ;
};
info.addTo(map);
});
document.querySelector('.map-navigation').onclick = function(abc) {
var pos = abc.target.getAttribute('data-position');
var zoom = abc.target.getAttribute('data-zoom');
if (pos && zoom) {
var locat = pos.split(',');
var zoo = parseInt(zoom);
map.setView(locat, zoo, {animation: true});
return false;
}
};
You can try to use panTo method, in combination with zoomIn. Keep in mind that panTo method receives a latlng as the coordinates argument, so most probably you will have to transform your locat to a LatLng object.
document.querySelector('.map-navigation').onclick = function(abc) {
var pos = abc.target.getAttribute('data-position');
var zoom = abc.target.getAttribute('data-zoom');
if (pos && zoom) {
var locat = pos.split(',');
var zoo = parseInt(zoom);
map.panTo(new LatLng(locat[0], locat[1]);
map.zoomIn(zoo);
return false;
}
};
I develop a website with Openlayers 3 and need to yours helps.
My web page is shared in two parts: the listing display and map display.
I have create the markers that is animated by the cluster.
var features = [];
$.ajax({
url: urlUpdate,
dataType: 'json',
async: false,
success: function(json1){
$.each(json1, function (key, data) {
if (key === 'features') {
$.each(data, function (k, v) {
if (v.type === 'Feature') {
if (v.geometry.coordinates.length > 1){
features[k] = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(v.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')),
id: v.properties.id,
name: v.properties.name,
lieu: v.properties.lieu,
});
}
}
});
}
});
}
});
var source = new ol.source.Vector({
features: features
});
var clusterSource = new ol.source.Cluster({
distance: 40,
source: source
});
var clusters = new ol.layer.Vector({
source: clusterSource,
style: ajouterStyle
});
var oldMarkers = map.getLayers().a[2];
map.removeLayer(oldMarkers);
map.addLayer( clusters );
The listing display need to update the map displaying and vice versa.
map.getView().on('change:resolution', function(evt){
var myLayer = map.getLayers().getArray()[2];
myLayer.getSource().forEachFeature(function(feature){
var geom = feature.getGeometry();
var coord = geom.getCoordinates(); //this is valid for a ol.geom.Point
var nb = feature.get('features').length;
var content = '';
if( nb === 1 ){
var name = feature.get('features')[0].get("name");
var date = feature.get('features')[0].get("date");
var id = feature.get('features')[0].get("id");
var content = '<li class="events">\n\
<div class="content_events">\n\
'<a href="?event=' + id +'" >' + name + "</a>\n\
<p>" + date + "</p>\n\
</div>\n\
</li>";
} else{
for( i=0; i< nb; i++){
var name = feature.get('features')[i].get("name");
var date = feature.get('features')[i].get("date");
var id = feature.get('features')[i].get("id");
content += '<li class="events">' +
'<div class="content_events">\n\
'<a href="?event=' + id + '" >' + name + "</a>"+
"<p>" + date + "</p>\n\
</div>\n\
</li>";
}
$("#listing_events").html('<ul class="list-event">' + content + '</ul>')
});
With this method I get the information of all markers, I need to get the marker displayed on the screen.
Thanks for your helps.
I have resolve my problem by :
var source = new ol.source.Vector({ features: features }); var bb = source.getExtent(); map.getView().fitExtent( bb, map.getSize() );
Thanks
I have an RSS reader that fetches events with ajax. I want the user to be able to click the link of the event and have it transition to a new page with the details. Here is an example I found: http://jsfiddle.net/hellosze/t22QP/ I am have trouble understanding what is happening since I am rather new to jQuery so I was hoping someone code direct me as to what is happening. Thanks!
Here is how I extract the xml data and display it to a main page:
$.ajax({
type: 'GET',
url: 'categoryURL',
dataType: 'xml',
success: function (xml) {
var data = [];
$(xml).find("item:lt(40)").each(function () {
var dateText = $(this).find("Date").text().toString();
var eventDate = moment(dateText,"YYYY-MM-DD");
var title = $(this).find("title").text();
var region = dateText.substr(8).toUpperCase();
if (region.length < 3) { region = "ALL"; }
var description = $(this).find("description").text();
var dateDisplay = description.substr(0, description.indexOf(",")+6); //Parsed DATE from description
if (dateDisplay.length > 35) { dateDisplay = "See event for details"; }
//var locationdisplay = description.substr(description.indexOf(",")+6,4); //Parsed the location from description
var category = $(this).find("category").text();
var linkUrl = $(this).find("link").text();
var displayTitle = "<a href='" + linkUrl + "' target='_blank'>" + title + "</a>"
var item = {title: displayTitle, DateDecription: dateDisplay, Date: new Date(eventDate), Region: region,}
data.push(item);
// $('#feedContainer').append('<h3>'+displaytitle+'</h3><p>'+"Event Date: "+descriptdisplay+'</p><p>'+"Location: "+region+'</p');
}); //END .each()
data.sort(function (a, b) {
a = new Date(a.Date);
b = new Date(b.Date);
return a>b ? -1 : a<b ? 1 : 0;
});
$.each(data, function (index, item) {
$('#feedContainer').append('<h3>' + item.title + '</h3><p>' + "Event Date: " + item.DateDecription + '</p><p>' + "Location: " + item.Region + '</p');
});
} //END success fn
});
});
I am using the following code to pull in data from my database and plot points with google maps. What I want to do is something like, "if response=null, alert('empty')" but everytime I try to work that into this code, something just breaks. If anyone could offer any help that would be awesome.
Here is my code:
<script type="text/javascript">
$(function ()
{
var radius3 = localStorage.getItem("radius2");
var lat3 = localStorage.getItem("lat2");
var long3 = localStorage.getItem("long2");
var type2 = localStorage.getItem("type2");
var citya = localStorage.getItem("city2");
var rep2 = localStorage.getItem("rep2");
var size2 = localStorage.getItem("size2");
var status2 = localStorage.getItem("status2");
$.ajax({
url: 'http://examplecom/test/www/base_search.php',
data: "city2=" + city2 + "&rep2=" + rep2 + "&status2=" + status2 + "&size2=" + size2 + "&type2=" + type2 + "&long2=" + long2 + "&lat2=" + lat2 + "&radius2=" + radius2,
type: 'post',
dataType: 'json',
success: function (data) {
if (data) {
$.each(data, function (key, val) {
var lng = val['lng'];
var lat = val['lat'];
var id = val['id'];
var name = val['name'];
var address = val['address'];
var category = val['category'];
var city = val['city'];
var state = val['state'];
var rep = val['rep'];
var status = val['status'];
var size = val['size'];
$('div#google-map').gmap('addMarker', {
'position': new google.maps.LatLng(lat, lng),
'bounds': true,
'icon': 'images/hospital.png'
}).click(function () {
$('div#google-map').gmap('openInfoWindow', {
'backgroundColor': "rgb(32,32,32)",
'content': "<table><tr><td>Name:</td><td>" + name + "</td></tr><tr><td>Address:</td><td>" + address + ", " + city + " " + state + "</td></tr><tr><td>Category:</td><td>" + category + "</td></tr><tr><td>Rep:</td><td>" + rep + "</td></tr><tr><td>Status:</td><td>" + status + "</td></tr><tr><td>Size:</td><td>" + size + "</td></tr></table>"
}, this);
});
} else {
alert('hello');
}
}
})
}
});
})
}
</script>
Something like
success: function (data) {
if(!data) {
alert('empty');
return;
}
$.each(data, function (key, val) { ...
should work.
Something like this!
success: function (data) {
if(data.length == 0) {
alert('empty');
return;
}
Something like this?
success: function (data) {
if(data){
//do your stuff here
}
else{
alert('empty');
}
}