API tools faq
paste
Advertisement
Guest User

GM_Edit_Poly

a guest
Jan 26th, 2017
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.         <meta charset="UTF-8">
  6.         <title>Test</title>
  7.         <script type="text/javascript"
  8.        src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing,places"></script>
  9.         <style type="text/css">
  10.             #map, html, body {
  11.                 padding: 0;
  12.                 margin: 0;
  13.                 width: 100%;
  14.                 height: 100%;
  15.             }
  16.  
  17.         #geoinfoboxes {
  18.         //display: none;
  19.             }
  20.  
  21.     #delete-button {
  22.                 position: absolute;
  23.                 margin-top: 5px;
  24.         right: 0.5%;
  25.         z-index: 5;
  26.         text-align: center;
  27.         border: none;
  28.             border-radius: 30px 30px 30px 30px;
  29.         font-family: 'Roboto','sans-serif';
  30.                 font-size: 100;
  31.         //line-height: 40px;
  32.                 width: 200px;
  33.                 height: 35px;
  34.           }
  35.  
  36.     #center-palette {
  37.         position: absolute;
  38.         //top: 1.5%;
  39.         //left: 53.5%;
  40.         z-index: 5;
  41.         //padding: 5px;
  42.         //text-align: center;
  43.         //font-family: 'Roboto','sans-serif';
  44.         //line-height: 30px;
  45.         //padding-left: 10px;
  46.             }
  47.  
  48.             #color-palette {
  49.                 clear: both;
  50.             }
  51.  
  52.             .color-button {
  53.             border-radius: 30px 30px 30px 30px;
  54.         position: relative;
  55.                 width: 14px;
  56.                 height: 14px;
  57.                 font-size: 0;
  58.                 float: right;
  59.                 margin-top: 10px;
  60.                 cursor: pointer;
  61.             }
  62.  
  63.       .controls {
  64.         border: 1px solid transparent;
  65.             border-radius: 30px 30px 30px 30px;
  66.             box-sizing: border-box;
  67.             -moz-box-sizing: border-box;
  68.             height: 32px;
  69.             outline: none;
  70.             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  71.                 margin-top: 5px;
  72.           }
  73.    
  74.             #pac-input {
  75.             background-color: #fff;
  76.             font-family: Roboto;
  77.             font-size: 15px;
  78.             font-weight: 300;
  79.             margin-left: 12px;
  80.             padding: 0 11px 0 13px;
  81.             text-overflow: ellipsis;
  82.             width: 400px;
  83.           }
  84.    
  85.         #pac-input:focus {
  86.             border-color: #4d90fe;
  87.           }
  88.    
  89.          .pac-container {
  90.             font-family: Roboto;
  91.           }
  92.    
  93.          #type-selector {
  94.             color: #fff;
  95.             //background-color: #4d90fe;
  96.         background-color: #FF4400;
  97.             padding: 5px 11px 0px 11px;
  98.           }
  99.    
  100.          #type-selector label {
  101.             font-family: Roboto;
  102.             font-size: 13px;
  103.             font-weight: 300;
  104.    
  105.          } 
  106.    
  107.         </style>
  108.  
  109.        <script type="text/javascript">
  110.  
  111.  
  112.  
  113. /////////////////////////////////////////////////////////////
  114. //Map Specifications
  115.  
  116.             function initialize () {
  117.                var map = new google.maps.Map(document.getElementById('map'), {
  118.                   zoom: 18,
  119.                   center: new google.maps.LatLng(33.27144940863937, -117.2983479390361),
  120.                   mapTypeId: google.maps.MapTypeId.HYBRID,
  121.                   disableDefaultUI: true,
  122.                   zoomControl: true,
  123.           mapTypeControl: false,   
  124.           scaleControl: true,
  125.           streetViewControl: true,
  126.           rotateControl: true,
  127.           fullscreenControl: false
  128.           });
  129.  
  130.                 var polyOptions = {
  131.                    strokeWeight: 0,
  132.                    fillOpacity: 0.45,
  133.                    editable: true,
  134.                    draggable: false
  135.                };
  136.  
  137.  
  138.                // Creates a drawing manager attached to the map that allows the user to draw
  139.                // markers, lines, and shapes.
  140.                drawingManager = new google.maps.drawing.DrawingManager({
  141.         drawingControlOptions: {
  142.         position: google.maps.ControlPosition.TOP_CENTER,
  143.             drawingModes: [
  144.                 google.maps.drawing.OverlayType.POLYLINE,
  145.                 google.maps.drawing.OverlayType.POLYGON
  146.                  ]
  147.                 },
  148.                    markerOptions: {
  149.                        draggable: false
  150.                    },
  151.                    polylineOptions: {
  152.                         editable: true,
  153.                        draggable: false
  154.                    },
  155.                     //rectangleOptions: polyOptions,
  156.                     polygonOptions: polyOptions,
  157.                     map: map
  158.                 });
  159.  
  160.  
  161. ////////////////////////////////////////////////////////////////////////////////
  162.  
  163.            var drawingManager;
  164.            var selectedShape;
  165.            var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
  166.            var selectedColor;
  167.            var colorButtons = {};
  168.             function clearSelection () {
  169.                if (selectedShape) {
  170.                    if (selectedShape.type !== 'marker') {
  171.                        selectedShape.setEditable(false);
  172.                    }
  173.                    
  174.                    selectedShape = null;
  175.                }
  176.            }
  177.             function setSelection (shape) {
  178.                if (shape.type !== 'marker') {
  179.                    clearSelection();
  180.                    shape.setEditable(true);
  181.                    selectColor(shape.get('fillColor') || shape.get('strokeColor'));
  182.                }
  183.                
  184.                selectedShape = shape;
  185.            }
  186.             function deleteSelectedShape () {
  187.                if (selectedShape) { selectedShape.setMap(null);}
  188.                    if (selectedShape.type == 'polygon') {
  189.             document.getElementById("action_gon").value = ''
  190.             document.getElementById("info").value = 'This box shows coords when a new POLYGON shape is added and/or vertex deleted'
  191.             }
  192.             else if (selectedShape.type == 'polyline') {
  193.             document.getElementById("action_line").value = 'This box shows coords when a new POLYLINE shape is added and/or vertex deleted'
  194.  
  195.             }
  196.         }
  197.  
  198.  
  199.             function selectColor (color) {
  200.                selectedColor = color;
  201.                for (var i = 0; i < colors.length; ++i) {
  202.                   var currColor = colors[i];
  203.                   colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
  204.               }
  205.  
  206.                // Retrieves the current options from the drawing manager and replaces the
  207.               // stroke or fill color as appropriate.
  208.               var polylineOptions = drawingManager.get('polylineOptions');
  209.               polylineOptions.strokeColor = color;
  210.               drawingManager.set('polylineOptions', polylineOptions);
  211.  
  212.                //var rectangleOptions = drawingManager.get('rectangleOptions');
  213.               //rectangleOptions.fillColor = color;
  214.               //drawingManager.set('rectangleOptions', rectangleOptions);
  215.  
  216.                //var circleOptions = drawingManager.get('circleOptions');
  217.               //circleOptions.fillColor = color;
  218.               //drawingManager.set('circleOptions', circleOptions);
  219.  
  220.                var polygonOptions = drawingManager.get('polygonOptions');
  221.               polygonOptions.fillColor = color;
  222.               drawingManager.set('polygonOptions', polygonOptions);
  223.           }
  224.            function setSelectedShapeColor (color) {
  225.               if (selectedShape) {
  226.                   if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
  227.                       selectedShape.set('strokeColor', color);
  228.                   } else {
  229.                       selectedShape.set('fillColor', color);
  230.                   }
  231.               }
  232.           }
  233.            function makeColorButton (color) {
  234.               var button = document.createElement('span');
  235.               button.className = 'color-button';
  236.               button.style.backgroundColor = color;
  237.               google.maps.event.addDomListener(button, 'click', function () {
  238.                   selectColor(color);
  239.                   setSelectedShapeColor(color);
  240.               });
  241.                return button;
  242.           }
  243.            function buildColorPalette () {
  244.               var colorPalette = document.getElementById('color-palette');
  245.               for (var i = 0; i < colors.length; ++i) {
  246.                   var currColor = colors[i];
  247.                   var colorButton = makeColorButton(currColor);
  248.                   colorPalette.appendChild(colorButton);
  249.                   colorButtons[currColor] = colorButton;
  250.               }
  251.               selectColor(colors[0]);
  252.           }
  253.  
  254. /////////////////////////////////////////////////////////////
  255. //Populate textboxes with geo data when new polygon and polyline shape added
  256.  
  257.     drawingManager.setMap(map);
  258.  
  259.        google.maps.event.addDomListener(drawingManager, 'markercomplete', function(marker) {
  260.          document.getElementById("action").value += "#marker\n";
  261.          document.getElementById("action").value += marker.getPosition() + "\n";
  262.        });
  263.  
  264.        google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) {
  265.            path = line.getPath();
  266.         document.getElementById("action_line").value = ''
  267.            document.getElementById("action_line").value += "#polyline shape added\n";
  268.            for(var i = 0; i < path.length; i++) {
  269.              document.getElementById("action_line").value += path.getAt(i) + "\n";
  270.            }
  271.        });
  272.  
  273.     google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
  274.            path = polygon.getPath();
  275.         document.getElementById("action_gon").value = ''
  276.            document.getElementById("action_gon").value += "#polygon shape added\n";
  277.            for(var i = 0; i < path.length; i++) {
  278.            document.getElementById("action_gon").value += path.getAt(i) + '\n';
  279.            }
  280.        });
  281.  
  282.  
  283. //////////////////////////////////////////////////////////////////////
  284.  
  285.                google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
  286.  
  287.                    var newShape = e.overlay;
  288.                    
  289.                    newShape.type = e.type;
  290.  
  291.  
  292.                    
  293.                    if (e.type !== google.maps.drawing.OverlayType.MARKER) {
  294.                        // Switch back to non-drawing mode after drawing a shape.
  295.                        drawingManager.setDrawingMode(null);
  296.  
  297.             google.maps.event.addListener(newShape, 'polygoncomplete', function (e) {
  298.                 google.maps.event.addListener(newShape.getPath(), 'set_at', function() {
  299.                 google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {
  300.                 var path = newShape.getPaths().getAt(e.path);
  301.                 document.getElementById("polygonEditTest").value += path.getAt(e.vertex) + '\n';
  302.                 })
  303.                 });
  304.                 });
  305.  
  306.  
  307.             google.maps.event.addListener(newShape, 'polylinecomplete', function (e) {
  308.                 google.maps.event.addListener(newShape.getPath(), 'set_at', function(e) {
  309.                 google.maps.event.addListener(newShape.getPath(), 'insert_at', function(e) {
  310.                 var path = newShape.getPaths().getAt(e.path);
  311.                 document.getElementById("polylineEditTest").value += path.getAt(e.vertex) + '\n';
  312.                 })
  313.                 });
  314.                 });
  315.  
  316.                       // Add an event listener that selects the newly-drawn shape when the user
  317.                        // clicks it.
  318.                        google.maps.event.addListener(newShape, 'click', function (e) {
  319.                            if (e.vertex !== undefined) {
  320.                                if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
  321.                                    var path = newShape.getPaths().getAt(e.path);
  322.                                    path.removeAt(e.vertex);
  323.  
  324.                 /////////////////////////////////////////////////////////////
  325.                 //Update textboxes with geo data when polygon vertex deleted
  326.                     document.getElementById("action_gon").value = ''
  327.                         document.getElementById("action_gon").value += "#polygon vertex deleted\n";
  328.                                 for(var i = 0; i < path.length; i++) {
  329.                             document.getElementById("action_gon").value += path.getAt(i) + '\n';
  330.                     }
  331.                 //
  332.                     if (path.length < 3) {
  333.                     newShape.setMap(null);
  334.                                        document.getElementById("action_gon").value = 'This box shows coords when a new POLYGON shape is added and/or vertex deleted'
  335.                                         }
  336.                      }
  337.  
  338.                                if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
  339.                                    var path = newShape.getPath();
  340.                                    path.removeAt(e.vertex);
  341.                 /////////////////////////////////////////////////////////////
  342.                 //Update textboxes with geo data when polyline vertex deleted
  343.                     document.getElementById("action_line").value = ''
  344.                         document.getElementById("action_line").value += "#polyline vertex deleted\n";
  345.                                 for(var i = 0; i < path.length; i++) {
  346.                             document.getElementById("action_line").value += path.getAt(i) + '\n';
  347.                     }
  348.                 //
  349.                     if (path.length < 2) {
  350.                     newShape.setMap(null);
  351.                                        document.getElementById("action_line").value = 'This box shows coords when a new POLYLINE shape is added and/or vertex deleted'
  352.                                     }
  353.                                      }
  354.                                      }
  355.  
  356.                            setSelection(newShape);
  357.                        });
  358.                        setSelection(newShape);
  359.                    }
  360.                    else {
  361.                        google.maps.event.addListener(newShape, 'click', function (e) {
  362.                            setSelection(newShape);
  363.                        });
  364.                        setSelection(newShape);
  365.                    }
  366.                });
  367.  
  368.         // Link delete button to the UI element.
  369.             var delbtn = /** @type {HTMLInputElement} */(
  370.             document.getElementById('delete-button'));
  371.             map.controls[google.maps.ControlPosition.TOP_RIGHT].push(delbtn);
  372.  
  373.         // Link color palette to the UI element.
  374.             var colorpal = /** @type {HTMLInputElement} */(
  375.             document.getElementById('color-palette'));
  376.             map.controls[google.maps.ControlPosition.TOP_CENTER].push(colorpal);
  377.  
  378.                // Clear the current selection when the drawing mode is changed, or when the
  379.                // map is clicked.
  380.                     google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
  381.                     google.maps.event.addListener(map, 'click', clearSelection);
  382.  
  383.                // Listen for delete button click.
  384.                     google.maps.event.addDomListener(document.getElementById('delete-button'), 'click',deleteSelectedShape);
  385.  
  386. /////////////////////////////////////////////////////////////////////
  387.                buildColorPalette();
  388. /////////////////////////////////////////////////////////////////////
  389.  
  390.     var markers = [];
  391.    
  392.       //var defaultBounds = new google.maps.LatLngBounds(
  393.           //new google.maps.LatLng(-33.8902, 151.1759),
  394.           //new google.maps.LatLng(-33.8474, 151.2631));
  395.       //map.fitBounds(defaultBounds);
  396.    
  397.      // Create the search box and link it to the UI element.
  398.       var input = /** @type {HTMLInputElement} */(
  399.           document.getElementById('pac-input'));
  400.       map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  401.    
  402.      var searchBox = new google.maps.places.SearchBox(
  403.         /** @type {HTMLInputElement} */(input));
  404.    
  405.      // [START region_getplaces]
  406.       // Listen for the event fired when the user selects an item from the
  407.       // pick list. Retrieve the matching places for that item.
  408.       google.maps.event.addListener(searchBox, 'places_changed', function() {
  409.         var places = searchBox.getPlaces();
  410.    
  411.        if (places.length == 0) {
  412.           return;
  413.         }
  414.         for (var i = 0, marker; marker = markers[i]; i++) {
  415.           marker.setMap(null);
  416.         }
  417.    
  418.        // For each place, get the icon, place name, and location.
  419.         markers = [];
  420.         var bounds = new google.maps.LatLngBounds();
  421.         for (var i = 0, place; place = places[i]; i++) {
  422.           var image = {
  423.             url: place.icon,
  424.             size: new google.maps.Size(71, 71),
  425.             origin: new google.maps.Point(0, 0),
  426.             anchor: new google.maps.Point(17, 34),
  427.             scaledSize: new google.maps.Size(25, 25)
  428.           };
  429.    
  430.           // Create a marker for each place.
  431. //        var marker = new google.maps.Marker({
  432. //          map: map,
  433. //          icon: image,
  434. //          title: place.name,
  435. //          position: place.geometry.location
  436. //        });
  437. // 
  438. //       markers.push(marker);
  439. // 
  440.          bounds.extend(place.geometry.location);
  441.         }
  442.    
  443.        map.fitBounds(bounds);
  444.    
  445.      });
  446.  
  447.                }
  448.  
  449.            google.maps.event.addDomListener(window, 'load', initialize);
  450.        </script>
  451.     </head>
  452.     <body>
  453.         <input id="pac-input" class="controls" type="text" placeholder="Search...">
  454.         <input id="delete-button" onclick="deleteSelectedShape();" type=button value="Delete Selected Shape">
  455.     <div id="color-palette"></div>
  456.     <div id="geoinfoboxes">
  457.         <textarea id="action_line" rows="8" cols="46">This box shows coords when a new POLYLINE shape is added and/or vertex deleted</textarea>
  458.         <textarea id="action_gon" rows="8" cols="46">This box shows coords when a new POLYGON shape is added and/or vertex deleted</textarea>
  459.         <textarea id="polylineEditTest" rows="8" cols="46">This box shows coords for edited POLYLINES (ie. moving a vertex)</textarea>
  460.         <textarea id="polygonEditTest" rows="8" cols="46">This box shows coords for edited POLYGONS (ie. moving a vertex)</textarea>
  461.     </div>
  462.     <div id="map"></div>
  463.     </body>
  464. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!