tati
/
accent-dialect-map


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!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' />
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>

    <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;' class="form-control"></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">&copy; 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';
        const bounds = [
          [-2.460270, 53.370427],
          [-2.062598, 53.552900]
        ]
        
        const map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
          center: [-2.884808, 53.495743],
          zoom: 9.5,
        });
        
        const Draw = new MapboxDraw({
          displayControlsDefault: false,
          controls: {
            polygon: true,
            trash: true
          }
          });
        
        console.log("turf", turf);
        
        const AddPopup = (map) => (area) => {
          let polygon = turf.polygon(area);
          let center = turf.centroid(polygon);
          console.log(center, polygon)

          return new mapboxgl.Popup({closeOnClick: false})
            .setLngLat(center.geometry.coordinates)
            .setHTML(`
              <h3>form</h3>
              <label for="data">some data</label>
              <input type="text" class="form-control" id="data" placeholder="" required>
              <button type="button">save</button>
            `)
            .addTo(map)
        }


        map.addControl(Draw, 'top-right');

        map.on('load', function() {
          let drawnData = {};
          map.on('draw.create', createArea);
          map.on('draw.delete', deleteArea);
          map.on('draw.update', updateArea);

          function createArea(polygon) {
            let area = polygon.features[0].geometry;
            drawnData = {
              ...drawnData,
              [polygon.features[0].id]: area
            };

            console.log("create", area);
            const popup = AddPopup(map)(area.coordinates);

          }

          function deleteArea(polygon) {
            console.log('delete', polygon);
          }

          function updateArea(polygon) {
            console.log('update', polygon)
          }
        });
    </script>
  </body>
</html>