I am using Google Maps Javascript API and in my website I would like to show people and places but not at the same time. The user should be able to switch from first set of people markers to a set of places markers.
I can simply remove all the people markers and then put all the places markers but it seems like there is another way to do the switching using the OverlayView class.
How does it work ?
It might first seem clumsy but markers itself are overlays and removing and displaying them "by the book" is done keeping references to them using array and looping through setting for example marker.setMap(null) I digged out for you docs example which demonstrates well how you need to play with them. I have used them in a past (displaying and removing) never faced real performance issues, its relatively fast.
Key is not to delete them completely until you want, just setting their map null removes them from the map. Always keep them in a array if you need to display them again. For your case I would either made two arrays of markers or just one array where markers has parameter such as marker.myType="people" which you can use to check against when looping and doing things.
Related
Adding many markers(10000) using leaflet is slowing down the browser.
markers are moving after every 5 sec.
How can performance issue solved in such scenario.
Note : Clustermarker has one problem. It's difficult to keep track of moving marker.
I'd the same issue, I bypassed it because 1000 markers is too much information.
I put two events:
On specific zoom level, I query my database to have (less) markers. In argument i give the map's coordinates like this example. Tips: i add +1 and -1 on lat and lng to anticipate step 2
I've got an event leafletDirectiveMap.mooveend. When this event is call, I'm doing the step 1. Tips: I'd $timeout with 300ms on this events.
If you need to show all markers, maybe using the heatmaps layer on specific zoom is an another bypass.
Sorry if it's not the solution of your problem but, iIf you try this example, you can see 10000 markers slowdown browser.
Are you using L.marker()? I've had better performance results with L.divIcon().
Alternatively, you could draw your markers directly on the canvas (as is done in Leaflet MaskCanvas). You can also update markers that are drawn on the canvas. Note: this isn't a plug-and-play suggestion; you'll have to do some coding to make this idea work.
Here are some other ideas from this GIS StackExchange question and this other GIS StackExchange question.
In my mapbox/leaflet app I'm using the following code in a loop to follow a route a round a map
map.setView(microLineArray[microIteration], zoom);
microLineArray is the array of lat longs that the route follows.
It plays very odd though because of the tiles loading in.
As I am only using a couple of zoom levels and only covering the USA for the route playing is it possible to pre-load the tiles at all. If so how would I go about doing this.
There is some discussion happening about this on the google group # https://groups.google.com/forum/#!topic/leaflet-js/nWk2k0FySRo. Sounds like some people are making phantom/hidden/offset map containers that contain more tiles than the user's map viewport.
So if you know where your routes are "generally" going to be...create another map container and use setView to get it moving & requesting tiles that you need prior to the user's map container.
Additionally, there is an old plugin called Leaflet.TileBuffer that sounds like it does exactly what you want - however compatibility with latest versions appears unknown.
You will probably also want to consider forcing unloadInvisibleTiles to false.
Now obviously if I was just adding them in a normal fashion I would just keep them in an array along the way but in my case the markers are being loaded in, but I am using a KML layer.
So after the KML loads and the markers show up I basically just want to know how many there are, and I can figure out some dumb hack for this (loading the KML file again with jQuery and counting it there or something), but ideally I just want something like myArray = map.getMarkers() or myArray = map.getOverlays(), does anything like that exist?
It seems such a simple task, not why it is taking me so long to find the answer. Maybe it just isn't possible?
There's no such thing, you have to keep an array and add the object IDs everytime you insert one.
I'm not sure if you're able to access the markers once you've added them in using a KLM layer. If you don't have that many markers, then I would say load them using the regular Marker class.
Maybe I didn't do it right, but last time I tried implementing markers using KLM layers I wasn't able to add any events to them, or access them at all.
If you only need to count them, then I would say load that same KML file using AJAX, and parse it as an XML and you can grab the elements from there to count them.
You can't access the markers in a KmlLayer (it is rendered as map tiles by Google's servers). You could use a FusionTableLayer (you can import KML into the FusionTable, then modify the query to that FusionTable to filter the markers) or a third party KML parser like geoxml3 or geoxml-v3 (which render the KML using native Google Maps v3 objects).
example using geoxml3
example using FusionTables
I'm working on a company website of an acquaintance of mine. The company has 7 offices spread all over the country. He has asked me to create a page listing these offices (with contact info, picture, etc.), and add a Google map to it with multiple markers that indicate the offices.
I've done so, but seeing as the zoom-level (a complete country) isn't really detailed, I was thinking about making the map zoom in to specific markers/offices when clicking on the office in the aforementioned list.
I however have no idea if there's a way to perform actions inside the map, from outside the map. Does anybody know?
The website is not live yet, but as an example, you can take a look at this link: http://www.inter-psy.nl/contact/contactgegevens
What I'd like to do is (for example) make the colored block/header perform a map zoom-in to a specific marker when clicking on it.
You must make the map-variable globally accessible, then you may perform any action on the map from anywhere in the page(e.g. map.setCenter() to center the map at a specific location or map.setZoom() to set the zoom-level)
To make the variable globally accessible remove the var-keyword when creating the map
I have a lot of addresses in my database I want to add to Google maps as markers. I only want to load and add the markers that are in the selected area on the map. If the map is zoomed or dragged, it should update the markers on the map.
How do I do that?
Thanks very much in advance!
For managing a lot of markers, you will definitely want to leverage infrastructure that has already been built to do this. There is actually a great post on the Google Developers blog that discusses the popular options.
https://developers.google.com/maps/articles/toomanymarkers
The Marker Clusterer is a very common component that I see all over the place when it comes to maps apps, and seems to fit the requirements that you are looking for. I would also take a look at Fusion Tables, as it makes building a map with thousands of locations extremely simple.
As Aristos said the markers will be showed automatically when coming into focus. BUT, if I you a bazillion of contacts, it could indeed be easier to do it only when required.
My strategy would be:
Keep track of the addresses you have added -- no point doing it twice.
From the address, get the LatLng.
get the map's current bounds (use getBounds() to get the min/max LatLng of the map currently displayed)
check whether the LatLng of the address is within the bounds.
if it is, add a marker.
Loop
If you really have a lot of addresses you might want to prefetch the LatLng and store that in an SQL table. You could then query the table with the intervals.
HTH
EDIT: some code. Assuming you have an Array() of markers, and the Northwest and Southeast boundaries, you could do this:
function filterMarkers(nw, se, myMarkers) {
var north=nw.lat();
var west=nw.lng();
var south=se.lat();
var east=se.lng();
var isInsideBounds=[];
for (var i in myMarkers) {
if(myMarkers[i].position.lat()>=north && myMarkers[i].position.lat()=<south && myMarkers[i].position.lng()>=west && myMarkers[i].position.lng()=<east) {
isInsideBounds.push(myMarkers[i]);
}
}
return isInsideBounds;
}