jMapPoint

jQuery code for generating point on map or images

jMapPoint

Introduction

One of our client want to create application, where He will be ablo to add points to
Shopping Centre maps. I was looking for good implementation with jQuery but
I can' find any. So i've decided to create it my own way.
For that purpose I was google around net and i found very interesting post:
Building an inivteracte map with jQuery instead of Flash
.
I realise that I can use an idea to create map point and integrate Shopping Centre
maps to application.

Live demo

Here is an examples of using jMapPoint code:

Using jMapPoint code

Installation

jMapPoint code give you many abilities to create your own, usefull application for
generating points on map or images. To do that, You must include latest
jQuery
and jQuery UI to <head> section.



Now, we must include map, where we put our points or markers:

Basic usage

So, we have our map put to our application. Now, for basic usage we create points
(or marker as point icons) and activate adding points to map by clicking to it:
$(document).ready(function() {
    var point_arr = new Array();
    var point_selected = false;
    var point_count = 0;
    
    function Point(){
        this.id = '';
        this.x;
        this.y;
        this.url = 'images/map/marker.png';
        this.width = 20;
        this.height = 34;
    }
    
    $.fn.addPoint = function(x,y) {
        //Create new object
        if (!point_arr[point_count]) {
            point_obj = new Point();
            point_arr[point_count] = point_obj;
        }
        curr_point = point_arr[point_count];

        //Set methods for point
        var posX = x - (curr_point.width/2);
        var posY = y - (curr_point.height/2);
        point_count++;
        curr_point.id = point_count;
        curr_point.x = posX;
        curr_point.y = posY;
        
        html = '<';    
        html+= 'img class="zoomable" src="';
        html+= curr_point.url;
        html+= '" id="point_';
        html+= point_count;
        html+= '" alt="';
        html+= curr_point.title;
        html+= '" title="';
        html+= curr_point.title;
        html+= '" />';

        
        $(html).css({
            border: 'none',
            position: 'absolute',
            width: curr_point.width,
            height: curr_point.height,
            left: posX + 'px',
            top: posY + 'px',
            cursor: 'pointer'
        })
        .click(function(event) {
            point_selected = true;
        })
        .appendTo('#map');
    }    
    
    $('#map').click(function(event) {
        if (point_selected == false) {
            $(this).addPoint(x, y);          
        }
    })
    
});
Now we have all functions added point to map by clicking to it.

Adding, drag, remove points from map

For managing allp points on map, we modify our function - addPoint. For example like this:
    $.fn.addPoint = function(x,y) {
        if (!point_arr[point_count]) {
            point_obj = new Point();
            point_arr[point_count] = point_obj;
        }
        curr_point = point_arr[point_count];

        //Set methods for point
        var posX = x - (curr_point.width/2);
        var posY = y - (curr_point.height/2);
        point_count++;
        curr_point.id = point_count;
        curr_point.x = posX;
        curr_point.y = posY;

        html = '<';    
        html+= 'img class="zoomable" src="';
        html+= curr_point.url;
        html+= '" id="point_';
        html+= point_count;
        html+= '" alt="';
        html+= curr_point.title;
        html+= '" title="';
        html+= curr_point.title;
        html+= '" />';
        
        $(html).css({
            border: 'none',
            position: 'absolute',
            width: curr_point.width,
            height: curr_point.height,
            left: posX + 'px',
            top: posY + 'px',
            cursor: 'pointer'
        }).draggable({
            stop: function(event, ui) {
                //Update X and Y position of element
                var x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("map").offsetLeft;
                var y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("map").offsetTop;
                var point_id = this.id.substr(6);
                point_arr[point_id-1].x = x;
                point_arr[point_id-1].y = y;
            }
        })
        .click(function(event) {
            point_selected = true;
        })
        .bind('mouseover mouseleave mousedown', function(e, elem) {
            if (e.type == 'mouseover') {
                point_selected = true;
            } else {
                point_selected = false;
            }               
            if (e.which === 3) { //Right mouse click
                if (confirm('Do you want to remove points from map?')) {
                    $(this).remove();
                }
            }
        })
        .appendTo('#map');
    }

Adding contextMenu and datepicker to point

We can use many other plugins to use jMapPoint code. For example, I'll use
contextMenu (right click on created point) and datepicker, which will be open by
contextMenu in nice popup box.
    $.fn.addPoint = function(x,y) {
        //Create new object
        if (!point_arr[point_count]) {
            point_obj = new Point();
            point_arr[point_count] = point_obj;
        }
        curr_point = point_arr[point_count];

        //Set methods for point
        var posX = x - (curr_point.width/2);
        var posY = y - (curr_point.height/2);
        point_count++;
        curr_point.id = point_count;
        curr_point.x = posX;
        curr_point.y = posY;
        
        //Create datepicker element for object in popup
        $('#map .popup')
        	.append('
' ) .append('
' ); html = '<'; html+= 'img class="zoomable" src="'; html+= curr_point.url; html+= '" id="point_'; html+= point_count; html+= '" alt="'; html+= curr_point.title; html+= '" title="'; html+= curr_point.title; html+= '" />'; $(html).css({ border: 'none', position: 'absolute', width: curr_point.width, height: curr_point.height, left: posX + 'px', top: posY + 'px', cursor: 'pointer' }).draggable({ stop: function(event, ui) { //Update X and Y position of element var x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("map").offsetLeft; var y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("map").offsetTop; var point_id = this.id.substr(6); point_arr[point_id-1].x = x; point_arr[point_id-1].y = y; } }) .contextMenu( 'menu_map', { bindings: { 'calendar': function(t) { var point_id = t.id.substr(6); curr_point = point_arr[point_id-1]; //alert(curr_point.x); point_selected = true; $('#map .popup').fadeOut(); $('#map .popup').fadeIn(); // ---- DATEPICKER ---- //Hide other datepickers $('.datepicker').hide(); //Set datepicker $('#datepicker'+point_id).show(); $('#datepicker'+point_id).datepicker({ numberOfMonths: 3 }); //Close popup $('a.close').click(function(){ $(this).parent().fadeOut(500, "linear", function(){ point_selected = false }); }); }, 'delete': function(t) { if(confirm('Do you want to delete point from map?')) { var point_id = t.id.substr(6); point_index = point_id-1; curr_point = point_arr[point_index]; point_count--; $(t).remove(); } } } }) .click(function(event) { point_selected = true; }) .bind('mouseover mouseleave', function(e) { if (e.type == 'mouseover') { point_selected = true; } else { point_selected = false; } }) .appendTo('#map');

Download

Code to download: jMapPoint.zip

Conclusion

I was looking for this code for a long time and when I couldn't find it, I created my own
and I think, this code will be also helpfull for You. You can use this code as an open source.
If You like this code and it is usefull for you, please recompense Us time spending for
create this code by give as a donation. Thank and wish You easy integrating code to
Your applications.