I have a GraphQL query from Apollo + React that I am using on a map component where the parameters are "latitude" and "longitude". The variables are provided by the map's center point and I am trying to get it to update the query as the center point or zoom level is changed but can't find a "simple" way to do this - maybe I am overthinking things.
Is there a way to simply say, here's some new variables, refetch me new data? The only approach I have seen so far is related to mutations but this seems like it is used more for inserting new values. Any ideas or suggestions would be great! Thanks!
Your description sounds quite confused.
If I understand correctly, you would like to send a new GraphQL query whenever the map view (center and/or zoom level) changes.
In that case, you would simply listen to the Leaflet map's 'moveend' and 'zoomend' events and re-send your query based on the new map center and zoom (I would say that view port bounds would probably be more appropriate).
Related
when using new beta feature LocalContextMapView from Google map, as described in https://developers.google.com/maps/documentation/javascript/local-context
How does one refresh the localContext when the map is panned/zoomed ?
LocalContextMapView place search is strictly bound by the map viewport by default. You can use the locationRestriction parameter to set a bounds to be much larger than the map's initial viewport.
You can find the sample implementation here: https://developers.google.com/maps/documentation/javascript/local-context/samples/location-restriction
And, since Local Context Search is still in beta, I highly suggest that you file a feature request for having a function to set locationRestriction programatically/dynamically.
For example, having a localContextMapView.setLocationRestriction() property would be a great addition to the Local Context Library. You can use Google Public Issue Tracker to file a feature request.
On my meteor project users can post events and they have to choose (via an autocomplete) in which city it will take place. I have a full list of french cities and it will never be updated.
I want to use a collection and publish-subscribes based on the input of the autocomplete because I don't want the client to download the full database (5MB). Is there a way, for performance, to tell meteor that this collection is "static"? Or does it make no difference?
Could anyone suggest a different approach?
When you "want to tell the server that a collection is static", I am aware of two potential optimizations:
Don't observe the database using a live query because the data will never change
Don't store the results of this query in the merge box because it doesn't need to be tracked and compared with other data (saving memory and CPU)
(1) is something you can do rather easily by constructing your own publish cursor. However, if any client is observing the same query, I believe Meteor will (at least in the future) optimize for that so it's still just one live query for any number of clients. As for (2), I am not aware of any straightforward way to do this because it could potentially mess up the data merging over multiple publications and subscriptions.
To avoid using a live query, you can manually add data to the publish function instead of returning a cursor, which causes the .observe() function to be called to hook up data to the subscription. Here's a simple example:
Meteor.publish(function() {
var sub = this;
var args = {}; // what you're find()ing
Foo.find(args).forEach(function(document) {
sub.added("client_collection_name", document._id, document);
});
sub.ready();
});
This will cause the data to be added to client_collection_name on the client side, which could have the same name as the collection referenced by Foo, or something different. Be aware that you can do many other things with publications (also, see the link above.)
UPDATE: To resolve issues from (2), which can be potentially very problematic depending on the size of the collection, it's necessary to bypass Meteor altogether. See https://stackoverflow.com/a/21835534/586086 for one way to do it. Another way is to just return the collection fetch()ed as a method call, although this doesn't have the benefits of compression.
From Meteor doc :
"Any change to the collection that changes the documents in a cursor will trigger a recomputation. To disable this behavior, pass {reactive: false} as an option to find."
I think this simple option is the best answer
You don't need to publish your whole collection.
1.Show autocomplete options only after user has inputted first 3 letters - this will narrow your search significantly.
2.Provide no more than 5-10 cities as options - this will keep your recordset really small - thus no need to push 5mb of data to each user.
Your publication should look like this:
Meteor.publish('pub-name', function(userInput){
var firstLetters = new RegExp('^' + userInput);
return Cities.find({name:firstLetters},{limit:10,sort:{name:1}});
});
My sample app shows a d3js chart with meteor. The width, the height and the data can be changed by the user reactively.
The challenge is to refresh only the part of the chart that need a refresh.
I do this for fun to see how it can be implemented with Meteor reactivity because someone implemented it with Reactive.js here: http://eng.wealthfront.com/2013/04/reactive-charts-with-d3-and-reactivejs.html
You can try the app here: http://testd3js.meteor.com/
And the documented code is here: https://gist.github.com/tomsdev/5428018
The problem is: to have this working I have to use a hack that replace Session with a simpler object because we can't store a Function type in Session. I need to store the scale functions returned by d3js. I then use the scale functions as reactive dependencies to refresh the bars or the labels of the chart.
So, I was wondering if you could add the possibility of storing Function in Session or if there is an other way (without creating my own reactive data source)?
Thanks!
You can store the values in ReactiveVars, which can store functions. After adding the package with meteor add reactive-var:
var foo = new ReactiveVar;
foo.set(function(){});
foo.get(); // => function(){}
I am trying to render a whole heap of vectors in the google earth plugin. I use the parseKml method to create my Kml Feature object and store it in an array. The code looks something like below. I loop over a list of 10,000 kml objects that I return from a database and draw it in the plugin.
// 'currentKml' is a kml string returned from my DB.
// I iterate over 10,000 of these
currentKmlObject = ge.parseKml(currentKml);
currentKmlObject.setStyleSelector(gex.dom.buildStyle({
line: { width: 8, color: '7fff0000' }
}));
ge.getFeatures().appendChild(currentKmlObject);
// After this, I store teh currentKml object in an array so
// I can manipulate the individual features.
This seems to work fine. But when I want to turn the visibility of all these features on or off at once, I have to iterate over all of these kml objects in my array and set their individual visibilities on or off. This is a bit slow. If I am zoomed out, I can slowly see each of the lines disappearing and it takes about 5 - 10 seconds for all of them to disappear or come back.
I was wondering if I could speed up this process by adding a layer and adding all my objects as children of this layer. This way I set the visibility of the whole layer on or off.
I have been unable to find out how to create a new layer in code though. If someone can point the appropriate methods, it would be great. I am not sure if a layer is the right approach to speed up the process either. If you also have any other suggestions on how I can speed up the process of turning on/off all these objects in the map at once, that would be very helpful as well.
Thanks in advance for you help.
Ok, found out how to do this by myself.
In the google earth extensions libarary I use the 'buildFolder' method.
var folder = gex.dom.buildFolder({ name: folderName });
ge.getFeatures().appendChild(folder);
Now, when I iterate over my object array, I add them to the folder instead using the following
folder.getFeatures().appendChild(currentKmlObject);
This way, later on I can turn the visibility on and off at the folder level using
folder.setVisibility(false); // or true
And this works quite well as well. IThere is no delay, I can see all the objects turning on and off at once. It is quite quick and performant.
I want to be able to show movement in a google maps just like in this example
http://www.labnol.org/internet/live-flight-tracking-google-maps/12308/
I am starting, and followed an example to load markers from mysql and put them in a map. But this is all static. If I keep track of a moving object in my database, how can I display them in real time?
Thank you
Assuming marker is your Marker instance, you should use some Ajax call to get new coordinates, depending how you return them, lets say your script will return an Object of lat and long and assign it to variable new_location. Now you need to change marker position to new coordinates:
function change_pos(new_location) {
var LatLong = new google.maps.LatLng(new_location.lat, new_location.long);
marker.setPosition(LatLong);
}
Just call this function everytime you got replay from Ajax.
And thats it.