Translate features

by amay077

HTML

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="5">

  <base href="./">
  <link rel="stylesheet" href="index.css">

  <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
  
</head>

<body>
<div style="height: 40px; display: flex; align-items: center;">
  <spna>distance:</spna>
  <input type="number" id="dist" value="900">
  <spna>m</spna>
  <spna>&nbsp;／&nbsp;</spna>
  <spna>direction:</spna>
  <input type="number" id="dir" value="90">
  <spna>degree</spna>
  <button id="translate" style="margin-left: 4px;">TRANSLATE</button>
</div>
<div id="map" style="width:100%; height: calc(100vh - 40px);"></div>
<script src="index.js"></script>
</body>
</html>

CSS

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

JavaScript

let polygon1 = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [ 137.796, 34.940 ],
        [ 137.748, 34.882 ],
        [ 137.887, 34.888 ],
        [ 137.796, 34.940 ]
      ]
    ]
  }
};

const dataSource = {
  'type': 'geojson',
  'data': {
    "type": "FeatureCollection",
    "features": [
      polygon1,
    ]    
  }
};

const bounds = turf.bbox(dataSource.data);

const map = new mapboxgl.Map({
  container: 'map',
  bounds: bounds,
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [
          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
      minzoom: 0,
      maxzoom: 18,
    }],
  },      
});

map.once('load', () => {

  map.fitBounds(bounds, { padding: { bottom: 200, top: 200, right: 200, left: 200 }});

  map.addSource('polygons', dataSource);
  
  map.addLayer({
    'id': 'polygons',
    'type': 'fill',
    'source': 'polygons',
    'paint': {
      'fill-color': '#088',
      'fill-opacity': 0.8      
    }
  });
  
});

document.getElementById('translate').addEventListener('click', () => {
  const distance = Number(document.getElementById('dist').value);
  const direction = Number(document.getElementById('dir').value);

  turf.transformTranslate(polygon1, distance, direction, { units: 'meters', mutate: true });

  const dataSource = map.getSource('polygons');
  dataSource.setData({
    "type": "FeatureCollection",
    "features": [
      polygon1,
    ]    
  });
});