Hi ThinkGeo People!
Got the mini map working! Thanks to all on the forum for the help!
In setting up the mini map couple quick questions...
How would I make the mini map stay within a zoom level of 6 -14? I see the options to play around with Max and Min zoom ratios are these the correct parameters to set to attain this desired result? If not how would I get this result?
Thanks in advance,
Kevin
Hi, Kevin
The minRatio and maxRatio properties don’t any relationship with your requirements. The simplest way it to handle it through events that OpenLayers has provided for us.
Please refer to the codes below, and modify it depend on your scenario.
var miniMapControl;
var OnMapCreated = function (map) {
miniMapControl = map.getControl('OverviewMap');
miniMapControl.minimizeControl();
map.events.register("zoomend", map, function () {
var zoom = map.getZoom();
if (zoom >= 6 && zoom <= 16) {
miniMapControl.maximizeControl();
}
else {
miniMapControl.minimizeControl();
}
});
}
Thanks,
Khalil
Thanks Khalil for your response!
Do you have a C# example.
Thanks.
Kevin
Hi, Kevin
Thanks for your feedback. I made one simple sample using WorldMapKitWmsOverlay and also enable the MiniMap control firstly. Please give a try to it.
Thanks,
Khalil
GettingStarted_DisplayASimpleMap.zip (1.9 KB)
Hi Khalil,
Thanks for this example…But this isn’t the issue I was having. I don’t want to hide the mini map, I just want to make the mini map stay at a certain scale level. Is this possible?
For instance I will move the main map in and out, but I want the mini map to stay constant at zoomlevel06.
Thanks,
Kevin
Hi, Kevin
Ok, I have got your idea. There is some codes you need to override the base class in order to implement your scenario.
Please replace the JavaScript codes we had provided for you in the last post with the one below, and by default we have set it to stay at zoom level 6 but you can change it with ease.
var OnMapCreating = function (map) {
OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control.OverviewMap, {
updateOverview: function () {
var targetRes = this.map.getResolutionForZoom(6);
var center;
if (this.ovmap.getProjection() != this.map.getProjection()) {
center = this.map.center.clone();
center.transform(this.map.getProjectionObject(), this.ovmap.getProjectionObject());
} else {
center = this.map.center;
}
this.ovmap.setCenter(center, this.ovmap.getZoomForResolution(targetRes * this.resolutionFactor));
this.updateRectToMap();
}
});
}
If you have additional questions about it please feel free to let us know.
Thanks,
Khalil
Hey Kahalil!
Thanks for the help!
I combined the two pieces of code to achieve what I wanted… To display in the mini map specific scale levels depending on what scale levels you are at in the main map.
Example:
updateOverview: function() {
var targetRes;
var zoom = map.getZoom();
if (zoom < 6) {
targetRes = this.map.getResolutionForZoom(3);
}
else{
targetRes = this.map.getResolutionForZoom(4);
}
var center;
if (this.ovmap.getProjection() != this.map.getProjection()) {
center = this.map.center.clone();
center.transform(this.map.getProjectionObject(), this.ovmap.getProjectionObject());
}
else {
center = this.map.center;
}
this.ovmap.setCenter(center, this.ovmap.getZoomForResolution(targetRes * this.resolutionFactor));
this.updateRectToMap();
}
But the mini map is not completely updating when you change the scale levels on the main map and the value ‘targetRes’ changes to another value. For instance when I zoom in from 6 to 7 the scale on the map changes but it doesn’t completely refresh the map being displayed in the mini map and some of the old labels are still visible.
Any way to fix that?
Thanks in advance,
Kev
Hi, Kevin
Can you check whether the “updateOverview” method has been invoked? If so, I suggest that you try to set the zoom of mini map to a bigger value if the current zoom is bigger than 6? So that you can see the difference apparently.
var OnMapCreating = function (map) {
OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control.OverviewMap, {
updateOverview: function () {
var center;
if (this.ovmap.getProjection() != this.map.getProjection()) {
center = this.map.center.clone();
center.transform(this.map.getProjectionObject(), this.ovmap.getProjectionObject());
} else {
center = this.map.center;
}
var zoom = map.getZoom();
if (zoom < 6) {
zoom = 3;
}
else {
zoom = 4;
}
this.ovmap.setCenter(center, zoom);
this.updateRectToMap();
}
});
}
I also have checked the codes you have provided, and it works well. So if the problem still exists please provide us more information.
Thanks,
Khalil
Hey Khalil,
Thanks for the message. I’ll play around with it more, still having issues with ghost images from the previous mini map drawing at the other scale.
Anyway to update/refresh the mini map.
Thanks as always!
Kev
Hi, Kevin
Can you let us know whether the updateOverview method has been invoked?
This method is just used to update the mini map that will be called after a drag, pan, or zoom completes. I can’t figure it out why your web app can’t work. I think the better choice is that you provide us a simple sample that could re-produce the problem you have encountered. Also the version of WebEdition you are utilizing.
Thanks,
Khalil
Hey Khalil,
Thanks for the help on this topic but i’ve done a few changes to the javascript and c# on the website and a new problem has developed relating to the mini map…Not sure why!
The issue is now the mini map is zooming in again even though i’ve set the map to remain at a certain zoom level using the code above. One change I have done since is added code in the code behind “c#” that limits the zoom levels to 13 different levels using this code:
ZoomLevelSet newZoomLevelSet = new ZoomLevelSet();
Collection<ZoomLevel> zoomlevels = new Collection<ZoomLevel>();
Not sure if this would affect the code discussed above.
Is there anyway other options to make the minimap static at zoom level.
Thanks as always,
Kevin
Hi Kevin,
We can’t recreate the issue you mentioned. On the client side, we use the code Khalil provided above. The MiniMap is static even though we limit the zoom levels to 13 different levels using the following code:
ZoomLevelSet zoomLevelSet = new ZoomLevelSet();
Collection<ZoomLevel> zoomLevels = new Collection<ZoomLevel>();
zoomLevels.Add(zoomLevelSet.ZoomLevel01);
// Add ZoomLevel02~ZoomLevel12 to zoomLevels
zoomLevels.Add(zoomLevelSet.ZoomLevel13);
Map1.SyncClientZoomLevels(zoomLevels);
Could you please provide us a sample project that could recreate your issue?
Thanks,
Ivan
Hey Ivan,
If you provide a email address Ill send you the link to the current live project. Its still in BETA so I don’t want to post the live link here.
Cheers & Thanks,
Kevin
Hi Kevin,
From the link you sent to us, we find the updateOverview function never executed because the second OnMapCreating function overwrites the first one .
Please put the updateOverview section and buttonDown section into a single onMapCreating function. The sample code is below:
var OnMapCreating = function (map) {
OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control.OverviewMap, {
updateOverview: function () {
//...
}
});
OpenLayers.Control.PanZoomBar.prototype.buttonDown = function (evt) {
//...
}
}
Thanks,
Ivan
Awesome!!!
Thanks Ivan, worked like a charm…
I tried something like this, combining the function calls but I never tried the right combo…
Thanks so much for the info!
Kevin
Hi Kevin,
You’re welcome. Please feel free to ask us any questions while using ThinkGeo products. We will do our best to assist you.
Regards,
Ivan