ThinkGeo.com    |     Documentation    |     Premium Support

Map Resizing

#1

Hello,



We are using Map Suite MVC 8, is it possible to resize the map based on input from the client using AJAX calls?



We are using Kendo UI in our project, and I have setup a page that contains an AVL map and a Manifest using a Kendo Splitter to allow the user to determine the size of the map and table. As the user uses the splitter to change the size of the areas being displayed, I would like to redraw the map to avoid having any scroll bars. I have tried passing the desired size back from the client to the server via AJAX, updating the map object on the server, and then in the callback calling map.updateSize(), but I cannot get it to redraw at the new size. I suspect I am leaving out a step on either the client or server, or perhaps going about this in the wrong fashion.



Here is the relevant code :


function resizeMap(height, width) {
    var params = {
        mapHeight:height,
        mapWidth: width,
    };
 
    try{
        mapObject.ajaxCallAction(mapController, “ResizeMap”, params, resizeMapCallback);
    }
    catch (error) {
        alert(error.message);
    }
}
 
function resizeMapCallback(response) {
    if (response != null) {
        try {
            mapObject.updateSize();
        }
        catch (error) {
            alert(error.message);
        }
    }
}


    [HttpPost]
    [MapActionFilter]
    public void ResizeMap(Map map, GeoCollection<object> args)
    {
        if (args != null && args.Count > 0)
        {
            double height, width;
 
            double.TryParse(args[0].ToString(), out height);
            double.TryParse(args[1].ToString(), out width);
 
            map.Height = new System.Web.UI.WebControls.Unit(height);
            map.Width = new System.Web.UI.WebControls.Unit(width);
 
        }
    }
}


#2

Hi Michael, 
  
 I am sorry I don’t know more about make our map work with Kendo UI. 
  
 It looks your call OpenLayers API updateSize after call back, I think you should want to call redraw(true) for your layers after that. 
  
 Please let me know whether that works for you. 
  
 Regards, 
  
 Don

#3

No worries about not knowing about Kendo UI. That was being stated more so that you have an idea of what I am doing. This issue occurs without even attempting to incorporate the Kendo UI widget. 
  
  It looks your call OpenLayers API updateSize after call back, I think you should want to call redraw(true) for your layers after that.  
  
 That does not work. I did notice that the Map’s WidthInPixels and HeightInPixels properties are still showing the original values from when the map was created after I update the Map’s Width and Height properties.

#4

Hi Michael, 
  
 I talk about Kendo UI because I thought I need to use the library to reproduce it. 
  
 Thanks for your information, I will do some work for reproduce it and see how to solve that. 
  
 Regards, 
  
 Don

#5

Hi Michael,



Changing the server side map size can’t affect the client side map size as they are isolated after the page loaded . So, we don’t need to do an Ajax call to change the server side map size.



We only need to client side map element size with js codes, please follow the below codes, you can also find the whole source codes from MapSuiteUsEarthquakeStatistics sample in product center=>ready-functions.js.




var resizeElementHeight = function () {
    var documentheight = $(window).height();
    var contentDivH = documentheight - $("#footer").height() - $("#header").height() - 1;
    $("#content-container").height(contentDivH + “px”);
 
    $("#leftContainer").height(contentDivH + “px”);
    $("#map-content").height(contentDivH + “px”);
    $("#toggle").css(“line-height”, contentDivH + “px”);
 
    var mapDivH = contentDivH - $("#resultContainer").height();
    $("#mapContainer").height(mapDivH + “px”);
 
    // refresh the map.
    Map1.updateSize();
}
 
window.onload = resizeElementHeight();
$(window).resize(resizeElementHeight);

Thanks,



Troy

#6

Hi Michael, 
  
 I asked about our developer, he thought it looks you should have a mistake on understanding Mvc Map, if you want to resize the map size, you should write the js code to changes the size only as following statements: 
  
 function resizeMap(height, width) { 
 mapObject.div.style.width = “1000px”; 
 mapObject.div.style.height = “200px”; 
 } 
  
  
 This don’t related with server side, if we missed any important information please let us know. 
  
 Regards, 
  
 Don

#7

This is not working. I have a simple demo project that I put together to show this. Unfortunately the file is too large to upload. What should I do?

#8

Michael,



Please send email to support@thinkgeo.com, they will create a ftp account for you. 



There is a guide on how to send data. wiki.thinkgeo.com/wiki/Map_S…to_Support



Thanks,

Troy

#9

I actually managed to get the project size down enough for the zipped file to be attached by deleting the /obj and /bin directories and using a different compression algorithm for the zip file.  In order to help cut down the upload size I used NuGet packages for jQuery and other libraries. The reference to MapSuiteCore, MvcEdition, and NetTopologySuite will need to be updated, as I did not include those dlls to conserve space. We are specifically using version 8.0.336.0 of the Map Suite dlls.

MapResizing.zip (1.08 MB)

#10

Hi Michael,



Thanks for the sample, It is easy to see the issue with it. Here are two options to fix the issue:

1. using the below codes:


$("#mapContainer").height(height);
$("#mapContainer").width(width);
$(Map1.div).height(height);
$(Map1.div).width(width);
 
Map1.updateSize();

2. In the server side, using percentage rather than pixel for the map.




            System.Web.UI.WebControls.Unit mapWidth = new System.Web.UI.WebControls.Unit(100, System.Web.UI.WebControls.UnitType.Percentage);
            System.Web.UI.WebControls.Unit mapHeight = new System.Web.UI.WebControls.Unit(100, System.Web.UI.WebControls.UnitType.Percentage);
 
<div id="mapContainer" style="height:700px;width:1550px">
    @Html.ThinkGeo().Map(Model).Render()
</div>

Hope it works for you.



Thanks,



Troy

#11

Thanks Troy,



I got this to work by changing over to using  percentages instead of specific pixel sizes and setting the default dimensions on the div containing the map as in your second option. I then used the following code for re-sizing the map.




function resizeMap(height, width) {
    //Change the dimensions of the map container.
    $("#mapContainer").height(height).width(width);
 
    //Refresh the map.
    mapObject.updateSize();
 
    //Zoom to the current map extent after changing the size.
    mapObject.zoomToExtent(currentExtent);
 
    //Redraw the layers.
    for (var i = 0; i < mapObject.layers.length; i++) {
        mapObject.layers.redraw(true);
    }
}


1 Like
#12

Hi Michael,



Great to hear it works. Any other questions, don’t hesitate to let us know.



Thanks,



Troy