Simple Mapping System using PHP and JQuery

Language

In this tutorial, we are going to learn to learn how to make a drag and drop system and save its location. This is a simple project that you can use in your website or system.

DIRECTIONS

PUT THE LINKS INSIDE YOUR HEAD TAG

  1. <script src="jquery.min.js"></script>
  2. <script src="j2.js"></script> <!-- draggable js -->

CSS CODE

  1. <style>
  2. *
  3. {
  4. margin: 0;
  5. padding: 0;
  6. }
  7. .bg
  8. {
  9. width: 100%;
  10. margin-top: 41px;
  11.  
  12. }
  13. .lot
  14. {
  15. background-color: #000000;
  16. color: #ffffff;
  17. width: auto;
  18. max-width: auto;
  19. height: 20px;
  20. text-align: center;
  21. border-radius: 3px;
  22. cursor: pointer;
  23. padding: 0px 4px;
  24. position: absolute;
  25. text-shadow: 1px 1px 3px #000;
  26.  
  27. }
  28. .lot-btn
  29. {
  30. background-color: #5cb85c;
  31. color: #ffffff;
  32. width: auto;
  33. height: 25px;
  34. text-align: center;
  35. border-radius: 3px;
  36. position: absolute;
  37. cursor: pointer;
  38. padding: 2px 5px;
  39. top: -3px;
  40. right: 15px;
  41.  
  42. }
  43.  
  44. .back
  45. {
  46. right: 165px !important;
  47. background-color: #444 !important;
  48.  
  49. }
  50.  
  51.  
  52.  
  53. .fix
  54. {
  55. position: fixed !important;
  56. }
  57. .well
  58. {
  59. opacity: .9;
  60. width: 100%;
  61. top: 0px;
  62. z-index: 999991;
  63. }
  64.  
  65. #draggable {border:1px solid; width: 150px; height: 150px; padding: 0.5em; }
  66. </style>

HTML CODE

  1. <img src="map.png" class="bg"/>
  2. <?php
  3. $cemetery_lot_query = mysqli_query($con, "SELECT * FROM drag");
  4. while($cemetery_lot_row = mysqli_fetch_array($cemetery_lot_query))
  5. {
  6.  
  7. $drag_id = $cemetery_lot_row['drag_id'];
  8. $x_coordinates = $cemetery_lot_row['top'];
  9. $y_coordinates = $cemetery_lot_row['left'];
  10. $name = $cemetery_lot_row['name'];
  11. ?>
  12. $(function() {
  13.  
  14. $( "#draggablec<?php echo $drag_id ?>" ).resizable();
  15.  
  16. var coordinates = function(element) {
  17. element = $(element);
  18. var top = element.position().top;
  19. var left = element.position().left;
  20.  
  21. $('#results<?php echo $drag_id ?>').text('X: ' + left + ' ' + 'Y: ' + top);
  22. $('#left<?php echo $drag_id ?>').val(left);
  23. $('#top<?php echo $drag_id ?>').val(top);
  24.  
  25. }
  26.  
  27.  
  28. $("#sniper<?php echo $drag_id ?>").draggable({
  29. start: function() {
  30. coordinates('#sniper<?php echo $drag_id ?>');
  31. },
  32. stop: function() {
  33. coordinates('#sniper<?php echo $drag_id ?>');
  34. }
  35.  
  36.  
  37. });
  38.  
  39. });
  40. </script>
  41. #draggable<?php echo $drag_id; ?> {
  42. position: relative;
  43. left: -15px;
  44. }
  45.  
  46. </style>
  47.  
  48.  
  49. <div id="sniper<?php echo $drag_id ?>" style="position: absolute; top: <?php echo $x_coordinates; ?>px; left: <?php echo $y_coordinates; ?>px; z-index: 9999; height: 20px; width: 20px;">
  50.  
  51.  
  52. <div class="lot" style="background-color: #000;;"><?php echo $name; ?></div>
  53.  
  54.  
  55. </div>
  56.  
  57.  
  58. <form action="save.php" method="POST">
  59. <input type="hidden" name="top<?php echo $drag_id; ?>" id="top<?php echo $drag_id; ?>" value="<?php echo $x_coordinates; ?>">
  60. <input type="hidden" name="left<?php echo $drag_id; ?>" id="left<?php echo $drag_id; ?>" value="<?php echo $y_coordinates; ?>">
  61. <input type="hidden " name="drag_id1" value="<?php echo $drag_id; ?>" style="display: none;">
  62.  
  63. <?php } ?>
  64.  
  65.  
  66. <div class="container-fluid">
  67. <div class="row">
  68. <div class="well well-sm fix">
  69. <div class="col-lg-12">
  70. <button class="lot-btn btn" type="submit">Save Location<span class="glyphicon glyphicon-floppy-saved"></span></button>
  71.  
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </form>
  77.  
  78. </body>
So what can you say about this simple project? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

Add new comment