My mapple-map Package

A simple component to integrate with your react app

Usage

import {MappleGeoMap} from "my-mapple-map-v4"

<MappleGeoMap {{mapplsAPI:"your MAP My INDIA API Key", webSocket:"your Backend web Socket URL"}}/>

This is the GeoData format you are responsible to send from backend throw the socket URL

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties":
            {
                "isCar": true,                          // It should alwasy true for your vehicle marker *******************
                "description": "Your Car Description",
                "CarNumber": "Your Car Number",
                "ModelName": "Your car Model Name",
                "icon":"image.png",
                "icon-size":.1,
                "text":"sample text",
                "text-size":10,
                "text-offset":[0,.6],
                "path":[
                    [
                        {lat:000.00, lng:000.00},       //Sample Path for your car
                        {lat:000.00, lng:000.00},       
                        .....
                    ],
                    [
                        {lat:000.00, lng:000.00},      //Sample Path for your car
                        {lat:000.00, lng:000.00},
                        .....
                    ]
                    .....
                ]
        },
        "geometry": {"type": "Point",
        "coordinates": [000.00, 000.00]} // put your car coordiantes as format [latitude , longitude]
        },
        {
            .....
        }
    ]
}

This is a Sample Code Snapshot for the Backend Server

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8082 });

const carPaths1 = [
        {lat: 22.581385473816916, lng: 88.44810588794509 }, // DLF 1 Bus Stop
        {lat:22.581568475106437, lng:88.45006412832137},
        {lat:22.581680391129435, lng:88.45100190072893},
        {lat: 22.5818099779927, lng: 88.451895017266},
        {lat:22.581880661682774, lng:88.45322193333469},
        {lat:22.58168039113171, lng:88.45505920169391},
        {lat:22.581415326706935, lng:88.45653922343774},
        {lat:22.58193748076171, lng:88.45337912868101},
        {lat:22.58099883558002, lng:88.45894757031245},
        {lat:22.578733062893352, lng: 88.47188319459941},
        {lat:22.582755695583312, lng:88.47336242427026},
        {lat:22.587451159799368, lng:88.47486446136038}, 
        {lat:22.589298042905188, lng:88.47465725121184}, 
        {lat:22.5951735084541, lng:88.47258021475571}, 
        {lat:22.600082306411608, lng:88.47099055747286}, 
        {lat:22.605446109930035, lng:88.46918618951392}, 
        {lat:22.618138501420635, lng:88.464639182219} ,
        {lat:22.619204475720935, lng:88.46368286717582},
        {lat:22.618738112981283, lng:88.46413395917733},
        {lat:22.619254443063515, lng:88.46364677981572},
        {lat:22.619387689221647, lng:88.46281677053295},
        {lat:22.619620869687683, lng:88.46213111069069},
        {lat:22.619854049758327, lng:88.46018239324421},
        {lat:22.620720143763975, lng:88.45498581361677},
        {lat:22.621502954773995, lng:88.45045685009313},
        {lat:22.62211920712505, lng:88.44753377405561},
        {lat:22.622419004565906, lng:88.4451159209702},
        {lat:22.622985286811353, lng:88.44203045171078},
        {lat:22.6235182562077, lng:88.44118239874797}
 ]

const carPaths2 = [
    {lat: 22.64198836026624, lng: 88.43443781611492}, // Airtport 1 No Gate
    {lat: 22.64114814965702, lng: 88.43285983816853},
    {lat: 22.640461973781083, lng: 88.43261707228123},
    {lat: 22.638374798266135, lng: 88.43349157334518},
    {lat: 22.634217886631983, lng: 88.43456331325213},
    {lat: 22.63405235147564, lng: 88.4328987254211},
    {lat: 22.63423554518796, lng: 88.42961477586908},
    {lat: 22.631937279110282, lng: 88.42600604009765},
    {lat: 22.632053858676016, lng: 88.42555494793731},
    {lat: 22.630704859656337, lng: 88.42447232720589},
    {lat: 22.63150426808123, lng: 88.42281230875102},
    {lat: 22.63085474909019, lng: 88.42203643056015},
    {lat: 22.628673008981732, lng: 88.42059293625161},
    {lat: 22.62749052464961, lng: 88.4190231359632},
    {lat: 22.62619144566303, lng: 88.41797660258948},
    {lat: 22.624126217900304, lng: 88.4167496324272},
    {lat: 22.623126903006305, lng: 88.4147287403952},
    {lat: 22.620351251819265, lng: 88.41373670662014},
    {lat: 22.61985279572185, lng: 88.41600926827887},
    {lat: 22.619733953170567, lng: 88.41658862540336},
    {lat: 22.61967453185643, lng: 88.41742547458321},
    {lat: 22.618783209062823, lng: 88.4181121200641},
    {lat: 22.618842630762128, lng: 88.42077287130253},
    {lat: 22.61872152370985, lng: 88.42117910049788},
    {lat: 22.61703586433895, lng: 88.420321938713},
    {lat: 22.61672469917615, lng: 88.4200426710882},
    {lat: 22.615821303724776, lng: 88.42024568628052},
    {lat: 22.61510508553391, lng: 88.42011938052853},
    {lat: 22.613322851988436, lng: 88.42255527717427},
    {lat: 22.612223518753257, lng: 88.42428747052924},
    {lat: 22.611873729093237, lng: 88.4250633487201},
    {lat: 22.6115239385438, lng: 88.42569487748011},
    {lat: 22.611174147104958, lng: 88.42591140162638},
    {lat: 22.610824354776685, lng: 88.42681358556925},
    {lat: 22.61039127732849, lng: 88.42778794422753},
    {lat: 22.617590033692068, lng: 88.43199604860364},
    {lat: 22.610306744925634, lng: 88.42814214078888},
    {lat: 22.604630509997932, lng: 88.42520270871421},
    {lat: 22.60339786446535, lng: 88.4239888795247},
    {lat: 22.603071882813634, lng: 88.42336240222325},
    {lat: 22.602705406582864, lng: 88.42194619591892},
    {lat: 22.60263607313212, lng: 88.42102351605398},
    {lat: 22.603588010982804, lng: 88.41442809873779},
    {lat: 22.60332215938945, lng: 88.41295229905536},
    {lat: 22.600932608019107, lng: 88.40871276638005},
    {lat: 22.60076474147779, lng: 88.40874202987878},
    {lat: 22.60024968489026, lng: 88.40910681029051},
    {lat: 22.599434377670367, lng: 88.40781429734486},
    {lat: 22.590752863082788, lng: 88.41386435120263},
    {lat: 22.58965334959714, lng: 88.4186639699922},
    {lat: 22.585358774624908, lng: 88.42197620520034},
    {lat: 22.57955931082199, lng: 88.42610073857115},
    {lat: 22.578876022089197, lng: 88.42666212616398},
    {lat: 22.577547721093044, lng: 88.42766021515595},
    {lat: 22.57576452405259, lng: 88.43143676544986},
    {lat: 22.574024301473447, lng: 88.43529671781509} // Tuteck Head Office Kolkata
]



const fackeLocationList = {
    "DL-1-2345": carPaths1,
    "DL-2-3456": carPaths2,
}

function getNextGeoData(carIndex1, carIndex2) {
   return {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties":
            {
            "isCar": true,
                "description": "Car 1 Description",
                "CarNumber": "DL-1-2345",
                "ModelName": "Maruti Swift",
                // "icon":"../../../../public/assets/images/image.png",//../../../../public/assets/images/image.png
                "icon-size":.1,
                // "icon-offset":[0,-10],
                "text":"1",
                "text-size":10,
                "text-offset":[0,.6],
                "path":[
                    [
                        {lat: 22.581385473816916, lng: 88.44810588794509 }, // DLF 1 Bus Stop
                        {lat:22.58193748076171, lng:88.45337912868101},
                        {lat:22.58099883558002, lng:88.45894757031245},
                        {lat:22.578733062893352, lng: 88.47188319459941},
                        {lat:22.582755695583312, lng:88.47336242427026},
                        {lat:22.587451159799368, lng:88.47486446136038}, 
                        {lat:22.589298042905188, lng:88.47465725121184}, 
                        {lat:22.5951735084541, lng:88.47258021475571}, 
                        {lat:22.600082306411608, lng:88.47099055747286}, 
                        {lat:22.605446109930035, lng:88.46918618951392}, 
                        {lat:22.618138501420635, lng:88.464639182219} ,
                        {lat:22.619204475720935, lng:88.46368286717582},
                        {lat:22.618738112981283, lng:88.46413395917733},
                        {lat:22.619254443063515, lng:88.46364677981572},
                        {lat:22.619387689221647, lng:88.46281677053295},
                        {lat:22.619620869687683, lng:88.46213111069069},
                        {lat:22.619854049758327, lng:88.46018239324421},
                        {lat:22.620720143763975, lng:88.45498581361677},
                        {lat:22.621502954773995, lng:88.45045685009313},
                        {lat:22.62211920712505, lng:88.44753377405561},
                        {lat:22.622419004565906, lng:88.4451159209702},
                        {lat:22.622985286811353, lng:88.44203045171078},
                        {lat:22.6235182562077, lng:88.44118239874797} // ChinarPark
                    ],

                    [
                        {lat:22.581384581634993, lng:88.4485554483311},  // DLF 1 Bus Stop
                        {lat:22.581539011691657, lng:88.4500508829204},
                        {lat:22.581734108866947, lng:88.45157671459403},
                        {lat:22.581871607012374, lng:88.45333060396322},
                        {lat:22.581741747660768, lng:88.45467084038732},
                        {lat:22.58146675097348, lng:88.45628822421598},
                        {lat:22.58122612842181, lng:88.45742990691858},
                        {lat:22.58102369959039, lng:88.45879909893047},
                        {lat:22.58065703530306, lng:88.46083840902863},
                        {lat:22.580309467207996, lng:88.4628529000303},
                        {lat:22.57996571768569, lng:88.46499148691655},
                        {lat:22.57954939766305, lng:88.46734103691806},
                        {lat:22.57917890998513, lng:88.46935139130733},
                        {lat:22.578961200259617, lng:88.4709067272549},
                        {lat:22.578252742634383, lng:88.47423612740741},
                        {lat:22.57758294550821, lng:88.47732489528363},
                        {lat:22.57697256304962, lng:88.47865868137393},
                        {lat:22.576068119278005, lng:88.47959457073672},
                        {lat:22.575575744934994, lng:88.47987209155085},
                        {lat:22.575781303755953, lng:88.48058168403621},
                        {lat:22.5767191619858, lng:88.48232088130428},
                        {lat:22.577592777685048, lng:88.4838792021842},
                        {lat:22.578646247981283, lng:88.4852566464205},
                        {lat:22.580162203297352, lng:88.48692627579784},
                        {lat:22.580367755324204, lng:88.48702367091904},
                        {lat:22.581895808080787, lng:88.48823841988049},
                        {lat:22.582851858516893, lng:88.4894786069469},
                        {lat:22.583489221814542, lng:88.48999925153497},
                        {lat:22.583813303702954, lng:88.49002265129093},
                        {lat:22.583880820666685, lng:88.49001680135224},
                        {lat:22.584081364296495, lng:88.48984930690253},
                        {lat:22.585029511759984, lng:88.4889137921084},
                        {lat:22.586066559554958, lng:88.48753320647775},
                        {lat:22.587065790928207, lng:88.48636906858425},
                        {lat:22.58805961383075, lng:88.4854096785895},
                        {lat:22.58926947554524, lng:88.48429819013556},
                        {lat:22.59043071671487, lng:88.48337974971373},
                        {lat:22.59188900575446, lng:88.48202256380159},
                        {lat:22.59278274958686, lng:88.48110997785884},
                        {lat:22.594043169537013, lng:88.48022962010108},
                        {lat:22.595858097901115, lng:88.47931408004101},
                        {lat:22.59826748130405, lng:88.47840370814886},
                        {lat:22.602988069647022, lng:88.4768105572925},
                        {lat:22.607106195488086, lng:88.47539948085968},
                        {lat:22.60728828666728, lng:88.47533878935138},
                        {lat:22.6110867654322, lng:88.47396322390803},
                        {lat:22.614714376359736, lng:88.47255975506353},
                        {lat:22.61596281784561, lng:88.46988040530516},
                        {lat:22.617140582337292, lng:88.46771140799999},
                        {lat:22.6179061238483, lng:88.46692036192401},
                        {lat:22.618795324407554, lng:88.46587246932339},
                        {lat:22.61906031683966, lng:88.46523452893949},
                        {lat:22.619030873261313, lng:88.46496659397829},
                        {lat:22.61894505353429, lng:88.46455887523229},
                        {lat:22.619278169436992, lng:88.46403560854546},
                        {lat:22.619494694341014, lng:88.46365669128944},
                        {lat:22.62046072437445, lng:88.45800901980714},
                        {lat:22.621676580144143, lng:88.45080959159999},
                        {lat:22.623025667806573, lng:88.44288841613592},
                        {lat:22.623225531513622, lng:88.44198623219305},
                        {lat:22.6235182562077, lng:88.44118239874797}  // ChinarPark
                    ],

                    [
                        {lat:22.581337882888434, lng:88.44806975305745}, // DLF 1 Bus Stop
                        {lat:22.580981657647826, lng:88.4442197689599},
                        {lat:22.580358261289128, lng:88.44264441019098},
                        {lat:22.580341807850882, lng:88.44259105391384},
                        {lat:22.580219309580077, lng:88.44070421589184},
                        {lat:22.580437084208434, lng:88.43881737786982},
                        {lat:22.580437084208434, lng:88.43809507268952},
                        {lat:22.58066501611861, lng:88.43786709484424},
                        {lat:22.580906592403284, lng:88.43736187183623},
                        {lat:22.582393526778738, lng:88.43408694400412},
                        {lat:22.583091945700332, lng:88.43309839053995},
                        {lat:22.58335713527811, lng:88.4333439515553},
                        {lat:22.583807455921978, lng:88.43314256832734},
                        {lat:22.58939614557522, lng:88.42926637109093},
                        {lat:22.589655400141364, lng:88.4294067694791},
                        {lat:22.590592234247225, lng:88.4310904900633},
                        {lat:22.590846572539657, lng:88.43142499516883},
                        {lat:22.591048053153816, lng:88.43185408655107},
                        {lat:22.59368323221338, lng:88.4301746547062},
                        {lat:22.59834241095002, lng:88.42707225593661},
                        {lat:22.600740680757664, lng:88.42533491269353},
                        {lat:22.601405500200887, lng:88.42441848901746},
                        {lat:22.60181011795778, lng:88.42352801997748},
                        {lat:22.60215534277715, lng:88.42273059775252},
                        {lat:22.602250729177705, lng:88.42262203069372},
                        {lat:22.60277783256597, lng:88.42302074343365},
                        {lat:22.603007519465045, lng:88.42337161067485},
                        {lat:22.603246040058863, lng:88.42371290881276},
                        {lat:22.604998123044464, lng:88.42559802271995},
                        {lat:22.608412673947235, lng:88.42720920896824},
                        {lat:22.61294844706095, lng:88.42969000743469},
                        {lat:22.620563317951852, lng:88.43784292267242},
                        {lat:22.6235182562077, lng:88.44118239874797}  // ChinarPark

                    ]
            ]
        },
        "geometry": {"type": "Point",
        "coordinates": getFakeCurrentLocation("DL-1-2345",carIndex1)}
        },
        {
        "type": "Feature",
        "properties":
            {
                "isCar": true,
                "description": "Car 2 Description",
                "CarNumber": "DL-2-3456",
                "ModelName": "Hyundai i20",
                // "icon":"../../../../public/assets/images/image.png",
                "icon-size":.1,
                // "icon-offset":[0,-10],
                "text":"2",
                "text-size":10,
                "text-offset":[0,.6],
                "path":[[
                    {lat: 22.64198836026624, lng: 88.43443781611492}, // Airtport 1 No Gate
                    {lat: 22.64114814965702, lng: 88.43285983816853},
                    {lat: 22.640461973781083, lng: 88.43261707228123},
                    {lat: 22.638374798266135, lng: 88.43349157334518},
                    {lat: 22.634217886631983, lng: 88.43456331325213},
                    {lat: 22.629936628226776, lng: 88.43391913177844},
                    {lat: 22.617590033692068, lng: 88.43199604860364},
                    {lat: 22.610306744925634, lng: 88.42814214078888},
                    {lat: 22.604630509997932, lng: 88.42520270871421},
                    {lat: 22.60339786446535, lng: 88.4239888795247},
                    {lat: 22.603071882813634, lng: 88.42336240222325},
                    {lat: 22.602705406582864, lng: 88.42194619591892},
                    {lat: 22.60263607313212, lng: 88.42102351605398},
                    {lat: 22.603588010982804, lng: 88.41442809873779},
                    {lat: 22.60332215938945, lng: 88.41295229905536},
                    {lat: 22.600932608019107, lng: 88.40871276638005},
                    {lat: 22.60076474147779, lng: 88.40874202987878},
                    {lat: 22.60024968489026, lng: 88.40910681029051},
                    {lat: 22.599434377670367, lng: 88.40781429734486},
                    {lat: 22.590752863082788, lng: 88.41386435120263},
                    {lat: 22.58965334959714, lng: 88.4186639699922},
                    {lat: 22.585358774624908, lng: 88.42197620520034},
                    {lat: 22.57955931082199, lng: 88.42610073857115},
                    {lat: 22.578876022089197, lng: 88.42666212616398},
                    {lat: 22.577547721093044, lng: 88.42766021515595},
                    {lat: 22.57576452405259, lng: 88.43143676544986},
                    {lat: 22.574024301473447, lng: 88.43529671781509} // Tuteck Head Office Kolkata
                ],
                [
                    {lat: 22.64192548439216, lng: 88.43440148586693},
                    {lat: 22.64096558495275, lng: 88.43306427314778},
                    {lat: 22.640494203307988, lng: 88.43297141115339},
                    {lat: 22.63913147272872, lng: 88.43380716910285},
                    {lat: 22.63373503391104, lng: 88.4349670961261},
                    {lat: 22.63249693230597, lng: 88.4347889675507},
                    {lat: 22.628925108866202, lng: 88.43406254737113},
                    {lat: 22.626885121546263, lng: 88.43364466839637},
                    {lat: 22.626713692608703, lng: 88.43379324767764},
                    {lat: 22.626533692049538, lng: 88.43398825786585},
                    {lat: 22.62520510919371, lng: 88.43798132372558},
                    {lat: 22.623773653951723, lng: 88.44097147994478},
                    {lat: 22.62329364167141, lng: 88.44177937929592},
                    {lat: 22.61951348631415, lng: 88.46375981448115},
                    {lat: 22.618794659004806, lng: 88.46470936057335},
                    {lat: 22.58946803103382, lng: 88.4749426387555},
                    {lat: 22.588372159474037, lng: 88.47503634353731},
                    {lat: 22.587305118260705, lng: 88.47500510861003},
                    {lat: 22.586584139788023, lng: 88.47484893397366},
                    {lat: 22.57856597805309, lng: 88.47189202978981},
                    {lat: 22.57853747641283, lng: 88.47180762858146},
                    {lat: 22.580157127238706, lng: 88.46297755623958},
                    {lat: 22.581533417037868, lng: 88.45498632688418},
                    {lat: 22.58164861247529, lng: 88.45383721833018},
                    {lat: 22.581624360814633, lng: 88.45258304829308},
                    {lat: 22.580975627226064, lng: 88.44603641244464},
                    {lat: 22.580799801713486, lng: 88.44406651206631},
                    {lat: 22.580200379642047, lng: 88.4425626894919},
                    {lat: 22.580164001763496, lng: 88.4416040046411},
                    {lat: 22.579982112226734, lng: 88.44057965644436},
                    {lat: 22.579761775920566, lng: 88.44033491057999},
                    {lat: 22.576770428027405, lng: 88.43883667926929},
                    {lat: 22.576294546270912, lng: 88.4398518144058},
                    {lat: 22.574726683926333, lng: 88.4390878494669},
                    {lat: 22.57280713108163, lng: 88.43823154785794},
                    {lat: 22.572728446798934, lng: 88.43812261908674},
                    {lat: 22.574000421905943, lng: 88.43527025608438} // Tuteck Head Office Kolkata
                ]]
        },
        "geometry": {"type": "Point",
        "coordinates": getFakeCurrentLocation("DL-2-3456",carIndex2)}
        },
    ]
}
}

function getFakeCurrentLocation(CarId, indexOfCarPath){
    const currentCarLocation = fackeLocationList[CarId][indexOfCarPath];
    return currentCarLocation ? [currentCarLocation.lat, currentCarLocation.lng]: null;
}

wss.on('connection', ws => {
    console.log("Client connected");

    let carIndex1 = 0;
    let carIndex2 = 0;

    const interval = setInterval(() => {
        const data = getNextGeoData(carIndex1, carIndex2);
        ws.send( JSON.stringify(data) );
        carIndex1 = (carIndex1 + 1) % carPaths1.length; 
        carIndex2 = (carIndex2 + 1) % carPaths2.length; 

    }, 3000);

    ws.on('close', () => {
        clearInterval(interval);
        console.log("Client disconnected");
    });
});

console.log("WebSocket server running on ws://localhost:8082");