ProjetMJCEditor/client/js/ui_areapicker.js

function latlngToArray(e)
{
  if(e  && e.lng && e.lat)
    return [e.lng, e.lat];
  return [0,0];
}

function latlngArrayToArray(e)
{
  var out=[];
  for(var i=0; i<e.length; i++)
    out.push(latlngToArray(e[i]));
  return out;
}

function arrayToLatlng(e)
{
  return [e[1], e[0]];
}


function arrayToLatlngArray(e)
{
  var out=[];
  for(var i=0; i<e.length; i++)
    out.push(arrayToLatlng(e[i]));
  return out;
}

class UIAreaPicker extends UIContainer {

  initHtml()
  {
    var t = this;
    var btn_row = HTMLBuilder.row();
    this.root.append(btn_row);


    var btn_rm_poly = HTMLBuilder.button('Effacer la zone',
                                          {class: "red "+_col_class(3,2)},
                                          function(){t.removePolygon()});
    btn_row.append(btn_rm_poly);

    var btn_rm_point = HTMLBuilder.button('Effacer le point',
                                          {class: "red "+_col_class(3,2)}
                                          , function(){t.removeMarker()});
    btn_row.append(btn_rm_point);


    this.root.append(HTMLBuilder.areaPicker(this.rootId));
  }


  initEnd()
  {
    var id= this.rootId+"_map";
    this.mapData={
      polygon: null,
      marker: null,
      point: null,
      lines: [],
      map: null
    }
    this.initHtml();

    this.mapData.map=L.map(id).setView([48.505, -3.09], 13);


    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  		maxZoom: 18,
  		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  		id: 'mapbox.streets'
  	}).addTo(this.mapData.map);

    var t = this;
    this.mapData.map.on('click', function(e){t.onClick(e)})
    this.mapData.map.on('contextmenu', function(e){t.onRightClick(e)})
  }

  onClick(e)
  {
    this.mapData.lines.push(e.latlng);
    this.update();
  }

  onRightClick(e)
  {
    this.mapData.point=e.latlng;
    this.update();
  }

  update()
  {
    if(this.mapData.marker)
      this.mapData.marker.remove();

    if(this.mapData.polygon)
      this.mapData.polygon.remove();

    if(this.mapData.lines.length>1)
    {
      this.mapData.polygon = new L.polygon(this.mapData.lines, {
          color: 'red',
          weight: 3,
          opacity: 0.5,
          smoothFactor: 1
      });
      this.mapData.polygon.addTo(this.mapData.map);
    }

    if(this.mapData.point!=null)
    {
      this.mapData.marker = new L.circleMarker(this.mapData.point);
      this.mapData.marker.addTo(this.mapData.map);
    }

  }

  removePolygon()
  {
    if(this.mapData.polygon)
      this.mapData.polygon.remove();
    this.mapData.lines=[];
  }

  removeMarker()
  {
    if(this.mapData.marker)
      this.mapData.marker.remove();
    this.mapData.point=null;
  }

  getJson()
  {
    return {
      coordinates: [latlngArrayToArray(this.mapData.lines)],
      point: {
        coordinates: latlngToArray(this.mapData.point)
      }
    }
  }

  setJson(obj)
  {
    this.mapData.lines=arrayToLatlngArray(obj.coordinates);
    this.mapData.point=arrayToLatlng(obj.point.coordinates);
    this.update();
    if(this.mapData.point)
      this.mapData.map.setView(this.mapData.point);
    else if(this.mapData.lines.length>0)
      this.mapData.map.setView(this.mapData.lines[0]);
  }

}

registerUiClass("areapicker", UIAreaPicker);