Menu
Close

Bezier Curve Polyline

Sample Implementation

    
      
      <html>
        <head>
          <title>Bezier Curve 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) {
                    if (polyline) mappls.remove({ map: map, layer: polyline });
                    polyline = new mappls.Polyline({
                        map: map,
                        paths: data,
                        strokeColor: "#333",
                        strokeOpacity: 1.0,
                        strokeWeight: 2,
                        fitbounds: true,
                    });
                });
            })
        }
    </script>
        </body>
      </html>
      
      
      
    
  
Call at Mappls
Product release

Personalisation SDK, by Mappls, is India's first O2O engagement tool that can 3X your customer engagement, retention and conversion.

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.

or