| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html>
|
|---|
| 3 | <head>
|
|---|
| 4 | <title>Drawing Tools</title>
|
|---|
| 5 | <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
|---|
| 6 | <meta charset="utf-8">
|
|---|
| 7 |
|
|---|
| 8 | <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
|---|
| 9 | <script src="historyManager.js"></script>
|
|---|
| 10 | <script src="mapThemes.js"></script>
|
|---|
| 11 | <script src="index.js"></script>
|
|---|
| 12 | <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap" async defer></script>
|
|---|
| 13 |
|
|---|
| 14 | <link rel="stylesheet" type="text/css" href="index.css">
|
|---|
| 15 |
|
|---|
| 16 | </head>
|
|---|
| 17 | <body>
|
|---|
| 18 | <div id = "ControlPanel">
|
|---|
| 19 | <div id = "ControlButtons">
|
|---|
| 20 | <button onclick="deleteAllShape()" accesskey="c">Clear All</button>
|
|---|
| 21 | <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button>
|
|---|
| 22 | <button onclick="undo()" accesskey="n">Undo</button>
|
|---|
| 23 | <button onclick="redo()" accesskey="n">Redo</button>
|
|---|
| 24 | <input type="checkbox" name="draggableCB" id="draggableCB" value="false"> Lock all shapes location<br>
|
|---|
| 25 | </div>
|
|---|
| 26 |
|
|---|
| 27 | <div id = "SecondRow">
|
|---|
| 28 | <div id = "LineThickness">
|
|---|
| 29 | <p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange"> </p>
|
|---|
| 30 | <p>Value: <span id="thicknessRangeVal"></span></p>
|
|---|
| 31 | </div>
|
|---|
| 32 |
|
|---|
| 33 | <div id = "ColourOpacity">
|
|---|
| 34 | <p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity"> </p>
|
|---|
| 35 | <p>Value: <span id="opacityRangeVal"></span></p>
|
|---|
| 36 | </div>
|
|---|
| 37 | </div>
|
|---|
| 38 | <div id = "ThirdRow">
|
|---|
| 39 | <div id="FillColour">
|
|---|
| 40 | <p> Fill Colour:</p> <div id="color-palette1"></div>
|
|---|
| 41 | </div>
|
|---|
| 42 | </div>
|
|---|
| 43 | </div>
|
|---|
| 44 |
|
|---|
| 45 | <div id="style-selector-control" class="map-control">
|
|---|
| 46 | <select id="style-selector" class="selector-control">
|
|---|
| 47 | <option value="default" selected="selected">Default</option>
|
|---|
| 48 | <option value="silver">Silver</option>
|
|---|
| 49 | <option value="night">Night mode</option>
|
|---|
| 50 | <option value="retro">Retro</option>
|
|---|
| 51 | <option value="paleDawn">Pale Dawn</option>
|
|---|
| 52 | <option value="avocadoWorld">Avocado World</option>
|
|---|
| 53 | <option value="bright">Bright</option>
|
|---|
| 54 | <option value="turquoise">Turquoise</option>
|
|---|
| 55 | <option value="hiding">Hide features</option>
|
|---|
| 56 | </select>
|
|---|
| 57 | </div>
|
|---|
| 58 |
|
|---|
| 59 |
|
|---|
| 60 | <div id="map"></div>
|
|---|
| 61 |
|
|---|
| 62 |
|
|---|
| 63 | </body>
|
|---|
| 64 | </html> |
|---|
