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

Executing PowerShell scripts from C#

Image
Please refer the original post from here http://blogs.msdn.com/b/kebab/archive/2014/04/28/executing-powershell-scripts-from-c.aspx I n today’s post, I will demonstrate the basics of how to execute PowerShell scripts and code from within a C#/.NET applications. I will walk through how to setup your project prerequisites, populate the pipeline with script code and parameters, perform synchronous and asynchronous execution, capture output, and leverage shared namespaces. Update 8/7/2014 : Here is the downloadable solution file. Update 11/5/2014 : Added a section on execution policy behavior. Prerequisites: First, ensure that PowerShell 2.0 or later is installed on the system you are developing on. The features used below will not be supported on PowerShell 1.0. Next, start by making a new console application (targeting .NET 4.0) in Visual Studio. In the solution explorer, add a project reference to the System.Management.Automation assembly * . On my machine (PowerShe...
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

Exposing Agile Software Development Myths

Agile development is a movement that started 11 years ago and now is a commonplace discussion for software development teams. Prior to the signing of the Agile Manifesto in Utah in 2001 [endnote 1], the world was using a phased methodology called “Waterfall,” introduced (but not named) by Winston W. Royce [2], ironically trying to explain why that methodology was a bad idea. The methodology forced the completion of a phase in order to continue with the next one. That caused some problems since, no matter how hard the developers tried to gather all requirements and create a full system design, there was always the need in the following phases to go back and change things. Those regressions had a big impact on cost. The Agile principles tried to eliminate all the rigidity of Waterfall by focusing on more productive tasks, like working code over comprehensive documentation, adding more customer collaboration, enforcing individual interactions instead of tools and being a...
Read more