jMapPoint
jQuery code for generating point on map or images
Introduction
One of our client want to create application, where He will be ablo to add points toShopping 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.
'
)
.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