How to Create a Clickable Map Using Your Own Custom Map Image

you can find co-ordinate of a specific location inside your image map by the help of ms-paint and then put into polygon or circle point.

<div style="float:left;width:960px;">
        <div style="float: left; width: 960px;">
            <img src="~/Images/CampingMap.png" style="width: 930px;" id="CampingMapImg" />
            <svg width="930px" height="800px" style="overflow: hidden; position: absolute; top: 0; left: 8px;">
                <polygon fill="#000000" fill-opacity="0.5" stroke="#000000" stroke-width="2" points="878,125 896,125 896,148 878,148" stroke-opacity="1" stroke-linejoin="round" data-campid="818" data-available="false" onclick="CampStatus(this);"></polygon>
                <polygon class="poly_avail" fill="rgba(188, 112, 112, 0.55)" fill-opacity="0.5" stroke="#000000" stroke-width="2" points="860,125 877,125 877,148 860,148" stroke-opacity="1" stroke-linejoin="round" data-campid="817" data-available="true" onclick="CampStatus(this);"></polygon>
                <polygon class="poly_avail" fill="rgba(188, 112, 112, 0.55)" fill-opacity="0.5" stroke="#000000" stroke-width="2" points="842,125 859,125 859,148 842,148" stroke-opacity="1" stroke-linejoin="round" data-campid="816" data-available="true" onclick="CampStatus(this);"></polygon>
                <polygon class="poly_avail" fill="rgba(188, 112, 112, 0.55)" fill-opacity="0.5" stroke="#000000" stroke-width="2" points="71,338 106,338 106,364 87,364 77,352" stroke-opacity="1" stroke-linejoin="round" data-campid="18" data-available="true" onclick="CampStatus(this);"></polygon>
                <circle class="poly_avail" cx="649" cy="67" r="16" stroke="black" stroke-width="3" fill="rgba(188, 112, 112, 0.55)" data-campid="902G" data-available="true" onclick="CampStatus(this);" />
                <circle class="poly_avail" cx="605" cy="87" r="16" stroke="black" stroke-width="3" fill="000000" data-campid="901G" data-available="false" onclick="CampStatus(this);" fill-opacity="0.5" />
            </svg>
            <script type="text/javascript">
                $(window).load(function () {
                    debugger;
                    $('svg').css("top", $('#CampingMapImg').position().top + "px").css("left", $('#CampingMapImg').position().left + "px");
                });
                $(document).ready(function () {
                    $('.poly_avail').hover(function () {
                        $(this).attr("fill", "rgba(70, 136, 231, 0.55)");
                    }, function () {
                        $(this).attr("fill", "rgba(188, 112, 112, 0.55)");
                    });
                });
                function CampStatus(current) {
                    var currentSelected = $(current);
                    //if (currentSelected.attr("data-available") == "true") {
                    //    alert("This is Camp No: " + currentSelected.attr("data-CampID") + " and this area is available.");
                    //}
                    //else if (currentSelected.attr("data-available") == "false") {
                    //    alert("This is Camp No: " + currentSelected.attr("data-CampID") + " and this area is not available.");
                    //}
                   
                }
            </script>
        </div>
    </div>

Comments

Post a Comment

Popular posts from this blog

How to create RSS Feed in Asp.Net

using System; using System.Data; using System.Configuration; using System.Data.SqlClient; using System.Text; using System.Xml; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string connectionString = ConfigurationManager.ConnectionStrings["TestConnection"].ConnectionString; DataTable dt = new DataTable(); SqlConnection conn = new SqlConnection(connectionString); using (conn) { SqlDataAdapter ad = new SqlDataAdapter("SELECT * from tblRSS", conn); ad.Fill(dt); } Response.Clear(); Response.ContentType = "text/xml"; XmlTextWriter TextWriter = new XmlTextWriter(Response.OutputStream, Encoding.UTF8); TextWriter.WriteStartDocument(); //Below tags are mandatory rss tag TextWriter.WriteStartElement("rss"); TextWriter.WriteAttributeString("versio...
Read more

Auto generate change scripts in SQL Server Management Studio SSMS for tables

Image
Problem As a part of my best practices, I always save the T-SQL scripts used for creation and modification of objects in SQL Server. When creating and modifying tables using SQL Server Management Studio designer it is easy to right click in the designer and select "Generate Change Script...", but is there a way to automatically script the creation and/or modification of tables made through of SQL Server Management Studio (SSMS) designer?  This tip shows you an option that exists within SSMS to automatically generate these scripts for all table changes when using the table designer. Solution Within SQL Server Management Studio (SSMS) there is an option to automatically generate scripts for your changes done through the GUI.  The solution for this problem is provided in SSMS and works with both SQL Server 2005 and SQL Server 2008, but by default this option that we will discuss is disabled. To enable the option From the SSMS menus click on "Tools"  ...
Read more

HOW TO Use the NumericUpDown Control

HOW TO Use the NumericUpDown Control  Great help taken from  http://www.asp.net/ajaxlibrary/HOW%20TO%20Use%20the%20NumericUpDown%20Control.ashx NumericUpDown Demonstration NumericUpDown Description NumericUpDown is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to add "up" and "down" buttons that increment and decrement the value in the TextBox. The increment and decrement can be simple +1/-1 arithmetic, they can cycle through a provided list of values (like the months of the year), or they can call a Web Service to determine the next value. Page authors can also provide custom images to be used instead of the default up/down button graphics. Video - How Do I: Use the ASP.NET AJAX NumericUpDown Control? NumericUpDown Client Code Sample view plain copy to clipboard print ? < script   runat = "server" >        [System.Web.Services.W...
Read more