ThinkGeo.com    |     Documentation    |     Premium Support

Set Minimap Utility outside Thinkgeo Map

#1

Hi,



I am using Minimap tool for Thinkgeo using below code:



tools.MiniMapMapTool().Enabled(True)



Now I want this utiliy in particular Div tag for HTML in the page (Outside Thinkgeo Map)



For understanding I am attaching image.







How can I do this?

#2

Hi Vivek, 



I think that you can get “MiniMapTool” div signature as following statements, but you can’t move out the map zone. 



<script language="javascript" type="text/javascript">


    var cloneNode;


    var
OnMapCreated = function mapCreated(e) {


        var a = Map1.getControlsByClass("OpenLayers.Control.OverviewMap");


        cloneNode =
a[0].div.cloneNode();


        cloneNode.id =
"overView1";


       
cloneNode.style.position = "absolute";


       
cloneNode.style.left = "50px";


       
a[0].div.style.left = "700px";


    }


</script>



Regards, 



Don

#3

Thanks Don…



It’s create just blank div…







#4

Hi Vivek, 
  
 This sample code just show how to find the minimap div and modify its position, but we still cannot move it out of the map area. 
  
 Regards, 
  
 Don

#5

Thanks Don…



Can possible to display current map-extent on div tag?

#6

Hi Vivek, 
  
 As below is the code to alert current extent when extent changed, you can put the result to your div tag instead of alert it. 
  
   var OnMapCreated = function mapCreated(map) { 
         tgMap = map; 
         tgMap.events.register(‘moveend’, null, function (evt) { 
             var currentExtent = map.getExtent(); 
             alert(currentExtent.toString()); 
         }); 
         tgMap.events.register(‘zoomend’, null, function (evt) { 
             var currentExtent = map.getExtent(); 
             alert(currentExtent.toString()); 
         }); 
     } 
  
 Regards, 
  
 Don

#7

Thanks Don… 
  
 It’s work 
  
 It display as -10310485.60834,-5092697.4647323,-291731.43834,92790.533412266, 
  
 Is it possible to convert it into ratio like 1:10 000 means in ratio? 
  
 And how it is done?

#8

Hi Vivek, 
  
 You can use map.getScale() to replace map.getExtent(), the scale means ratio, but you should want to convert the result to the format you need. 
  
 Regards, 
  
 Don

#9

Thanks Don its working…

#10

Hi Vivek,  
  
 I am glad to hear that works for you. 
  
 Regards, 
  
 Don

#11

Hi Vivek,



Are you able to move the mini map outside Thinkgeo Map? could you please share the codes?

#12

No guangming, As it is an inbuilt functionality of thinkgeo, so we can not move outside Thinkgeo Map. 
 You can just create a clone of map into DIV as example given by DON Above.

#13

Hi Vivek&Guangming,



I did an investigation and find out a flexible way to put any controls out of ThinkGeo map. Please try the blow codes:


<style>
        .olControlOverviewMap {
            background: #ff0000;
            width: 200px;
        }
 
        .olControlOverviewMapElement {
            background: #00ff00 !important;
        }
    </style>
    <script type=<code style=“color: blue;”>“text/javascript”<code style=“color: #000000;”>>
        OnMapCreated = function (map) {
            var defaultOverviewMap = map.getControlsByClass(“OpenLayers.Control.OverviewMap”);
            if (defaultOverviewMap) {
                map.removeControl(defaultOverviewMap[0]);
            }
            var external_control = new OpenLayers.Control.OverviewMap({
                div: document.getElementById(‘external_control’)
            });
            map.addControl(external_control);
        }
    </script>

From code, you can see, not only we can specify a div as the control container, we even can override its style. and in the end, we can get the such result:





If there is anything confused on those codes, please feel free to let us know.

Regards,

Troy

#14

Thanks Troy for the Sample…

#15

Vivek, 
  
 You are welcome. 
 If any other queries, please feel free to let us know. 
  
 Regards, 
 Troy

#16

Can we do this to Legend image in adornmentoverlay?

#17

Guangming, 
  
 Sorry to say, it is just fit for controls and the legend is built on adormentlayer. 
  
 Thanks, 
 Troy