Ships movement on a leaflet map

Vote count:

0

I am doing an interactive map with the aim of simulating a real harbour. I used leaflet.js and openstreetmap.org to create my map, and now I have to add layers for buoys, ships and so on.

To add static object as buoys I used simple markers with customized icons, and that's works fine.

But what about the moving ships? I must represent them in continuos moving on the map, and I must show their dimension, their orientation time by time.

I have five points coordinates to draw them as polygons on the map but I'm not really sure in its better to use a rotated L.icon leaflet object

Layer = L.geoJson(null, {
    pointToLayer: function(feature, latlng) {

        return new L.marker(latlng, {
            icon: L.icon({
                iconUrl: 'img/ship.png',
                    iconRetinaUrl: 'img/ship@2x.png',
                    iconSize: [18, 24]
                }) 
        }).on('click', function() {
            $scope.openPanel('ships', feature);
        });
    }
});

or to draw a leaflet Polygon

var p1 = new L.LatLng(51.509, -0.08),
    p2 = new L.LatLng(51.503, -0.06),
    p3 = new L.LatLng(51.51, -0.047),
    p4 = new L.LatLng(51.503, +0.06),
    p5 = new L.LatLng(51.51, +0.047),
    polygonPoints = [p1, p2, p3, p4, p5];

var ship = new L.Polygon(polygonPoints);
     map.addLayer(ship);

Considering the dynamic movements of the ships, what is the best solution?

Thank you in advance.

asked 19 secs ago

Guern

379