ThinkGeo.com    |     Documentation    |     Premium Support

Maps get created multiple times when more than one map is loaded in the same page

Using MapSuite MVC 7.0, we’ve been having an issue with clicking to zoom on a map in that when a user clicked the map, it would zoom correctly and then zoom back out to the original extent after a short delay.  We traced this back to the fact that other maps were loading synchronously and, each time the next map loaded it triggered previously created maps to be created yet again.  For example:


        
  1. Map 1 loads, calls CreateAllMaps() function within script returned by helper_GeoResource.axd.  CreateAllMaps() executes with MultiMap value = {cMap1} 

  2.     
  3. Map 2 URL is called and, while it’s loading, user clicks Map 1 to zoom in.

  4.     
  5. Map 1 zooms in per user click.

  6.     
  7. Map 2 loads and calls CreateAllMaps(). CreateAllMaps executes with MultiMap value = { cMap2 }

  8.     
  9. CreateAllMaps fires yet again, this time with MultiMap now = {cMap1, cMap2}.  At which point CreateAllMaps() calls parser.createMap() for cMap1 it causes the users specified zoom to go back to the default zoom.

  10.     
  11. This process continues with subsequent maps, meaning when MapN loads, CreateAllMaps() runs one for MapN and then again for {Map1, Map2, Map3, …MapN}.  


We are loading the maps into the page by using jQuery ajax call and putting returned html of map partial into div container using $(‘containerId’).html(mapPartialContent).  We put a 2-second delay between maps because loading 4 maps without the delay caused the first map to have ‘pink tiles’.  This may also be related to maps being created multiple times.



Is there a way to prevent this behavior?



Hi Chuck,



Thanks for mention this issue and you are tracking on the right direction to narrow down the issue on CreateAllMap. You are correct and we modified this part by removing CreateAllmap with only creating the current map instead. We applied the modifications on the latest dll packages(8.0.0.161 or 8.0.161.0)



Besides, you mentioned you are using ajax call to load another map view, this is a good way, but there is a better way I think: we can define a MultiMapModel which includes multi maps, then we pass this model to the view and we take out the maps from the model. Some codes like the below:


Model:    
public class MultiMapModels
    {
        private Collection<Map> maps;
        public MultiMapModels()
        {
            maps = new Collection<Map>();
            Map map1 = new Map(“Map1”,
               
            map1.OnClientClick = “map1Click”;
 
            Map map2 = …
            Map map3 = …
            maps.Add(map1);
            maps.Add(map2);
            maps.Add(map3);
        }
 
        public Collection<Map> Maps
        {
            get { return maps; }
        }
    }
Controller:
        public ActionResult Index()
        {
            return View(new MultiMapModels());
        }
View:
    <div style=“width:500px;height:400px;background-color:red”>
         @{Html.ThinkGeo().Map(Model.Maps[0]).Render();}
    </div>
    <div style=“width:500px;height:400px;background-color:green”>
         @{Html.ThinkGeo().Map(Model.Maps[1]).Render();}
    </div>
    <div style=“width:500px;height:400px;background-color:blue”>
         @{Html.ThinkGeo().Map(Model.Maps[2]).Render();}
    </div>

I also attached the test sample with multi map, please check it.

Thanks,

Troy

MultiMapForMvc.zip (185 KB)