Google Ads

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>

 

 


Related Post

PHP Mobile Apps Marketplace PHP Script PHP Mobile Apps Marketplace PHP Script PHP Mobile Apps Marketplace is the platform where iOS & Android application sellers & buyers meet. ...
Examination Management System PHP Script Examination Management System PHP Script Online Examination Management System Using PHP/MySQL This project is powerful exam management system usin...
Online Diary PHP Script Online Diary PHP Script This is an online diary developed using php and mysql. users can register and create daily/weekly/yearly events,create con...
Surfow V2.0 – Traffic Exchange System PHP Sc... Surfow V2.0 - Traffic Exchange SystemSurfow V2.0 - Traffic Exchange SystemSurfow is a smart system for traffic exchange, using autosurf function and a...
TileBox – Modern Responsive LightBox CSS PHP... TileBox - Modern Responsive LightBox CSSTileBox - Modern Responsive LightBox CSSTileBox – Modern Responsive LightBox CSS is a small CSS plugin that ...

Have any Question or Comment?

Leave a Reply

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

"