Vfrdtyky

I'm messing around with a code I found here: rotate polygon around point in leaflet map. Basically it does what I want (rotating the polygon around a fixed point in winddirection I get from openweathermap). But only if I click on that slider:

My entire adjusted code is here:

 var max_val_bounds =  L.latLngBounds( L.latLng(-90, 180), L.latLng(90, -180));

// initialize map

var map = L.map( 'map', {

  center: [50, 10],

  maxZoom: 18,

  minZoom: 2,

  maxBounds: max_val_bounds,

  zoom:5

})



var layer = L.esri.basemapLayer('Topographic').addTo(map);

var layerLabels;

// set up map type

function setBasemap(basemap)

{

  if (layer){ map.removeLayer(layer); }

  layer = L.esri.basemapLayer(basemap);

  map.addLayer(layer);

  if (layerLabels){ map.removeLayer(layerLabels);   }

  if (basemap === 'ShadedRelief' || basemap === 'Oceans' || 

      basemap === 'Gray' || basemap === 'DarkGray' || 

      basemap === 'Imagery' || basemap === 'Terrain')

  {

    layerLabels = L.esri.basemapLayer(basemap + 'Labels');

    map.addLayer(layerLabels);

  }

}



var basemaps = document.getElementById('basemaps');

basemaps.addEventListener('change', function()

                          {

  setBasemap(basemaps.value);

});



// INTERESTING PART

// setting up latitude, longitude

var decimal_lat = 50,

        decimal_lon = 10;



var winddirection = 270; //Getting the value from openweathermap; Its static for this example



// creating polygon for this place

var polygon = L.polygon( [ 

        [parseFloat(decimal_lat),           parseFloat(decimal_lon)], 

        [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1],                     [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ],       

    {

                color:'green'

        });

polygon.addTo(map);



// creating marker for this place

var newMarker = L.marker([decimal_lat, decimal_lon]);

newMarker.addTo( map );



// This is what I do not want

// slider to move polygon

var range_yaw = document.createElement("input");

range_yaw.setAttribute("type", "range");

range_yaw.min = "0";

range_yaw.max = "819";

range_yaw.step = "2.275";

range_yaw.defaultValue = 90;

// End of what I do not want



// creating polyline for this place

var SIN = Math.sin((winddirection/(819/360) - 90)*(Math.PI/180));

var COS = Math.cos((winddirection/(819/360) - 90)*(Math.PI/180));

var pointA = new L.LatLng(parseFloat(decimal_lat),                  

                                                    parseFloat(decimal_lon));

var pointB = new L.LatLng(parseFloat(decimal_lat) + 2*COS,                                                                          parseFloat(decimal_lon) + 2*SIN);

var pointList = [pointA, pointB];

//Actually I dont want a line but removing it messes up other things

var polyline = new L.Polyline(pointList, {

  color: 'red',

  weight: 3,

  opacity: 0.00,

  smoothFactor: 1

});

polyline.addTo(map);



document.body.appendChild( range_yaw );



// The polygon needs to be rotated without this .onchange handler. It should rotate when the page/script loads

 //changing polyline with slider but I want to change polygon there

range_yaw.onchange = function() {

  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)

  // line

  var center = [decimal_lat, decimal_lon]

  var end = [decimal_lat + 2, decimal_lon + 2]

  var pointListRotated = rotatePoints(center, [center, end], yawAngle)

  polyline.setLatLngs(pointListRotated);

  // polygon

  var polygonPoints = [

    center,

    [center[0] + 1, center[1] - 1],

    [center[0] + 1, center[1] + 1]

  ]

  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)

  polygon.setLatLngs(polygonRotated)

};



//

// rotate a list of points in [lat, lng] format about the center.

//

function rotatePoints(center, points, yaw) {

  var res = 

  var angle = yaw * (Math.PI / 180) // not really sure what this is

  for(var i=0; i<points.length; i++) {

    var p = points[i]

    // translate to center

    var p2 = [ p[0]-center[0], p[1]-center[1] ]

    // rotate using matrix rotation

    var p3 = [ Math.cos(angle)*p2[0] - Math.sin(angle)*p2[1], Math.sin(angle)*p2[0] + Math.cos(angle)*p2[1]]

    // translate back to center

    var p4 = [ p3[0]+center[0], p3[1]+center[1]]

    // done with that point

    res.push(p4)

  }

  return res

}

The part I need help with is this: range_yaw.onchange

range_yaw.onchange = function() {

  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)

  // line

  var center = [decimal_lat, decimal_lon]

  var end = [decimal_lat + 2, decimal_lon + 2]

  var pointListRotated = rotatePoints(center, [center, end], yawAngle)

  polyline.setLatLngs(pointListRotated);

  // polygon

  var polygonPoints = [

    center,

    [center[0] + 1, center[1] - 1],

    [center[0] + 1, center[1] + 1]

  ]

  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)

  polygon.setLatLngs(polygonRotated)

};

How can I make my polygon rotate without clicking the slider? I want the polygon to show up in the wind-angle as soon as the script loads.

You might remove the onchange event handler:

//range_yaw.onchange = function() {

  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)

  // line

  var center = [decimal_lat, decimal_lon]

  var end = [decimal_lat + 2, decimal_lon + 2]

  var pointListRotated = rotatePoints(center, [center, end], yawAngle)

  polyline.setLatLngs(pointListRotated);

  // polygon

  var polygonPoints = [

    center,

    [center[0] + 1, center[1] - 1],

    [center[0] + 1, center[1] + 1]

  ]

  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)

  polygon.setLatLngs(polygonRotated)

//};

Updated JSFiddle is here.