title: Leaflet exact marker/icon scaling
body: <p>imagine we have car driving on the road. </p>
  
  <p>I need to display this situation on a map and update the car's positon while it's driving. The car does not necessarily
  need to follow a specific road, but could be positioned anywhere on the map.</p>
  
  <p>The car has to be displayed on the map as accurately as possible, considering the scale and position.</p>
  
  <p><a href="https://i.stack.imgur.com/7eMM3.png" rel="nofollow noreferrer">A sample car icon with explainations</a></p>
  
  <p>On the map there will be differnt types of cars all with different length and width and differnt icons.</p>
  
  <p>The icons are available as svg paths and the width and length of each car is available in meters, with 2 decimal points.</p>
  
  <p>On each update of a cars postition, new coordinates and a new angle of the car will be provided. Updates for each car will
  be provided every couple of seconds.</p>
  
  <p>The car icon should be displayed on the map, with the center beeing the georeference point you see in the picture above. This point should also be the roation origin.</p>
  
  <p>The car should be interactive to react on click events.</p>
  
  <p>And on zoom the car should stay in it's correct size (eg. 5 meters by 1,8 meters).</p>
  
  <p>I tried solving this problem by using the leaflet.roatedmarker plugin:
  <a href="https://github.com/bbecquet/Leaflet.RotatedMarker" rel="nofollow noreferrer">https://github.com/bbecquet/Leaflet.RotatedMarker</a></p>
  
  <p>Comeing up with this code:</p>
  
  <pre><code>        var carIcon = L.icon({
              iconUrl: 'car.svg',
              iconSize: [38, 38],
              iconAnchor:[19, 2]
          });     
          var marker2 = L.marker([56.369481,17.508143], {icon: carIcon}).addTo(map);
              marker2.setRotationOrigin("19px 2px");
              marker2.setRotationAngle(90); 
  </code></pre>
  
  <p>In addition i was able to calculate the size of the icon in pixel based on meters using this function (found her: <a href="https://gis.stackexchange.com/questions/198435/how-to-get-current-scale-of-a-leaflet-map/198444#198444">https://gis.stackexchange.com/questions/198435/how-to-get-current-scale-of-a-leaflet-map/198444#198444</a>):</p>
  
  <pre><code>L.Map.include({
              metersToPixels:function(zoom){
                  // Get the y,x dimensions of the map
                  var y = this.getSize().y,
                      x = this.getSize().x;
                  // calculate the distance the one side of the map to the other using the haversine formula
                  var maxMeters = map.containerPointToLatLngWithZoom([0, y],zoom).distanceTo(map.containerPointToLatLngWithZoom([x,y],zoom));
                  // calculate how many meters each pixel represents
                  var MeterPerPixel = maxMeters/x ;
                  return MeterPerPixel;
              },
                  containerPointToLatLngWithZoom:function(point,zoom){
                      var layerPoint = this.containerPointToLayerPoint(L.point(point));
                      var projectedPoint = L.point(layerPoint).add(this.getPixelOrigin());
                      return this.unproject(projectedPoint,zoom);
                  }
          });
  </code></pre>
  
  <p>But this does not solve the problem of keeping the accuracy while zooming. This is what I'm struggeling with.
  The performance while zooming is also an issue when there are many cars on the map.</p>
  
  <p>Do you have any suggestions, that would help, to meet all my requirements ? Is there maybe better solution using overlays?</p>
  
  <p>Thank you in advance !</p>
  
  <p>EDIT/SOLUTION:</p>
  
  <p>I ended up customizing this Plugin to fit my needs :</p>
  
  <p><a href="https://github.com/teralytics/Leaflet.D3SvgOverlay" rel="nofollow noreferrer">https://github.com/teralytics/Leaflet.D3SvgOverlay</a></p>