My mapple-map Package

A simple component to integrate with your react app

Usage

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


`

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

`json

{
"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

`js
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");

``