Bezier Curve Dashed Polyline

Sample Implementation

    
      
      <html>
        <head>
          <title>Bezier Curve Dashed Polyline</title>
          <meta name="viewport" content="initial-scale=1.0">
          <meta charset="utf-8">
          <style>
          html,
          body,
          #map {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
          }
          </style>
             <script src="https://apis.mappls.com/advancedmaps/api/<Token>/map_sdk?layer=vector&v=3.0&callback=initMap1" defer async></script>
            </head>
        <body>
                    <div id="map"></div>
                        <script>
        curveLine = function (p, call) {
            var strt, end, ang = 45;
            if (p.start != undefined) { strt = p.start }
            if (p.end != undefined) { end = p.end }
            if (p.angle != undefined) { ang = p.angle };
            if (ang > 45) { console.log("Angle should be less than 45."); return false; }
            if (!strt || !end) { console.log("Start and End point required."); return false; }
            var st_lat = strt.lat, st_lng = strt.lng, end_lat = end.lat, end_lng = end.lng, fx = 1, fy = ang < 45 ? 0.8 : 1, points = [], path = [], resolution = 0.01;
            var bearing1 = this.bearing(st_lat, st_lng, end_lat, end_lng);
            bearing1 = bearing1 > 180 ? bearing1 + ang : bearing1 - ang;
            var dia = this.distance(st_lat, st_lng, end_lat, end_lng) * fx;
            var hyp = Math.sqrt(2) * ((dia * fy) / 2);
            var pos = this.destinationpoint(strt, bearing1, hyp);
            var mid_lat = pos.lat, mid_lng = pos.lng;
            for (it = 0; it <= 1; it += resolution) { points.push(this.getBezier({ x: st_lat, y: st_lng, }, { x: mid_lat, y: mid_lng, }, { x: end_lat, y: end_lng, }, it)); }
            for (var i = 0; i < points.length - 1; i++) {
                path.push({ lat: points[i].x, lng: points[i].y });
            };
            setTimeout(() => {
                path.push(strt);
                return call(path);
            }, 10);
        },
        B1 = function (t) { return t * t; },
        B2 = function (t) { return 2 * (1 - t) * t; },
        B3 = function (t) { return (1 - t) * (1 - t); },
        getBezier = function (C1, C2, C3, percent) {
            var pos = {};
            pos.x = C1.x * this.B1(percent) + C2.x * this.B2(percent) + C3.x * this.B3(percent);
            pos.y = C1.y * this.B1(percent) + C2.y * this.B2(percent) + C3.y * this.B3(percent);
            return pos;
        },
        distance = function (lat1, lon1, lat2, lon2) {
            const R = 6378137; // metres
            const φ1 = (lat1 * Math.PI) / 180; // φ, λ in radians
            const φ2 = (lat2 * Math.PI) / 180;
            const Δφ = ((lat2 - lat1) * Math.PI) / 180;
            const Δλ = ((lon2 - lon1) * Math.PI) / 180;
            const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const d = R * c; // in metres
            return d;
        },
        bearing = function (λ1, φ1, λ2, φ2) {
            const lat1 = (λ1 * Math.PI) / 180;
            const lat2 = (λ2 * Math.PI) / 180;
            const dLon = (φ2 - φ1) * (Math.PI / 180);
            const y = Math.sin(dLon) * Math.cos(lat2);
            const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
            const brng = Math.atan2(y, x);
            return (brng * (180 / Math.PI) + 360) % 360;
        },
        destinationpoint = function (point, brng, dist) {
            dist = dist / 6378137;
            brng = brng * Math.PI / 180;
            var lat1 = point.lat * Math.PI / 180, lon1 = point.lng * Math.PI / 180;
            var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
            var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) * Math.cos(lat1), Math.cos(dist) - Math.sin(lat1) * Math.sin(lat2));
            return { lat: lat2 * 180 / Math.PI, lng: lon2 * 180 / Math.PI };
        }
        var map,polyline;
        function initMap1() {
            map = new mappls.Map("map", {
                center: [28.61, 77.23],
                zoomControl: true,
                location: true,
            });
            map.addListener('load', function () {
                curveLine({
                    start: { lng: 77.27428863526279, lat: 28.550908438470714 },
                    end: { lng: 77.53557294755876, lat: 28.660477852756003 },
                    angle: 30 // lessthan 45 deegree 
                }, function (data) {
                    //console.log(data);
                    if (polyline) mappls.remove({ map: map, layer: polyline });
                    polyline = new mappls.Polyline({
                        map: map,
                        paths: data,
                        strokeColor: "#333",
                        strokeOpacity: 1.0,
                        dasharray: [2, 2],
                        strokeWeight: 2,
                        fitbounds: true,
                    });
                });
            })
        }
    </script>
        </body>
      </html>
      
      
      /* First install : npm install mappls-web-maps */

      import { Component, OnInit, ElementRef } from '@angular/core';
      import { mappls } from 'mappls-web-maps';
      @Component({
      selector: 'app-root',
      template: '<div  id="map"  style="width: 99%; height: 99vh; background-color: white;"></div>',
      styleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {
          mapObject: any;
          mapplsClassObject = new mappls();
          title = "Bezier Curve Dashed Polyline";
      polylineObj : any;
      mapProps = { center: [28.6330, 77.2194], traffic:  false, zoom:  4, geolocation:  false, clickableIcons:  false }

      curveLine =  (p:any, call:any) : any => {
        var strt : any, end, ang = 45;
        if (p.start != undefined) { strt = p.start }
        if (p.end != undefined) { end = p.end }
        if (p.angle != undefined) { ang = p.angle };
        if (ang > 45) { console.log("Angle should be less than 45."); return false; }
        if (!strt || !end) { console.log("Start and End point required."); return false; }
        var st_lat = strt.lat, st_lng = strt.lng, end_lat = end.lat, end_lng = end.lng, fx = 1, fy = ang < 45 ? 0.8 : 1, points : any = [], path : any = [], resolution = 0.01;
        var bearing1 = this.bearing(st_lat, st_lng, end_lat, end_lng);
        bearing1 = bearing1 > 180 ? bearing1 + ang : bearing1 - ang;
        var dia = this.distance(st_lat, st_lng, end_lat, end_lng) * fx;
        var hyp = Math.sqrt(2) * ((dia * fy) / 2);
        var pos = this.destinationpoint(strt, bearing1, hyp);
        var mid_lat = pos.lat, mid_lng = pos.lng;
        for (var it = 0; it <= 1; it += resolution) { points.push(this.getBezier({ x: st_lat, y: st_lng, }, { x: mid_lat, y: mid_lng, }, { x: end_lat, y: end_lng, }, it)); }
        for (var i = 0; i < points.length - 1; i++) {
            path.push({ lat: points[i].x, lng: points[i].y });
        };
        setTimeout(() => {
            path.push(strt);
            return call(path);
        }, 100);
      }

      B1 = function (t:any) : any { return t * t; }
      B2 = function (t:any) : any { return 2 * (1 - t) * t; }
      B3 = function (t:any) : any { return (1 - t) * (1 - t); }

      getBezier =  (C1 : any, C2 : any, C3 : any, percent : any) => {
        var pos : any = [];
        pos.x = C1.x * this.B1(percent) + C2.x * this.B2(percent) + C3.x * this.B3(percent);
        pos.y = C1.y * this.B1(percent) + C2.y * this.B2(percent) + C3.y * this.B3(percent);
        return pos;
      }

      distance = (lat1 : any, lon1 : any, lat2 : any, lon2 : any) => {
        const R = 6378137; // metres
        const φ1 = (lat1 * Math.PI) / 180; // φ, λ in radians
        const φ2 = (lat2 * Math.PI) / 180;
        const Δφ = ((lat2 - lat1) * Math.PI) / 180;
        const Δλ = ((lon2 - lon1) * Math.PI) / 180;
        const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        const d = R * c; // in metres
        return d;
      }

      bearing = (λ1 : any, φ1 : any, λ2 : any, φ2 : any) => {
        const lat1 = (λ1 * Math.PI) / 180;
        const lat2 = (λ2 * Math.PI) / 180;
        const dLon = (φ2 - φ1) * (Math.PI / 180);
        const y = Math.sin(dLon) * Math.cos(lat2);
        const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
        const brng = Math.atan2(y, x);
        return (brng * (180 / Math.PI) + 360) % 360;
      }

      destinationpoint = (point : any, brng : any, dist : any) => {
        dist = dist / 6378137;
        brng = brng * Math.PI / 180;
        var lat1 = point.lat * Math.PI / 180, lon1 = point.lng * Math.PI / 180;
        var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
        var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) * Math.cos(lat1), Math.cos(dist) - Math.sin(lat1) * Math.sin(lat2));
        return { lat: lat2 * 180 / Math.PI, lng: lon2 * 180 / Math.PI };
      }

      ngOnInit() {
      this.mapplsClassObject.map({ id:  "map", key:"<Token>", properties:  this.mapProps}, (data:  any)=>{
      this.mapObject  = data //callback function return map object
      this.curveLine({
        start: { lng: 77.27428863526279, lat: 28.550908438470714 },
        end: { lng: 77.53557294755876, lat: 28.660477852756003 },
        angle: 30 // less than 45 degree 
      },  (data:any) => {
        if (this.polylineObj)  this.mapplsClassObject.removeLayer({ map: this.mapObject, layer: this.polylineObj });
        this.polylineObj =  this.mapplsClassObject.Polyline({
            map: this.mapObject,
            path: data,
            strokeColor: "#333",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            fitbounds: true,
            dasharray: [2, 2],
        });
      });
      });
}
      }
      
      
      /* First install : npm install mappls-web-maps */
      
      import { mappls } from  'mappls-web-maps';
      import  './App.css';
      function  App() {
      const  styleMap  = {width:  '99%', height:  '99vh', display:'inline-block'}
      var mapObject ;
      var mapplsClassObject=  new  mappls();
      const title = "Bezier Curve Dashed Polyline";
  const mapProps = { center: [28.544, 77.2454] };
  mapplsClassObject.map(
    {
      id: "map",
      key: "<Token>",
      properties: mapProps,
    },
    (data) => {
        const mapObject = data;
        const curveLine = (p, call)=> {
            var strt,
              end,
              ang = 45;
            if (p.start != undefined) {
              strt = p.start;
            }
            if (p.end != undefined) {
              end = p.end;
            }
            if (p.angle != undefined) {
              ang = p.angle;
            }
            if (ang > 45) {
              console.log("Angle should be less than 45.");
              return false;
            }
            if (!strt || !end) {
              console.log("Start and End point required.");
              return false;
            }
            var st_lat = strt.lat,
              st_lng = strt.lng,
              end_lat = end.lat,
              end_lng = end.lng,
              fx = 1,
              fy = ang < 45 ? 0.8 : 1,
              points = [],
              path = [],
              resolution = 0.01;
            var bearing1 = bearing(st_lat, st_lng, end_lat, end_lng);
            bearing1 = bearing1 > 180 ? bearing1 + ang : bearing1 - ang;
            var dia = distance(st_lat, st_lng, end_lat, end_lng) * fx;
            var hyp = Math.sqrt(2) * ((dia * fy) / 2);
            var pos = destinationpoint(strt, bearing1, hyp);
            var mid_lat = pos.lat,
              mid_lng = pos.lng;
            for (let it = 0; it <= 1; it += resolution) {
              points.push(
                getBezier(
                  { x: st_lat, y: st_lng },
                  { x: mid_lat, y: mid_lng },
                  { x: end_lat, y: end_lng },
                  it
                )
              );
            }
            for (var i = 0; i < points.length - 1; i++) {
              path.push({ lat: points[i].x, lng: points[i].y });
            }
            setTimeout(() => {
              path.push(strt);
              return call(path);
            }, 100);
          };
        
         const B1 =  (t)=> {
            return t * t;
          };
          const B2 =  (t)=> {
            return 2 * (1 - t) * t;
          };
          const B3 =  (t)=> {
            return (1 - t) * (1 - t);
          };
        
        const  getBezier =  (C1, C2, C3, percent)=> {
            var pos = {};
            pos.x = C1.x * B1(percent) + C2.x * B2(percent) + C3.x * B3(percent);
            pos.y = C1.y * B1(percent) + C2.y * B2(percent) + C3.y * B3(percent);
            return pos;
        }
        const distance =  (lat1, lon1, lat2, lon2)=> {
            const R = 6378137; // metres
            const φ1 = (lat1 * Math.PI) / 180; // φ, λ in radians
            const φ2 = (lat2 * Math.PI) / 180;
            const Δφ = ((lat2 - lat1) * Math.PI) / 180;
            const Δλ = ((lon2 - lon1) * Math.PI) / 180;
            const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const d = R * c; // in metres
            return d;
        }
        const bearing =  (λ1, φ1, λ2, φ2)=> {
            const lat1 = (λ1 * Math.PI) / 180;
            const lat2 = (λ2 * Math.PI) / 180;
            const dLon = (φ2 - φ1) * (Math.PI / 180);
            const y = Math.sin(dLon) * Math.cos(lat2);
            const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
            const brng = Math.atan2(y, x);
            return (brng * (180 / Math.PI) + 360) % 360;
        }
        const destinationpoint = (point, brng, dist)=> {
            dist = dist / 6378137;
            brng = brng * Math.PI / 180;
            var lat1 = point.lat * Math.PI / 180, lon1 = point.lng * Math.PI / 180;
            var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
            var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) * Math.cos(lat1), Math.cos(dist) - Math.sin(lat1) * Math.sin(lat2));
            return { lat: lat2 * 180 / Math.PI, lng: lon2 * 180 / Math.PI };
        }
      mapObject.addListener('load',()=> {
        curveLine({
            start: { lng: 77.27428863526279, lat: 28.550908438470714 },
            end: { lng: 77.53557294755876, lat: 28.660477852756003 },
            angle: 30 // lessthan 45 deegree 
        }, function (data) {
            console.log(data);
            // if (polyline) mapplsClassObject.remove({ map: mapObject, layer: polyline });
           const polyline = new mapplsClassObject.Polyline({
                map: mapObject,
                path: data,
                strokeColor: "#333",
                strokeOpacity: 1.0,
                strokeWeight: 2,
                fitbounds: true,
                dasharray: [2, 2],
            });
        });
    })
    }
  );
      return (
         <div  id="map"  style={styleMap}></div>
         );
      }
      export  default  App;
Product release
Boost your businesses with Mappls’ industry-leading optimisation APIs and SDKs to bring the best and most efficient ways to deliver goods, save time and increase profits.
Business : +91-7829 774 111
Support : +91-9999 333 223