Google Maps API Marker Limit / Roll Off [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am working with the Google Maps Javascript API. I have 793 points with some associated information in a MySQL table. This morning I added 303 points to reach the current total. There are now three data "sources" by which I am color coding the markers. This morning prior to adding the additional markers there were only two data sources and all points (490) were apparently being mapped. (this is apparently still true if I select only points matching first two sources)
I have confirmed XML output exists from the PHP data-fetching sub-page for all 793 points including the corresponding source information. The problem is that the first data source points are no longer appearing.
If I select random points and limit them to 500, then all three colors appear in approximately the appropriate distributions, but when I remove the limit there are no markers for the first data source anymore.
Weirder still it seems like the first points are falling off when I don't randomize but do limit the results. In that case, the proportions of colors bias toward the second and third source points until there are no more points from the first source.
I cannot find evidence of a limit for the number of markers that can be displayed using the Javascript API (although I do know I am approaching the reasonable marker display density in some neighborhoods, that is not my concern yet).
Similar question: how to raise a marker limit in Google Maps? (Answers suggest there is no API limit)
FYI, I have not included any code because the code seems to be working correctly except for the roll off effect that appears to be attributable to the API. If you think I may be making an error in the code that is producing the described behavior I will edit my question to include additional information. Thank you.

Garbage in, garbage out: The data is bad, where is the bathroom?
Markers of each color show up when the data is randomly selected because it changes the data order. Without randomization, redundant points covered the first set of points making it appear as though there were no first data points. Randomized data randomly covered either the first or third color rather than only the first.
I wonder if I had posted the (working) code, would anyone have helped me figure out that the code wasn't the problem faster?
The MySQL query I used to determine the problem: select PropertyID, FormattedAddress, Latitude, Longitude, Source from MapData group by Source;
This produced three results, one from each source, at which point the redundancy was obvious. I will go back to the data compilation phase and correct it.

Related

queryFeatures is not returning all intersected features

Intended effect
When user clicks on a polygon feature (a county, region, or neighborhood/municipality) or uses the "Draw" widget, a dashboard card displays the number of intersected point features returned by queryFeatures() (see below).
localitiesLayer.queryFeatures(query).then(function(results) {
var queriedLocalities = results.features;
if (queriedLocalities.length > 0) {
var fossilsFound = queriedLocalities.length;
}
}
Issue
The maximum number of returned intersected features is 2,000 even when more than 2,000 point features have been selected.
In the photo below, there are only "2000 fossil sites in the area!" when there should be over 3,000 features returned.
Troubleshooting
The issue is fixed when instead of querying the localitiesLayer feature layer, a feature layer view is instead queried. This introduces the unsolvable issue of the number of localities returned by queryFeatures changing depending on the level of zoom (as detailed in the API Reference for queryFeatures of FeatureLayerView).
Since it seems I'm stuck using a server-side query, I need to understand why this is happening at such a seemingly arbitrary number.
At first I thought it was related to possible topology issues between features, but why would that affect the polygon generated by the Draw widget? Before writing this question I also ran the integrate tool on all features layers just to make sure that there wasn't any non-coincident polygons.
Question
Why is the upper limit of features returned by the queryFeatures() on the localitiesLayer 2,000 even when more than 2,000 point features intersect with a selected polygon?
Why does querying with a feature layer view fix this issue (though as detailed above is not a valid solution to this problem)?
CodePen of app with bug
Usually feature services has a maximum amount of features to retrieve in one query. This is what is happening here.
You can check the service endpoint of the layer (LAU_Localities_View - 0) to find these value in Max Record Count, here set to 2000.
So you will have to use some other technique in order to have all the values. One simple way is to iterate and query with an extra condition using a field as last index, for example OBJECTID. You will have to order the result by the index field.

how to add a line by data received in real time in d3.js?

Before reading this question, you should know that I had asked a similar question, but by the advice of this community I was asked to do it again being a little more specific.
I have 7 sensors represented by a radio button each. in my real project I'm constantly receiving a web service, and I make filters for each sensor. the user is only interested in seeing the information by sensor. I am simulating the web service with a setinterval This is an example of the structure of the web service that I can receive. Do not worry about scale or values. the value 400 in the third data(data2) becomes a peak, is a dummy value for this test.
[{"id":"sensor1_ciclo1","sensor":1,"ciclo":"ciclo1","values":
[
{"voltaje":0,"corriente":11.175}
]
oData is the simulation of my webservice.. oData[0],oData1 and oData2
cont=0;
intervalo=setInterval(function(){
if(cont<=2){
reloadPoints(oData[cont]);
cont++;
}
},3000)
the "sensor" key represents the sensor number. I have 7 input radios to represent each sensor.the key "ciclo", is a property of the sensor. I can filter for this property. Although, in this case, all my data are using "ciclo": "ciclo1". In the line chart I draw the points using the keys "corriente" and "voltaje".
In my real project, I get the data according to a n amount of time, for this case I am simulating them with a setInterval of 3 seconds. I want to paint the data that corresponds to the selected sensor with an animation. if the sensor1 is selected, I only want to put the sensor1 data.
If I change sensor, I would like to see the data that has been accumulated, and this is the main function of my function reloadPoints the accumulated values are in oDataSensores. The display function is responsible for drawing the data, and if the limit is greater than 250 or -250 on the y-axis, the chart is rescaled.
I do not know how to fix it. The really strangest thing is that if I comment this line,
Array.prototype.push.apply(oDataSensores[data[i].id].content.values, data[i].values);
it apparently works. But I need to accumulate the values by sensor so I can not delete this line. How can I solve that?
To reproduce the error, wait 9 seconds, and when the third line in sensor1 is added and the chart is rescaled (>250), this problem occurs.
look the gif please.
I do not know how to fix it. The really strangest thing is that if I comment this line,
Array.prototype.push.apply(oDataSensores[data[i].id].content.values, data[i].values);
it apparently works. But I need to accumulate the values by sensor so I can not delete this line. How can I solve that?
that second time that I click on sensor 1, is not correct..
To reproduce the error, wait 9 seconds, and when the third line in sensor1 is added and the chart is rescaled (>250), this problem occurs.
so is the process that I want to achieve when a new point is added
This is my code:
http://plnkr.co/edit/z5It4hiOy3i7YOE5phnd?p=preview
so that you understand a little my project. I have 7 sensors. I will constantly be consuming a web service with the structure of my data. each time they are going to paint the lines for each sensor, according to the attribute "ciclo" (in this case all are "ciclo1"). while I am getting data and showing it in real time, I can change the sensor to display the data accumulated up to that point.

Google Charts + Google Sheets: Specified range does not identify data correctly

I settled on using Google Charts to draw the data from an auto-updating Google Sheet that draws from my Analytics account (the analytic API wasn't working out).
I've done quite a lot of reading, but I'm finding the query language reference to be a pain.
I've chosen to use the ChartWrapper.
https://jsfiddle.net/7xzv59kj/2/
// Visits
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1jICOBDvZzRxEThcWqnpFmNLUqjVP81Zd9RTwpbG29cE/gviz/tq?sheet=Sheet2&range=Keywords-All_Time!B11:C12&headers=1&tq=');
wrap.setContainerId('visits-all-time');
wrap.draw();
}
I want the chart to display the labels for Users and Sessions on the H-Axis, and then the values on the V-Axis. Instead, the data gets all jumbled and confused. I don't know what parameters to specify and how to label them properly.
Spreadsheet located here.
https://docs.google.com/spreadsheets/d/1jICOBDvZzRxEThcWqnpFmNLUqjVP81Zd9RTwpbG29cE
I would like to draw the data from the sheet titled Keywords-All_Time from range B11:C12
The issue here was just my foggy brain - I took a break and came back to it yesterday to discover a couple issues:
wrap.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1jICOBDvZzRxEThcWqnpFmNLUqjVP81Zd9RTwpbG29cE/gviz/tq?sheet=Sheet2&range=Keywords-All_Time!B11:C12&headers=1&tq=');
My URL specifies the sheet twice. I recall someone telling me to format the range with the sheet, but I suppose I never erased the other parameter.
My table had the axes the wrong way around. I reversed them and found everything worked well from there.
I abandoned the chart wrapper and decided to move on to that when I actually have a need for it. Here's the current jsfiddle with the code I'm working on now: https://jsfiddle.net/c11c9a0w/19/
This will be extremely helpful for anyone having trouble building a dynamic dashboard from a Google Sheet that has multiple graphs on a single page, so feel free to work off of this.
-Joel

Better solution for loading data onto a map

I'd like to ask if anyone knows a good solution to my problem.
I have a Rails project with a Bing map, where I need to load about 20000 pushpins.
The problem that I have is the speed of my data load. I've tried to optimize the load time by only including required fields for records (id, latitude, longitude). It made some difference but still was not a good load time.
Next thing that I've done - started loading records in batches (a couple hundred at a time). As a result, pushpins started showing up almost instantly, but again, it took a really long time to fully load the data set.
I'd really appreciate any suggestions about a better way to load the data.
Thanks in advance!
You have several solutions to achieve what you want to do but the main question would be, do you really need to display the 20k pushpins onto the map control and display them all at once? I'm pretty sure it will lack of readibility and adding to performance cost, you might consider dynamicaly restrict the number of elements that will be displayed and load only those who can really be seen.
1: Client-side clustering
Using your own implementation or the Bing Maps Module available here: http://bingmapsv7modules.codeplex.com/wikipage?title=Client%20Side%20Clustering, you can create cluster to ease the data manipulation and rendering of the pushpins.
2: Dynamicaly load (Server-side clipping and clustering)
Each time you fire 'onviewchanged', you can make an AJAX call to refresh the information and clear the previously added pin. Also, if you are a zoom level or in a specific area where you have to display every pushpin, you can create cluster of pushpins so you will display only one pushpin that says 'there are 12 pins in here'. I'm sure you get the point.
3: Composing dynamic tile on server-side or on client-side
If you need to display everything, the latest solution would be to draw things on dynamical tiles on server-side or on client-side depending on your use case, see: http://www.web-maps.com/gisblog/?p=1605

Create a smooth curve from a series of GPS coordinates

I have looked at a lot of Q/A here on SO regarding similar (if not the same) question I have. Yet none had an answer I was able to understand.
I wish to input a series of GPS coordinates, and create a smooth curve that connects them all, and passes through ALL of them. Javascript is my preferred language and I have found this page
http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm
It allows you to plot any number of points and when clicking the 'Draw Curve' button it does exactly what I want (except it is on html5 canvas whereas I want to use lat/lon values)
You can download the jsDraw2D source code here:
http://jsdraw2d.jsfiction.com/download.htm
The function in question is drawCurve() and it appears to calculate the points of the curve, creating a separate 'div' for each point as it goes along, while also appending them to the html page. I am presuming I need to get rid of the code for creating the html divs and instead add each point as it is calculated to an array or string. However, it is simply over my head (perhaps because it seems overwhelming and my understanding is not quite spot on).
I would post the code here, but it is pretty long, plus I am not sure how many other functions it calls/requires from the rest of the script.
The only other thing I can think of that needs to be considered is the +/- values in GPS coordinates. I am hoping that altitude changes would not effect the smooth line created too much, especially since it seems to create the new points so close together.
Any help in modifying that code would be greatly appreciated. If someone has some other approach, I am open to suggestions - however I would prefer a way that passes through ALL the input points (unlike some mathematical curve functions that do not)
Thanks!

Categories