CharlesD


I'm am new to VE, so this should be a simple question.

I have a pushpin layer on my map, I would like to make this layer hidded until I hit zoom layer 14. How should I go about this

Thanks



Re: Pushpins hidden until specific zoom level?

Jared H


Have your script monitor the current map zoom level (onendzoom or such) and then for zoomLevel >= 14, call the ShowLayer method on your pin collection...and likewise HideLayer for <14.




Re: Pushpins hidden until specific zoom level?

CharlesD

Do you know of an example of this I can look at

Thanks





Re: Pushpins hidden until specific zoom level?

CharlesD

Here is my code. Could someone give me a few pointers as to why its not loading correctly

<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<script
src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>
var map = null;
function zoomControl( obj ) {
var currentZoom = obj.view.zoomLevel;
if(currentZoom > zoomMax) {
Map.AddLayer(preserves);
} else if(currentZoom < zoomMin) {
map.HideLayer(preserves);
}
}
function preserves()
{
var veLayerSpec = new VELayerSpecification();
veLayerSpec.Type = VELayerType.GeoRSS;
veLayerSpec.ID = 'Preserves';
veLayerSpec.LayerSource = 'http://s3.amazonaws.com/arc2earth1954390720/LTC_Preserves/georss.xml';
veLayerSpec.Method = 'get';
veLayerSpec.IconUrl = 'icon.png';
map.AddLayer(veLayerSpec);
}
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(45.58, -84.64), 7 ,'r' , false);
map.AttachEvent('onendzoom', function(obj) { zoomControl(obj); });
zoomMax = 19;
zoomMin = 7;
} </script>
</head>
<body onload="GetMap();">
<div id="myMap"
style="position: relative; width: 400px; height: 400px;"></div>
</body>
</html>





Re: Pushpins hidden until specific zoom level?

Derek Chan

Charles,

I've looked over the code and heres what I've observed:

1) An error is fired if you try to zoom out (to level 6 in this case) in which the HideLayer event will fire, but there is no layer (because I hadn't put the layer on yet) so it will throw an exception

2) You have a condition: if (currentZoom > zoomMax) then map.AddLayer(preserve). Well since zoomMax was set to 19, this condition will never fire (as the max zoom of the entire control is 19).

3) If I set zoomMax to a reasonable level, lets say 10, then an error will fail on this line:
Map.AddLayer(preserves);
because it should be a lowercase m on the Map variable so change it to:
map.AddLayer(preserves);

(javascript is case sensitive)

4) after that fix, you'll get another exception, because your passing in map.AddLayer(preserves) but preserves is not defined. What I suspect your looking for is to call the preserve function.

Below is a tweaked version of your code. I've added a lot of alerts to demonstrate what is going on. You should be able to zoom in to level 11 which will invoke the proper AddLayer. Also to note is that the HideLayer needs to be implemented with a line such as:
map.HideLayer(veLayerSpec);

but that variable needs to be declared outside of its scope so you can grab it and use it. Finally your referencing the V4 API and V5 has changed a few things with how GeoRSS layers are handled. Hope that helps things off.

Code Snippet
<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<script
src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>
var map = null;
function zoomControl( obj ) {
var currentZoom = obj.view.zoomLevel;
alert(currentZoom + " , " + zoomMax + " , " + zoomMin);
if(currentZoom > zoomMax) {
alert('hi');
preserves();
//map.AddLayer(preserves);
} else if(currentZoom < zoomMin) {
alert('hi2');
//map.HideLayer(veLayerSpec);
}
}
function preserves()
{
alert('preserves');
var veLayerSpec = new VELayerSpecification();
veLayerSpec.Type = VELayerType.GeoRSS;
veLayerSpec.ID = 'Preserves';
veLayerSpec.LayerSource = 'http://s3.amazonaws.com/arc2earth1954390720/LTC_Preserves/georss.xml';
veLayerSpec.Method = 'get';
veLayerSpec.IconUrl = 'icon.png';
map.AddLayer(veLayerSpec);
}
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(45.58, -84.64), 7 ,'r' , false);
map.AttachEvent('onendzoom', function(obj) { zoomControl(obj); });
zoomMax = 10;
zoomMin = 7;
} </script>
</head>
<body onload="GetMap();">
<div id="myMap"
style="position: relative; width: 400px; height: 400px;"></div>
</body>
</html>








Re: Pushpins hidden until specific zoom level?

CharlesD

I found I different way around to do it with V5, seems to work ok for what I need. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Virtual Earth API GeoRSS Sample</title>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx v=5"></script>
<script>
var map = null;
var geoRssLayer1 = null;
function test()
{
var z = map.GetZoomLevel();
if(z >= 14) {geoRssLayer1.Show();}
else if(z < 14) {geoRssLayer1.Hide();}
}
function onFeed1Load(layer)
{
var numShapes = layer.GetShapeCount();
for(var i=0; i < numShapes; ++i)
{
var s = layer.GetShapeByIndex(i);
s.SetCustomIcon("<img src='icon.png'/>");
}
}
function EventMapLoad()
{
geoRssLayer1 = new VEShapeLayer();
var geoRssLayerSpec1 = new VEShapeSourceSpecification(VEDataType.GeoRSS, "georssfeed.xml", geoRssLayer1);
map.ImportShapeLayerData(geoRssLayerSpec1, onFeed1Load, false);
}
function CreateMap()
{
map = new VEMap('myMap');
map.SetDashboardSize(VEDashboardSize.Small);
map.onLoadMap = EventMapLoad;
map.LoadMap(new VELatLong(45.41, -84.89), 7, VEMapStyle.Hybrid);
map.AttachEvent("onendzoom", test);
GetTiles();
geoRssLayer1.Hide();
}
function GetTiles()
{
var tileSourceSpec = new VETileSourceSpecification("lidar", "http://s3.amazonaws.com/arc2earth1954390720/LTC_Preserves/tiles/%4.png");
tileSourceSpec.NumServers = 1;
map.AddTileLayer(tileSourceSpec, true);
} function CheckBox1Clicked(cb)
{
if (cb.checked)
{
geoRssLayer1.Show();
}
else
{
geoRssLayer1.Hide();
}
}
</script>
</head>


<body onload="CreateMap();">

<div id="myMap" style="position: relative; width: 800px; height: 600px;"></div>

<div style="border: 1px solid black; background: rgb(255, 255, 255) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; margin-left: 5px; position: absolute; top: 9px; bottom: auto; height: 46px; left: 565px; right: auto; width: 220px;">
<div style="font-weight: bold;">Show/Hide Preserve Info
Layer &nbsp;</div>

<div><input id="CB1" onclick="CheckBox1Clicked(this)" type="checkbox">:<img src="icon.png" align="middle">Preserve Information</div>

</div>

</body>
</html>