|
|
@@ -0,0 +1,121 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
|
|
+ <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
|
|
|
+ <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />
|
|
|
+
|
|
|
+ <title>Accent dialect map</title>
|
|
|
+ </head>
|
|
|
+ <body class="bg-light">
|
|
|
+ <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js"></script>
|
|
|
+ <link
|
|
|
+ rel="stylesheet"
|
|
|
+ href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"
|
|
|
+ type="text/css"
|
|
|
+ />
|
|
|
+ <div class="container">
|
|
|
+ <div class="py-5 text-center">
|
|
|
+ <h2>Accent and dialect form</h2>
|
|
|
+ <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum corporis minima, eius officiis magnam quae vero praesentium odio facilis minus illo ut atque accusamus esse deserunt. Fuga, autem molestiae!</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <h4>Personal Information</h4>
|
|
|
+ <form>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-6 mb-3">
|
|
|
+ <label for="age">Age</label>
|
|
|
+ <input type="number" class="form-control" id="age" placeholder="" value="" min="10" max="110" required>
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ Age is required
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="gender">Gender</label>
|
|
|
+ <select class="form-control">
|
|
|
+ <option>Male</option>
|
|
|
+ <option>Female</option>
|
|
|
+ <option>idk lmao</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-12 mb-3">
|
|
|
+ <label for="postal-code">Postal code</label>
|
|
|
+ <input type="text" class="form-control" id="postal-code"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-12">
|
|
|
+ <label>Map time</label>
|
|
|
+ <div id='map' style='width: 100%; height: 80vh;'></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <hr class="mb-4">
|
|
|
+ <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <footer class="my-5 pt-5 text-muted text-center text-small">
|
|
|
+ <p class="mb-1">© Legal stuff if needed</p>
|
|
|
+ <ul class="list-inline">
|
|
|
+ <li class="list-inline-item"><a href="#">Privacy</a></li>
|
|
|
+ <li class="list-inline-item"><a href="#">Terms</a></li>
|
|
|
+ </ul>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ mapboxgl.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
|
|
|
+ var bounds = [
|
|
|
+ [-2.460270, 53.370427],
|
|
|
+ [-2.062598, 53.552900]
|
|
|
+ ]
|
|
|
+
|
|
|
+ var map = new mapboxgl.Map({
|
|
|
+ container: 'map',
|
|
|
+ style: 'mapbox://styles/tinama/ck799vnw63ib11ipk5yxib52f',
|
|
|
+ center: [-2.242678, 53.482125],
|
|
|
+ zoom: 13,
|
|
|
+ maxBounds: bounds
|
|
|
+ });
|
|
|
+
|
|
|
+ var Draw = new MapboxDraw({
|
|
|
+ displayControlsDefault: false,
|
|
|
+ controls: {
|
|
|
+ polygon: true,
|
|
|
+ trash: true
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ map.addControl(Draw, 'top-right');
|
|
|
+
|
|
|
+ map.on('load', function() {
|
|
|
+ var drawnData = {};
|
|
|
+ map.on('draw.create', createArea);
|
|
|
+ map.on('draw.delete', deleteArea);
|
|
|
+ map.on('draw.update', updateArea);
|
|
|
+
|
|
|
+ function createArea(polygon) {
|
|
|
+ drawnData = {
|
|
|
+ ...drawnData,
|
|
|
+ [polygon.features[0].id]: polygon.features[0].geometry
|
|
|
+ };
|
|
|
+ console.log("data", drawnData)
|
|
|
+ }
|
|
|
+
|
|
|
+ function deleteArea(polygon) {
|
|
|
+ console.log('delete', polygon);
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateArea(polygon) {
|
|
|
+ console.log('update', polygon)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
