add track symbol plugin to map - Javascript Leaflet

Javascript examples for Leaflet:Plugin

  1. HOME
  2. Javascript
  3. Leaflet
  4. Plugin

Description

add track symbol plugin to map

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta charset="utf-8"> 
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" > 
      <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" ></script> 
      <script src="https://rawgit.com/lethexa/leaflet-tracksymbol/master/leaflet-tracksymbol.min.js"></script> 
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
      <script src="https://rawgit.com/evanplaice/jquery-csv/master/src/jquery.csv.js"></script> 
   </head> 
   <body> 
      <div id="map" style="width: 600px; height: 400px;"></div> 
      <script>
var map = L.map('map').setView([25.93, 51.61], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);//  w  ww  .  java  2  s .co m
$.ajax({
  type: "GET",
  url: "boats.csv",
  dataType: "text",
  success: function(data) {
  dat2 = $.csv.toObjects(data);
  for (var i = 0; i < dat2.length; i++){
    var latlng = L.latLng(dat2[i].latitude, dat2[i].longitude)
      L.trackSymbol(latlng, {
        speed: dat2[i].speed,
        course: dat2[i].course,
        heading: dat2[i].heading,
        fillColor: dat2[i].fillColor
      }).addTo(map);
  }
  }
});

      </script>  
   </body>
</html>

Related Tutorials