Register  | Login

Semi Transparent Map Legend

Last post 8/31/2009 9:51:16 PM by awegele. 2 replies. << Back to Web.Maps.VE v2.0 General
8/18/2009 3:50:42 PM
awegele

Semi Transparent Map Legend

I have a requirement to display a map legend that explains what each unique pushpin represents.  It should overlay the map and be semi transparent.  It should be collapsible to a small label that can be toggled to expand or collapse.  Is there any functionality in the map control itself that could meet this requirement?

Any help or examples will be greatly appreciated.
8/19/2009 7:52:52 AM
Chris Pietschmann

Re:Semi Transparent Map Legend

There isn't any functionality built into the control to add a custom map legend, but it is fairly simple to implement. Below is the code to wire up a simple example of doing this:

MapLegendPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapLegendPage.aspx.cs" Inherits="MapLegendPage" %>
<%@ Register Assembly="Simplovation.Web.Maps.VE" Namespace="Simplovation.Web.Maps.VE" TagPrefix="Simplovation" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
       
        <Simplovation:Map runat="server" ID="Map1" Width="700px" Height="425px" CssClass="map" OnClientMapLoaded="Map1_ClientLoaded" />
       
        <asp:Button runat="server" ID="btnAddLegendItems" OnClick="btnAddLegendItems_Click" Text="Add Legend Items" />
       
        <script type="text/javascript">
            function Map1_ClientLoaded(sender) {
                // Get reference to the Map Legend below
                var legend = $get("divMapLegend");
               
                // Create "legendContainer" to be added to the Map
                var legendContainer = document.createElement("div");
                legendContainer.id = "Map1_LegendContainer";
               
                // Position the Legend in the Upper Right corner of the Map
                legendContainer.style.top = "5px";
                legendContainer.style.left = "495px";

                // Move the Legend Below to be within the new "legendContainer"
                legendContainer.appendChild(legend);

                // Add the "legendContainer" to the Map
                window.setTimeout(function() {
                    sender.get_Map().AddControl(legendContainer);
                }, 100);
            }

            function toggleMapLegendVisibility() {
                var legendContent = $get("divMapLegend_Content");
                legendContent.style.display = (legendContent.style.display == "" ? "none" : "");
            }
        </script>
       
        <!--
        Below is a sample Map "Legend" to be shown over the map.
        Clicking on the "Legend" Header will toggle the display of the Legend Items.
        -->
        <div id="divMapLegend">
            <div id="divMapLegend_Header" onclick="toggleMapLegendVisibility();">
                <strong>Map Legend</strong>
            </div>
            <div id="divMapLegend_Content">
                <!-- You can statically define the legend items like this...
                <img src="house.jpg" /> Residential Property<br />
                <img src="commercial.jpg" /> Commercial Property<br />
                <img src="school.jpg" /> Public School<br />
                <img src="hospital.jpg" /> Hospital<br />
                ... Or you can dynamically display them like below...
                -->
                <asp:UpdatePanel runat="server">
                    <ContentTemplate>
                        <asp:Literal runat="server" id="litLegendItems"></asp:Literal>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btnAddLegendItems" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
        </div>
        <style type="text/css">
            #divMapLegend
            {
                border: solid 1px black;
                width: 200px;
                background-color: #fff;
               
                filter:alpha(opacity=70);
                -moz-opacity:0.7;
                -khtml-opacity: 0.7;
                opacity: 0.7;
            }
            #divMapLegend_Header
            {
                width: 100%;
                border-bottom: solid 1px black;
                background-color: #000;
                color: #fff;
            }
            #divMapLegend_Content
            {
                width: 100%;
            }
        </style>
   
    </div>
    </form>
</body>
</html>

MapLegendPage.aspx.cs

public partial class MapLegendPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            litLegendItems.Text = getLegendItemHtml("Residential Property", "/residential.jpg") +
                getLegendItemHtml("Commercial Property", "/commercial.jpg") +
                getLegendItemHtml("Public School", "/school.jpg") +
                getLegendItemHtml("Hospital", "/hospital.jpg");
        }
    }

    protected void btnAddLegendItems_Click(object sender, EventArgs e)
    {
        litLegendItems.Text = litLegendItems.Text +
            getLegendItemHtml("Another Legend Item", "/item.jpg");
    }

    private string getLegendItemHtml(string text, string imageUrl)
    {
        return string.Format("<img src='{1}'/> {0}<br/>", text, imageUrl);
    }
}
8/31/2009 9:51:16 PM
awegele

Re:Semi Transparent Map Legend

Thanks Chris.  I read your response earlier but didn't have time to respond and thank you.
© 2010 Simplovation LLC. All rights reserved.
Simplovation Home   |   Blog   |   Products   |   Contact Us   |   Terms of Use