bbecquet / Leaflet.PolylineDecorator

A plug-in for the JS map library Leaflet, allowing to define patterns (like dashes, arrows, icons, etc.) on Polylines.
MIT License
492 stars 115 forks source link

Adding an arrow to a Line with GeoJson #89

Open asecondwill opened 5 years ago

asecondwill commented 5 years ago

Hi

I've got a line showing up with an arrow, but ny arrow points the wrong way. What have I done wrong?

Here is the geojson for the line:

{
          "type" => "Feature",
           "geometry" => {
               "type" => "Polygon",
               "coordinates" => [
                  [0] [
                    [0] [
                      [0] -2.642914,
                      [1] 51.502927
                    ],
                  [1] [
                    [0] -2.636177,
                    [1] 51.499918
                ]
            ]
        ]
    },
    "properties" => {
            :name => nil,
            :feature_type => "Annotation",
            :shape => "arrow",
            :popup_content => "Name: , ID: 69, FeatureType: Annotation, shape: arrow, radius: , start: [51.502927, -2.642914]",
             :style => {
                  :color => "Fuchsia",
                 :fillColor => "#1EB300",
                 :radius => 1,
                 :apacity => 1.0,
                :fillOpacity => 1,
                 :weight => 2,
                :clickable => true,
                :dashArray => "6,10",
                :lineJoin => "round"
          }
      }
}

And my onEachFeature:

  function onEachFeature(feature,layer){
    if(feature.properties.shape == 'arrow'){                
      L.polylineDecorator(layer, {
            patterns: [
              {offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
            ]
      }).addTo(map);
    }
  }

The line gets drawn, with an arrow pointing the wrong way. It points out from the start point, where I want it to point out from the end point. Exactly like the example.js code from the repo.

I'm using polygon, because I couldn't get Polyline or Linestring to draw on the map.

What have I done wrong?