bluehalo / ngx-leaflet-draw

MIT License
88 stars 29 forks source link

How to restore drawings? #45

Closed tvfire closed 6 years ago

tvfire commented 6 years ago

I was able to store the drawings with the L.Draw.Events into a array and then save it as a json to disk.

this.map.on(L.Draw.Event.CREATED, function (e) {}

Now I am struggeling on how to restore the drawings from the array. Is there a option to add them back into the drawing layer in a new session?

Thank you for help in advance and thank you for this great angular api.

reblace commented 6 years ago

You'd want to create a featureGroup and pass it into the ngx-leaflet-draw plugin using leafletDrawOptions. Then, editable layers will be added to the map if you add them to that featureGroup.

For details about seting leafletDrawOptions: https://github.com/Asymmetrik/ngx-leaflet-draw#create-and-configure-a-map-with-the-draw-controls

For details about what can go into those options: https://github.com/Leaflet/Leaflet.draw#example-leafletdraw-config

As an example:

<div leaflet style="height: 400px;"
     leafletDraw
     [leafletOptions]="options"
     [leafletLayers]="layers"
     [leafletDrawOptions]="drawOptions">
</div>
options = {...};

// Need to manually create the feature group and have it added to the map
featureGroup = L.featureGroup();
layers = [ this.featureGroup ];

drawOptions = {
   position: 'topright',
   draw: {
      marker: {
         icon: L.icon({
             iconSize: [ 25, 41 ],
             iconAnchor: [ 13, 41 ],
             iconUrl: 'assets/marker-icon.png',
             shadowUrl: 'assets/marker-shadow.png'
         })
      },
      polyline: false,
      circle: {
          shapeOptions: {
              color: '#aaaaaa'
          }
      }
   },
   edit: {
      featureGroup: this.featureGroup
   }
};
tvfire commented 6 years ago

Thank you so much