I am using the Decarta JS API. I am displaying a map with layers. I want to refresh the map and redraw new layers, but I see no way to do this in the documentation.
Is there a way to refresh the map using the API?
If you just want to refresh a single overlay and not the entire map, you can do this:
myOverlay.render(myMap.tileGrid);
Assuming of course myMap is a deCarta.Core.Map and myOverlay is a deCarta.Core.MapOverlay.
If the size of map container changed, you need to do the following so that the required tiles are loaded after the resize:
myMap.resize();
Using JQuery, I am able to accomplish my desired results by simply removing all children from the designated container the map is added to:
$('#mapContainer').empty();
I feel this is a crude way to handle this functionality and am hoping someone knows a more elegant way.
Related
Leaflet JS - Is it possible query?
In a nut shell, what I am trying to do is this:
Using the latest version of Leaflet JS, I want to know if its possible to have multiple markers, in a single location, display in a single popup.
No, it's not possible.
You should pre-process your data beforehand, so that several data points with the same coordinates collapse into the same marker & popup.
In other words: iterate through your data points, and for every data point check if a marker exists in that location. If it does, add data to the marker's properties or popup; if it doesn't, create a new marker. The specific algorithm will depend on the nature of your data. You might also want to use a more complex data structure, such as r-trees, if your data set is large.
There's also the quick&dirty option of using marker clusters, disabling spiderifying, then using custom code for the event handlers of the cluster marker. That's pretty much the same algorithm defined above, only that the marker cluster algorithm takes care of locating nearby data points.
I made a similar map, and exactly as described by Ivan, I used markerCluster plugin and on cluster click action disabled the spiderfy. I then used 'custom code for the event handlers of the cluster marker' to show multiple markers' data in one single outside div.
An example can be found here .
And there is a tutorial describing exactly what you are looking for here, but also using markerCluster js.
Hope it can help others people too !
So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol
My client wanted me to update his Google map to a 'new' one, which looks like this: http://snag.gy/McZSd.jpg. Is there any setting used?
I think what you want to look at is Google Map's map types
Assuming your client's Google map is a JS map, the first step is to turn on visual refresh to get the new colors and fonts: https://developers.google.com/maps/documentation/javascript/examples/map-simple-refresh
As to building new style UI controls over a full bleed map, that is going to require you to spend some time in HTML and CSS land. =)
I have a leaflet map embedded in my page, but I want to add a control to allow the div with the leaflet map to be resized by the user. I've tried plugins like jquery.ba-resize, twinhelix and one other, but I can't seem to get something working that will allow me to have a button near the div with the leaflet map in it and to resize it on the fly.
Does anyone have any ideas?
Looks like I found an easy answer, I just took the id of my map ('map', creative), and did
$('#map).resizable();
with a jquery-ui plugin on the page.
Good enough for what I wanted!
I wanted to ask if anyone knows how to move map from one div to another. Why you would ask... let's say i created complex map, with many tools, letting user to add markers, lines, polygones, save the map position, add infowindows and much more. I am using one div to show the map - all objects are downloaded from database, and put on the map. Then when i press the "change map" button, i get the popup (yeah, that's what i want, i don't want new window) and there is the same map, but with tools which let you to edit it. The problem is, i am atm using same div id, and i am afraid there is some conflict, as my tools are working till i wont refresh map. I am afraid that its because the map below popup is still somehow active, and these functions i am using on the popup map, are used on both? And messing things up?
Or is there a way, to close the map completely, lets say i got a div with a map, and after pushing the button, the map disappears/is closed and i see the div it was in?
I've tried messing around with
"mapa = new google.maps.Map(document.getElementById("map_div"), mapOptions);
but i just don't know what to do to make the old div gone/inactive/not used.
using same line, just changing div, will create map in both dives, and all functions are made on second map created, so that not a solution.
Moving a map to another div is simple, it's just a matter of manipulating the DOM tree. See answer to this map cloning question.