Last post Mar 20, 2007 05:02 AM by Sohnee
Mar 19, 2007 09:16 AM|DesignStudio|LINK
I am working in an attendance system that gets the users' IPs and save the time they check in and out. I want to have a map as an image and locate the location of every user on the map.
Could you help please.
Mar 19, 2007 10:18 AM|Sohnee|LINK
This is a lot easier than it sounds - just make an image input -
<input type="image" src="map.jpg" name="location">
When the user clicks on the map, it will submit the page with the co-ordinates in the value of the location field - this is just a HTML feature - so you may want to check it works in FireFox - but it works in IE as I've implemented it.
One thing to note - you'll want to offset your "pinpoint" image slightly, as the click needs to be the "center" of the image, so if it's 5px x 5px, you'll want to shift it up and left by 2px each.
Mar 19, 2007 10:35 AM|Sohnee|LINK
Here's an old-skool ASP example I've thrown together to show you what I mean
<form method="post" action="test.asp">
Language = VBScript
LCID = 2057
' Option Explicit
Response.Buffer = True
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.CacheControl = "no-cache"
Response.Write("x --" & Request.Form("test.x"))
Response.Write(" y --" & Request.Form("test.y"))
Mar 20, 2007 03:56 AM|DesignStudio|LINK
Thanks Sohnee, but what I wanted to do is once the user logs in the system gets the IP and points or draws a circle on his/her location on the map. I do have a table in my database as ipdictionary that contains
all the IPs for our customers and their names. I can add new field in the data base for the customer's location, its coordinates on the map image. Then, when the user logs in the system gets the IP and search for the coordinates form the ipdictionary table
and draw a circle on the right location.
Do you think i can go with that logic?
Mar 20, 2007 05:02 AM|Sohnee|LINK
Yep - it's perfectly feasible!
The code above was based on an intrernal telephone directory listing, which also displayed the location of the person in the company.
You need to store both the x and y position in your database, then you just overlay a dot with the x and y position.... like this:
<div class="map"><image src="map.jpg"></div>
<div class="dot" style="position:absolute; z-index: 10; top: __; left __;"><image src="pointer.jpg"></div>
Where you're actually setting your top and left from the database.