Simple Mapping System using PHP and JQuery PHP Script


Simple Mapping System using PHP and JQuery PHP Script

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

 

HTML CODE

 
 
  1. <body>
  2. <img src="map.png" class="bg"/>
  3. <?php
  4.                                                                   $cemetery_lot_query = mysqli_query($con, "SELECT * FROM drag");
  5.                                                                   while($cemetery_lot_row = mysqli_fetch_array($cemetery_lot_query))
  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. <script>
  13. $(function() {
  14. $( "#draggablec<?php echo $drag_id ?>" ).resizable();
  15. var coordinates = function(element) {
  16. element = $(element);
  17. var top = element.position().top;
  18. var left = element.position().left;
  19. $('#results<?php echo $drag_id ?>').text('X: ' + left + ' ' + 'Y: ' + top);
  20. $('#left<?php echo $drag_id ?>').val(left);
  21. $('#top<?php echo $drag_id ?>').val(top);
  22. }
  23. $("#sniper<?php echo $drag_id ?>").draggable({
  24. start: function() {
  25. coordinates('#sniper<?php echo $drag_id ?>');
  26. },
  27. stop: function() {
  28. coordinates('#sniper<?php echo $drag_id ?>');
  29. }
  30. });
  31. });
  32. </script>
  33. <style>
  34. #draggable<?php echo $drag_id; ?> {
  35. position: relative;
  36. left: -15px;
  37. }
  38. </style>                        
  39.                   <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;">
  40.                         <div class="lot" style="background-color: #000;;"><?php echo $name; ?></div>
  41.                   </div>
  42.                               <form action="save.php" method="POST">
  43.                               <input type="hidden" name="top<?php echo $drag_id; ?>" id="top<?php echo $drag_id; ?>" value="<?php echo $x_coordinates; ?>">
  44.                               <input type="hidden" name="left<?php echo $drag_id; ?>" id="left<?php echo $drag_id; ?>" value="<?php echo $y_coordinates; ?>">
  45.                               <input type="hidden      " name="drag_id1" value="<?php echo $drag_id; ?>" style="display: none;">
  46.                                                             <?php } ?>
  47.                   <div class="container-fluid">
  48.                         <div class="row">                        
  49.                               <div class="well well-sm fix">
  50.                                     <div class="col-lg-12">
  51.                                           <button class="lot-btn btn" type="submit">Save Location<span class="glyphicon glyphicon-floppy-saved"></span></button>
  52.                                     </div>      
  53.                               </div>
  54.                         </div>
  55.                   </div>
  56.                               </form>            
  57. </body>

 

 

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *

"