I'm relatively new to the Fusion Tables Api and I am trying to create a simple web app using Fusion Tables and Google Maps Api. The application will be used about three times a day and each time a new set of data will be added to the table, replacing the old entries with new ones.
So far, the application is working as expected, except for when changes are made to the fusion table. When I add or delete multiple rows from the table manually through the Fusion Table page and then return to my app, I notice that the styles stop working properly, and in many cases do not appear at all; however, after about an hour everything starts working normally again.
The code I use for creating the styles is this,
layer = new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: '11CIZUlNjBPiOM1Y4pDUP_Mn9TxkqF0etfpWhi5c'
},
styles:[
{
polygonOptions:{
fillColor: '#FF0000',
fillOpacity: 0.05
}
},
{
where: "Location LIKE 'PERDUE'",
polygonOptions: {
//fillColor: '#0000FF'
fillOpacity:0.2
}
},
{
where: "GeoBlock = 'AC1C'",
polygonOptions: {
//fillColor: '#0000FF'
fillOpacity:0.8
}
},
{
where: "Location = 'BENGOUGH'",
polygonOptions: {
//fillColor: '#0000FF'
fillOpacity:0.99
}
}]
});
layer.setMap(map);
I've researched a bit to see if anyone else is having similar issues, and the closest thing that I've come across that is similar to the problem I am having is that it may be a cache issue with the browser, but I've tested this scenario with multiple machines at the same time and have been getting the same result and I've also added the no-cache tag to my code to prevent the browser from caching the styles. I'm not sure if this is an Api issue or something else. I will appreciate any suggestions on how to approach this problem.
Thanks,
It's an API-issue, the tiles created to display the layers will also be cached by google.
What you can do: modify the queries, so that it still fetches the same results, but the String-representation for the query is different. This should speed-up the tile-update(and prevent from client-side caching).
Taking your code it could be done like this:
var and=' Location does not contain "'+new Date().getTime()+'"';
layer = new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: '11CIZUlNjBPiOM1Y4pDUP_Mn9TxkqF0etfpWhi5c',
where: and
},
styles:[
{
polygonOptions:{
fillColor: '#FF0000',
fillOpacity: 0.05
}
},
{
where: "Location LIKE 'PERDUE' and "+and,
polygonOptions: {
//fillColor: '#0000FF'
fillOpacity:0.2
}
},
{
where: "GeoBlock = 'AC1C' and "+and,
polygonOptions: {
//fillColor: '#0000FF'
fillOpacity:0.8
}
},
{
where: "Location = 'BENGOUGH' and "+and,
polygonOptions: {
//fillColor: '#0000FF'
fillOpacity:0.99
}
}]
});
Instead of using new Date().getTime() I would suggest to use(when available) e.g. the timestamp of the last modification so that the cached tiles still may be used when no update has been done.
Related
I'm developing a new tab replacement extension for Google Chrome and I'd like to allow the user to customize the background, to do so I'm using the storage.sync API as suggested by this page.
The problem is that the style changes are applied asynchronously, so the default background (white) is briefly used during the page load resulting in unpleasing flashes.
Possible (unsatisfying) solutions are:
do not allow to change the background;
hard code a black background in the CSS (and move the problem to custom light backgrounds);
use a CSS transition (still super-ugly).
What could be an alternative approach?
Follows a minimal example.
manifest.json
{
"manifest_version": 2,
"name": "Dummy",
"version": "0.1.0",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"permissions": [
"storage"
]
}
newtab.html
<script src="/newtab.js"></script>
newtab.js
chrome.storage.sync.get({background: 'black'}, ({background}) => {
document.body.style.background = background;
});
I come up with a reasonable solution. Basically since the localStorage API is synchronous we can use it as a cache for storage.sync.
Something like this:
newtab.js
// use the value from cache
document.body.style.background = localStorage.getItem('background') || 'black';
// update the cache if the value changes from the outside (will be used the next time)
chrome.storage.sync.get({background: 'black'}, ({background}) => {
localStorage.setItem('background', background);
});
// this represents the user changing the option
function setBackground(background) {
// save to storage.sync
chrome.storage.sync.set({background}, () => {
// TODO handle error
// update the cache
localStorage.setItem('background', background);
});
}
This doesn't work 100% of the times but neither do the simple:
document.body.style.background = 'black';
So it's good enough.¹
¹ In the real extension I change the CSS variables directly and I obtain much better results than setting the element style.
I'm using the google analytics embed API to show data in console. All works well till i add a filter to the query.
I want to not include pages what have Movie.aspx in it.
Is it not supported by the API or is my syntax incorrect?
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:pageviewsPerSession',
dimensions: 'ga:pagePath',
sort: '-ga:pageviewsPerSession',
//doesn't work when i add this line
// 'filters':'ga:pageviewsPerSession!#Movie.aspx',
'start-date': '30daysAgo',
'end-date': 'yesterday',
'max-results': 10
},
chart: {
container: 'chart-5-container',
type: 'TABLE'
}
});
Edit:
Also i can't seem to get the chart to format correctly.
Each column returns 00,01,02,03 etc.
I'm trying to format it to display 02:00 AM
var dataChart3 = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions',
dimensions: 'ga:hour',
'start-date': '1daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-7-container',
type: 'COLUMN',
options: {
width: '100%',
hAxis: {
title: 'Time of Day',
format: 'hh:mm a'
},
vAxis: {
title: 'Number of sessions'
}
}
}
});
Update 24/05/2017
Thanks I've manged to sort it out using the below query
var PageListConfig = {
query: {
//metrics: 'ga:sessions,ga:avgPageLoadTime',
metrics: 'ga:sessions',
dimensions: 'ga:pagePath',
filters: 'ga:pagePath!#Movie;ga:pagePath!#SessionTimesDisplay;ga:pagePath!#SessionTimesDaySelect;ga:pagePath!#VenueTicketing',
sort: '-ga:sessions',
'max-results': 30
},
chart: {
container: 'chart-5-container',
type: 'TABLE'
}
};
ga:pageviewsPerSession
The average number of pages viewed during a session, including repeated views of a single page.
The above metadata is a metric not a dimension which means you need to use one of the metric filter operators also its a number you cant compare a number to a string
You may want to consider one of the page path dimensions.
ga:pagePath=#Movie.aspx
check out the filter syntax documentation on the Google Analytics developer site. I also recommend testing them out in the query explorer
I'm trying to simulate the clicking of CSS elements on my page and automatically take screenshots of the window at each stage for testing purposes. I'm using backstopJS as the CSS testing/screenshot framework. Everything seems to work fine for this first element. A modal is triggered when i click on the register link in the main header menu. but it is not generating any reference screenshotof the modal.
plz help to trigger a reference screenshot of the modal in the below given script
This is the script :
{
"viewports": [
{
"name": "desktop",
"width": 1600,
"height": 900
},
{
"name": "phone",
"width": 320,
"height": 480
},
{
"name": "tablet_v",
"width": 568,
"height": 1024
},
{
"name": "tablet_h",
"width": 1024,
"height": 768
}
],
"grabConfigs" : [
{
"testName":"vawizard"
,"url":"http://localhost/vawizard/index.html"
,"hideSelectors": [
]
,"removeSelectors": [
"header.banner--clone"
]
,"selectors":[
"#outer_wrapper header"
,".banner_box"
,".help_desk"
,".big_search_box"
,".look_specific"
,".smart_tool_box"
,"footer"
,".copyright_box"
]
}
]
}
This is the link
http://wizard.hodgesdigital.com/
Any ideas what could be causing this behavior?
BackstopJS is mainly focused on testing layout states at different screen sizes and doesn't support the testing of user interactions.
In your case I can make two recommendations. 1) You could add a state to your URL which triggers the modal when your page is loaded OR 2) you could write a custom CasperJS script to test cases like this which require some user interaction. More detail below...
Approach 1:
In the first case you could add a hash to your URL which would trigger your modal, In my experience it's common for web apps (e.g. Angular and Ember) to represent modal states in this way....
// in your BackstopJS config
"url": "http://localhost/vawizard/index.html#openModal",
// then as part of a jQuery script
$(document).ready(function(){
if ( /openModal/.test(location.hash) )
{
// Do your open modal action here
// Then trigger BackstopJS
}
});
Approach 2:
If the above is not your style there is another good option. As part of the BackstopJS install you also have a full version of CasperJS -- so I would recommend going to CasperJS.org to look at some basic examples and see if it makes sense to write your own scripts. It will be a little more time consuming in the short run but the project specific boilerplate you write now may be nice to have for future edge cases (for testing forms, other interactions etc.).
We use custom scripts for such things. e.g
module.exports = async(page, scenario, vp) => {
await require('./onReadyInfo')(page, scenario, vp);
await require('./clickAndHoverHelper')(page, scenario, vp);
await require('./onReadyWaitForImages')(page, scenario, vp);
await page.waitForSelector("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
await page.click("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
await page.waitForSelector(
"#checkbox-twitter", {
timeout: 6000
}
);
await page.waitForTimeout(500);
await page.evaluate(async() => {
jQuery("#checkbox-twitter + label").click();
setTimeout(() => {
jQuery('#checkbox-twitter + label').focus()
}, 500);
});
await new Promise(resolve => setTimeout(resolve, 300));
};
This will open a dialog on link click, check a checkbox and give the label focus.
I have an otherwise working application at Sample Web Site
I would like to change the display of the selected line from the default thin red line to a much thicker green (or red) line.
When I changed the following code in the map.js file from
// Google Fusion LineFeat table
var linLayer = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: linTableId,
where: idStr,
},
map: GlobalMap
});
to add the styles section as shown, nothing changes in the display
// Google Fusion LineFeat table
var linLayer = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: linTableId,
where: idStr,
styles: [{
polylineOptions: {
strokeColor: "#00FF00",
strokeWeight: "12"
}
}]
},
map: GlobalMap
});
Can someone provide me some direction on what I might be doing wrong? I get these same results if I comment out the call to the zoom.js functions that zoom the map into the specific project.
The styles option doesn't go in the query:
// Google Fusion LineFeat table
var linLayer = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: linTableId,
where: idStr
},
styles: [{
polylineOptions: {
strokeColor: "#00FF00",
strokeWeight: "12"
}
}],
map: GlobalMap
});
BTW - in your "Sample Map" you are overwriting linLayer with the layer for AreaFeat, you probably don't want that.
I'm using google map API v3. I want to disable click action on default google landmark/poi. For example, when I zoom to UCLA, the school icon shows up (that's fine) but I don't want user to click and view details of that location. Which API function should I use?
Google has exposed an option for this. See clickableIcons of google.maps.MapOptions in the docs.
Example initialization code:
map = new google.maps.Map(document.getElementById('map'), {
clickableIcons: false
});
add this option to mapOption
clickableIcons: false
this is more options i think you will
draggable: true, // this is for disable the Draggable
disableDefaultUI: true, // this for disable Default UI
fullscreenControl: false, // this is for disable Full Screen
scrollwheel: true, // this is for disable Scroll Wheel
disableDoubleClickZoom: false, // this is for disable Double Click Zoom
draggableCursor:'crosshair',// this is for cursor type
draggingCursor:'move', // this is for dragging cursor type
minZoom: 3, // this is for min zoom for map
maxZoom: 18 , // this is for max zoom for map
//note : max, min zoom it's so important for my design.
zoom: 14, // this is to make default zoom
clickableIcons: false, // this is to disable all labels icons except your custom infowindow or Infobox.
I encountered this same problem.
Google appears to have recently changed their api to make the base map labels "clickable" and there is not yet a simple API call to disable their clickablility.
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f1ac9ad4da3606fe
I would like to see google add a simple map option like this, but alas it doesn't exist yet
var opts = { clickableLabels:false };
var map = new maps.google.com.map(div,opts);
The following solution works, but because it relies on custom styled map tiles, free maps are limited to (2,500 maps loads per day) - See Google Maps FAQ.
function initialize() {
// For more details see
// http://code.google.com/apis/maps/documentation/javascript/styling.html
var noPOILabels = [
{
featureType: "poi",
elementType: "labels",
stylers: [ { visibility: "off" } ]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var noPOIMapType = new google.maps.StyledMapType(noPOILabels,
{name: "NO POI"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'no_poi']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('no_poi', noPOIMapType);
map.setMapTypeId('no_poi');
}
This issue has been logged with google at:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3866
Please star and comment your needs on this issue there.
I understand that the OP wants a solution that persists the labels/icons but suspends the click events. I'm not sure this is possible; please star this issue
However, some of us are drawing shapes sans Drawing Manager and labels/icons are obstructing the additions of new points. If it meets your requirements, you can temporarily remove the icons/labels. I've found that transit, poi, and landscape all need to be toggled:
var map = new google.maps.Map(document.getElementById("map"), {});
map.poi = function(state){
var styles = [
{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
}
];
this.set("styles", (state)? {} : styles );
}
And the usage:
//turn the labels/icons off
map.poi(false);
//turn them back on
map.poi(true);
I understand that this question is old, but maybe this answer will help others:
I'm not sure if this is legal, but I ended up exploring the code and made this:
$("#google-map").on("mousedown",function(){
setTimeout(function(){
disableInfoWindows();
},500);
});
function disableInfoWindows()
{
$(".gm-iw.gm-sm").parent().parent().remove();
$("[style='position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;']")
.parent()
.parent()
.remove();
}
It worked for me, no infoWindow showing up, while preserving all the icons. Anyone who has an idea enhancing the code is welcome, the infoWindow is showing up just a bit the first time it is about to open, after that first one, it is completely gone.
Yeah, the other solutions work but you can also want to have ability to hide/disable only part of that pins or disable ability to go to details from popups, please see my post here with some tips how you can do that CLICK
Right, to sum up, if you want to "remove" popups, you can just use:
clickableIcons: false
for map options object. But if you want to have a popup, but without "View on Google Maps" label, you can use a hacky CSS trick:
google-map {
.view-link {
display: none !important;
}
}
That was my requirements, and it works!
If you want to define which icons/pins (elements or labels, however you call it) should be visible, you can use this site to generate proper JSON with map settings: https://mapstyle.withgoogle.com/