5

I got this GeoJSON from Geoserver, having 2 different types of geometry type i.e. Polygon & LineString which I want to style differently i.e polygon with different colour & line with different colour.

The GeoJSON from Geoserver URL is as follows

{"type":"FeatureCollection","features":[{"type":"Feature","id":"INDIA_DIST_717_GCS.fid-7165b83f_17ec626fcae_2492","geometry":{"type":"Polygon","coordinates":[[[77.19886222,28.68648361],[77.20063225,28.68325992],[77.2070568,28.68135635],[77.21419518,28.6815943],[77.21966794,28.68516349],[77.22109562,28.69135009],[77.21909473,28.69985388],[77.22091961,28.70479139],[77.22077629,28.70609661],[77.22299919,28.71466881],[77.22157151,28.718238],[77.21966794,28.72156925],[77.21490902,28.72299692],[77.2101501,28.72537638],[77.20348761,28.72680406],[77.20063225,28.72537638],[77.19563538,28.72347281],[77.1946836,28.72585227],[77.1915903,28.72704201],[77.18825905,28.73132504],[77.18302424,28.73537012],[77.17826532,28.73774958],[77.17802737,28.74274645],[77.18064478,28.74441207],[77.18564165,28.74512591],[77.18516576,28.74750537],[77.18326219,28.75036072],[77.17985384,28.75697345],[77.18263439,28.76589371],[77.18934396,28.7660118],[77.21052226,28.78512337],[77.21291649,28.7826737],[77.214344,28.78212268],[77.21329286,28.77891617],[77.21487985,28.77467261],[77.21535579,28.7700811],[77.22309772,28.75740185],[77.23118146,28.74604219],[77.24602265,28.73249849],[77.24447918,28.70125628],[77.24341252,28.69893773],[77.242228,28.66835722],[77.24683587,28.66219308],[77.25020969,28.66126535],[77.25066034,28.66105188],[77.25057487,28.66160025],[77.25510434,28.66167805],[77.25702548,28.65827558],[77.25821521,28.65589612],[77.25988083,28.65256488],[77.26083262,28.65137515],[77.26273618,28.6511372],[77.26559154,28.64947158],[77.26773305,28.64709212],[77.267971,28.64447471],[77.26844689,28.64114346],[77.26701921,28.63662249],[77.2648777,28.63043589],[77.26041763,28.62146749],[77.25705349,28.62129086],[77.24232154,28.63056745],[77.23747368,28.63081229],[77.2321803,28.63433555],[77.22051222,28.63971957],[77.20081329,28.63773235],[77.19679132,28.63437549],[77.19053547,28.63097923],[77.1876979,28.62468523],[77.1867211,28.62425017],[77.18691352,28.62459838],[77.18639978,28.6250822],[77.18395439,28.62583001],[77.18780029,28.63030264],[77.18976021,28.63271484],[77.19368004,28.63497628],[77.19453912,28.63688009],[77.19329285,28.63826603],[77.19150826,28.64254906],[77.19008058,28.64576133],[77.18825011,28.6496708],[77.18707341,28.65227906],[77.18587936,28.65646007],[77.18585946,28.65652975],[77.17283954,28.65564257],[77.17130498,28.65758713],[77.16749833,28.66113447],[77.17072312,28.66677811],[77.17093248,28.66693439],[77.17658537,28.67115381],[77.1782239,28.68104105],[77.18253744,28.68801789],[77.18702255,28.68743972],[77.19223781,28.68753146],[77.19886222,28.68648361]]]},"geometry_name":"geometry","properties":{"fid":138,"state_name":"Delhi","state_id":"7","district_name":"CENTRAL-DELHI","district_id":95}},{"type":"Feature","id":"INDIA_DIST_717_GCS.fid-7165b83f_17ec626fcae_2493","geometry":{"type":"Polygon","coordinates":[[[76.96584863,28.81351167],[76.96771995,28.80494727],[76.96879071,28.79887965],[76.97164606,28.79316894],[76.97557217,28.79102743],[76.9798552,28.78959975],[76.98342439,28.78852899],[76.98806434,28.7867444],[76.99270429,28.7831752],[76.99805808,28.78067677],[77.00733797,28.77996293],[77.01447636,28.7774645],[77.01483328,28.76854152],[77.01483328,28.76211697],[77.01590403,28.75676319],[77.02018706,28.75212324],[77.02589777,28.74855405],[77.03517767,28.74569869],[77.03838994,28.74498485],[77.04445757,28.74320026],[77.04838368,28.74070182],[77.05195287,28.74034491],[77.05659282,28.73963107],[77.0655158,28.73713263],[77.07158342,28.73249268],[77.07443877,28.72963733],[77.08193408,28.72499738],[77.08586019,28.72606814],[77.09014322,28.73177885],[77.09656776,28.73356344],[77.09978003,28.73499112],[77.10441998,28.73499112],[77.10834609,28.73356344],[77.11298604,28.72785274],[77.1158414,28.72428354],[77.11869675,28.71714516],[77.12012443,28.71286213],[77.12405054,28.70429607],[77.12690589,28.70286839],[77.13297352,28.70536683],[77.13547195,28.70893602],[77.13582887,28.71107754],[77.14082574,28.71678824],[77.14582261,28.71964359],[77.14796412,28.72285587],[77.15117639,28.72356971],[77.15617326,28.72428354],[77.15974245,28.72749582],[77.16509624,28.72749582],[77.16652392,28.72071435],[77.16581008,28.717859],[77.16581008,28.71357597],[77.166167,28.70893602],[77.16473932,28.70358223],[77.16581008,28.69822845],[77.17294846,28.69680077],[77.17758841,28.69680077],[77.18080068,28.69680077],[77.1829422,28.69537309],[77.18758215,28.69287466],[77.19223781,28.68753146],[77.18702255,28.68743972],[77.18253744,28.68801789],[77.1782239,28.68104105],[77.17658537,28.67115381],[77.17093248,28.66693439],[77.16688622,28.67163931],[77.15494464,28.67241291],[77.15265711,28.67467244],[77.11951433,28.67374964],[77.11127409,28.67557252],[77.09835667,28.68618258],[77.08622567,28.67906097],[77.07976212,28.68452934],[77.07606028,28.6834758],[77.07152833,28.68602168],[77.06379885,28.68193647],[77.05812586,28.68544683],[77.04471569,28.68519933],[77.02600405,28.68846683],[77.01090496,28.68095556],[76.99863665,28.67973969],[76.97816297,28.69414135],[76.96372127,28.69341223],[76.96409474,28.69397837],[76.96450443,28.69882057],[76.96085908,28.70321867],[76.95117244,28.71049658],[76.96060605,28.72992596],[76.95915313,28.73496173],[76.96026542,28.74011966],[76.95739735,28.74460099],[76.94816892,28.75310703],[76.95658062,28.7675122],[76.95397162,28.772012],[76.95234458,28.78124495],[76.95311925,28.78860196],[76.9475061,28.7969928],[76.94740075,28.80264981],[76.95237135,28.81417721],[76.95828556,28.81115307],[76.96584863,28.81351167]]]},"geometry_name":"geometry","properties":{"fid":143,"state_name":"Delhi","state_id":"7","district_name":"NORTH-WEST-DELHI","district_id":90}},{"type":"Feature","id":"INDIA_DIST_717_GCS.fid-7165b83f_17ec626fcae_2494","geometry":{"type":"Polygon","coordinates":[[[77.19453912,28.63688009],[77.19368004,28.63497628],[77.18976021,28.63271484],[77.18780029,28.63030264],[77.18395439,28.62583001],[77.17830225,28.62755845],[77.17330538,28.62934305],[77.16723775,28.63077073],[77.16259781,28.633983],[77.15867169,28.63648143],[77.15438866,28.63683835],[77.14739397,28.63885969],[77.14425572,28.63669442],[77.13837858,28.63308379],[77.13047552,28.63118924],[77.12016851,28.61873449],[77.11303701,28.61217887],[77.10776942,28.61091501],[77.09173502,28.61705058],[77.08577819,28.61694196],[77.07585016,28.61676043],[77.06064105,28.61589689],[77.05478117,28.61169905],[77.03823525,28.61139295],[77.03685589,28.61370442],[77.03408309,28.6189113],[77.02867642,28.62348484],[77.02531102,28.6257592],[77.01995973,28.62799643],[77.01200264,28.62843198],[77.00793269,28.63244553],[77.0038484,28.63704293],[76.99700294,28.64626223],[76.98828351,28.65077193],[76.97891558,28.65468463],[76.968828,28.66092003],[76.96282635,28.6625587],[76.95757245,28.66070603],[76.95218979,28.66410878],[76.95208088,28.66854839],[76.95238879,28.66856472],[76.95710296,28.67061319],[76.95579604,28.67693196],[76.95824479,28.68144158],[76.9598786,28.68758687],[76.96372127,28.69341223],[76.97816297,28.69414135],[76.99863665,28.67973969],[77.01090496,28.68095556],[77.02600405,28.68846683],[77.04471569,28.68519933],[77.05812586,28.68544683],[77.06379885,28.68193647],[77.07152833,28.68602168],[77.07606028,28.6834758],[77.07976212,28.68452934],[77.08622567,28.67906097],[77.09835667,28.68618258],[77.11127409,28.67557252],[77.11951433,28.67374964],[77.15265711,28.67467244],[77.15494464,28.67241291],[77.16688622,28.67163931],[77.17093248,28.66693439],[77.17072312,28.66677811],[77.16749833,28.66113447],[77.17130498,28.65758713],[77.17283954,28.65564257],[77.18585946,28.65652975],[77.18587936,28.65646007],[77.18707341,28.65227906],[77.18825011,28.6496708],[77.19008058,28.64576133],[77.19150826,28.64254906],[77.19329285,28.63826603],[77.19453912,28.63688009]]]},"geometry_name":"geometry","properties":{"fid":148,"state_name":"Delhi","state_id":"7","district_name":"WEST-DELHI\n","district_id":96}},{"type":"Feature","id":"INDIA_DIST_717_GCS.fid-7165b83f_17ec626fcae_2495","geometry":{"type":"Polygon","coordinates":[[[76.91889812,28.82120806],[76.92440642,28.8200071],[76.93378263,28.82285602],[76.9440744,28.8198429],[76.95237135,28.81417721],[76.94740075,28.80264981],[76.9475061,28.7969928],[76.95311925,28.78860196],[76.95234458,28.78124495],[76.95397162,28.772012],[76.95658062,28.7675122],[76.94816892,28.75310703],[76.95739735,28.74460099],[76.96026542,28.74011966],[76.95915313,28.73496173],[76.96060605,28.72992596],[76.95117244,28.71049658],[76.96085908,28.70321867],[76.96450443,28.69882057],[76.96409474,28.69397837],[76.96372127,28.69341223],[76.9598786,28.68758687],[76.95824479,28.68144158],[76.95579604,28.67693196],[76.95710296,28.67061319],[76.95238879,28.66856472],[76.95208088,28.66854839],[76.93955322,28.66788359],[76.93291729,28.66268772],[76.92727592,28.65073561],[76.92798056,28.64674004],[76.94367249,28.63110087],[76.93572361,28.62270985],[76.93340652,28.62211032],[76.92009986,28.63129934],[76.9137507,28.63141526],[76.90700963,28.62628019],[76.90341271,28.62623339],[76.8876576,28.63113361],[76.87055847,28.59601798],[76.86444686,28.58585593],[76.85985871,28.58363249],[76.84464047,28.58492883],[76.84251436,28.57603269],[76.84717142,28.55050676],[76.86630759,28.54131346],[76.86877346,28.53541595],[76.88586107,28.52187185],[76.88899489,28.51746424],[76.88332862,28.50786549],[76.88889065,28.50251882],[76.88049592,28.49767485],[76.86410045,28.49808744],[76.82931936,28.50198334],[76.8255144,28.50147635],[76.82304234,28.49922018],[76.8133123,28.47462081],[76.79492848,28.46573164],[76.78924846,28.46589265],[76.7785889,28.47155082],[76.77662944,28.47342],[76.77222182,28.47396404],[76.76860207,28.47206452],[76.7634922,28.46386679],[76.76057854,28.46149042],[76.75225626,28.46152299],[76.74429027,28.46361804],[76.73919065,28.46848318],[76.73137486,28.4813452],[76.72111046,28.48762243],[76.70954791,28.48971975],[76.70767103,28.47938461],[76.71077926,28.46465089],[76.71036753,28.45704542],[76.71357031,28.45464538],[76.713625,28.45257382],[76.71291691,28.44608201],[76.7184433,28.43660951],[76.71619516,28.43293589],[76.71368153,28.42822036],[76.71016052,28.41726556],[76.70809094,28.40685869],[76.7088136,28.4016915],[76.71095271,28.39836728],[76.7142427,28.39584408],[76.72312431,28.39239948],[76.72972375,28.38657553],[76.73426591,28.38096823],[76.73528695,28.37554774],[76.73400612,28.36852531],[76.7303559,28.36249065],[76.72577324,28.35850966],[76.719652,28.3573472],[76.71318344,28.35825033],[76.70819925,28.35840651],[76.69762466,28.3594832],[76.69787627,28.36104316],[76.69837951,28.36416307],[76.69862427,28.36598199],[76.69708474,28.3688004],[76.6822512,28.37574745],[76.6740577,28.37861882],[76.66656742,28.37673328],[76.6671559,28.37940125],[76.66453378,28.38779042],[76.6596291,28.39438312],[76.65190373,28.39969113],[76.64563675,28.40825549],[76.63788813,28.41696724],[76.62997865,28.42285296],[76.6218452,28.42672816],[76.61514196,28.42753121],[76.61399342,28.42576306],[76.60945498,28.41875107],[76.60451029,28.40247869],[76.59678427,28.40100465],[76.59333153,28.40093086],[76.5898788,28.40085699],[76.57746578,28.39997988],[76.57062763,28.39738909],[76.56736011,28.39059839],[76.56267834,28.38499892],[76.55927666,28.38309263],[76.55228774,28.38599627],[76.55210184,28.39271264],[76.54644245,28.39747758],[76.53882975,28.39792331],[76.52505338,28.39640153],[76.51868518,28.40176096],[76.51842917,28.41091937],[76.51900031,28.41520834],[76.51527387,28.42490163],[76.4971104,28.43183438],[76.48738886,28.43345314],[76.48326182,28.43275121],[76.46896471,28.42510405],[76.44959132,28.42589543],[76.44390906,28.43126702],[76.44231834,28.4385625],[76.44214388,28.44466769],[76.43514877,28.44756592],[76.43830578,28.45802178],[76.43201819,28.46032474],[76.42303707,28.46012346],[76.41063692,28.45862294],[76.40907912,28.46469679],[76.40558948,28.46583993],[76.39868065,28.465684],[76.39311822,28.46678003],[76.38491623,28.46353977],[76.38504034,28.4592663],[76.38861854,28.45507111],[76.39350736,28.45334909],[76.39361348,28.44968606],[76.39719112,28.44549061],[76.39936937,28.44187436],[76.39262109,28.43622351],[76.38234903,28.43293605],[76.37561977,28.42667387],[76.36515291,28.43010105],[76.3589368,28.42995914],[76.3498148,28.43463788],[76.34830806,28.43887983],[76.34890927,28.44194821],[76.34812899,28.44498492],[76.34585959,28.45165296],[76.3463533,28.45838426],[76.34277357,28.46257848],[76.34004604,28.46129408],[76.33949881,28.45639428],[76.33891572,28.45271543],[76.33478888,28.45200968],[76.33280641,28.44890952],[76.33298623,28.44280448],[76.33376687,28.43976783],[76.33456544,28.43612065],[76.33463734,28.4336786],[76.3312738,28.43054655],[76.32507572,28.4297928],[76.31880551,28.43148088],[76.31795234,28.43695954],[76.31513529,28.43872721],[76.31169977,28.43803681],[76.30904549,28.43430979],[76.30491943,28.43360324],[76.30017529,28.4304385],[76.2996842,28.42370677],[76.29066556,28.4239164],[76.29076532,28.43340859],[76.29092576,28.43388654],[76.29076113,28.4339782],[76.29179421,28.43935004],[76.29157684,28.44760966],[76.29157684,28.45282627],[76.29201157,28.45869494],[76.2924463,28.46369419],[76.29375049,28.46651985],[76.29353313,28.46891079],[76.28940319,28.47173645],[76.28766427,28.47369268],[76.28527325,28.47695305],[76.28440379,28.47890928],[76.28440379,28.48130022],[76.28741215,28.48836965],[76.28779391,28.48851497],[76.29027265,28.49347229],[76.2930984,28.49651531],[76.29896726,28.4976021],[76.30505349,28.49760211],[76.31331337,28.4976021],[76.31787804,28.49542852],[76.31961696,28.49282022],[76.32070379,28.4923855],[76.32274612,28.49219984],[76.32679001,28.49368965],[76.33026786,28.49999305],[76.33526726,28.51694701],[76.33678882,28.52607606],[76.33694558,28.53438444],[76.34296338,28.54678002],[76.34333396,28.56986413],[76.34336715,28.57193248],[76.34346158,28.58089419],[76.3436686,28.60056835],[76.3499907,28.60154953],[76.3575387,28.60272058],[76.36027891,28.60187029],[76.37516695,28.5972494],[76.37565756,28.59705955],[76.39241265,28.59057478],[76.40124388,28.5871956],[76.4077777,28.55826559],[76.40916434,28.55212373],[76.41054206,28.54602066],[76.42617457,28.54453633],[76.43772211,28.59131718],[76.44748368,28.5917183],[76.45504248,28.59280392],[76.46466872,28.59797226],[76.46629967,28.60277962],[76.46231151,28.60782382],[76.45367879,28.61874028],[76.4520432,28.62503483],[76.45308743,28.63100207],[76.4549311,28.64153684],[76.45579909,28.64649614],[76.45267724,28.65199472],[76.45240385,28.65247613],[76.41829683,28.65658871],[76.41002109,28.6576762],[76.40913384,28.66485264],[76.40716985,28.68073226],[76.407013,28.68082426],[76.41780608,28.69005297],[76.42054546,28.70556649],[76.41850767,28.7209726],[76.42957518,28.72402958],[76.45314414,28.73579165],[76.4706251,28.73758323],[76.50092857,28.73684486],[76.52641398,28.73740074],[76.53573601,28.7460307],[76.54859678,28.74209509],[76.5759087,28.73425483],[76.59008988,28.74017641],[76.59603804,28.75575362],[76.59713083,28.77403595],[76.60137083,28.78157663],[76.61332554,28.78716294],[76.62950805,28.78572728],[76.63674237,28.79180474],[76.64524197,28.80087084],[76.64781934,28.80507239],[76.63541172,28.81606924],[76.63385801,28.82373885],[76.64168707,28.83279052],[76.64698714,28.83586405],[76.65179075,28.83240984],[76.66234049,28.81544842],[76.67188147,28.81090729],[76.67221504,28.79847184],[76.67509479,28.79142165],[76.69007476,28.78462228],[76.71160268,28.78447389],[76.71076049,28.76549592],[76.7291116,28.75816948],[76.74191291,28.75724582],[76.75377866,28.76637511],[76.76526716,28.76423784],[76.76946968,28.75780502],[76.76701257,28.74886729],[76.77863759,28.74139892],[76.7853579,28.7415342],[76.79647679,28.7536082],[76.80354964,28.76619283],[76.82261805,28.78316317],[76.81293267,28.79363542],[76.79452007,28.80333977],[76.79895164,28.81409314],[76.8216625,28.82047068],[76.82717854,28.81524798],[76.83073737,28.80761637],[76.84556024,28.8067244],[76.86414777,28.81656944],[76.86668796,28.82254384],[76.87789663,28.83164978],[76.88659494,28.83359662],[76.90287551,28.86067475],[76.90881169,28.85879026],[76.91074529,28.85582403],[76.91160403,28.84560561],[76.91373572,28.8388554],[76.91715516,28.83246004],[76.91889812,28.82120806]]]},"geometry_name":"geometry","properties":{"fid":191,"state_name":"Haryana","state_id":"6","district_name":"JHAJJAR","district_id":83}},{"type":"Feature","id":"INDIA_DIST_717_GCS.fid-7165b83f_17ec626fcae_2496","geometry":{"type":"Polygon","coordinates":[[[76.55426298,29.08410688],[76.56694148,29.06534095],[76.57185573,29.06181081],[76.58999201,29.06301353],[76.61176752,29.05900096],[76.63309774,29.05902855],[76.63907545,29.05718273],[76.63932184,29.05449362],[76.65088697,29.05766037],[76.65688637,29.06161766],[76.66641499,29.06411529],[76.6787036,29.06130466],[76.69296049,29.05010306],[76.70094951,29.04490265],[76.70634309,29.03888206],[76.72237872,29.02618116],[76.72870275,29.0178793],[76.73245183,29.00799167],[76.73263375,29.00109705],[76.7329167,28.99037192],[76.73151766,28.97731275],[76.72973806,28.96636247],[76.74365233,28.95845426],[76.7577015,28.96219626],[76.76642689,28.95669657],[76.77741968,28.94436457],[76.77884987,28.94309124],[76.77560304,28.93945419],[76.78371401,28.92590336],[76.79121627,28.92432072],[76.8129163,28.92687694],[76.81882914,28.92689362],[76.82751913,28.91931265],[76.82555441,28.91218506],[76.82720354,28.90212109],[76.81949351,28.88953277],[76.82017653,28.88392926],[76.81222546,28.86315936],[76.81933219,28.857743],[76.84582768,28.85974856],[76.85886897,28.85966116],[76.86434815,28.8605252],[76.86821319,28.86487003],[76.87991402,28.86796908],[76.89192887,28.86656585],[76.90287551,28.86067475],[76.88659494,28.83359662],[76.87789663,28.83164978],[76.86668796,28.82254384],[76.86414777,28.81656944],[76.84556024,28.8067244],[76.83073737,28.80761637],[76.82717854,28.81524798],[76.8216625,28.82047068],[76.79895164,28.81409314],[76.79452007,28.80333977],[76.81293267,28.79363542],[76.82261805,28.78316317],[76.80354964,28.76619283],[76.79647679,28.7536082],[76.7853579,28.7415342],[76.77863759,28.74139892],[76.76701257,28.74886729],[76.76946968,28.75780502],[76.76526716,28.76423784],[76.75377866,28.76637511],[76.74191291,28.75724582],[76.7291116,28.75816948],[76.71076049,28.76549592],[76.71160268,28.78447389],[76.69007476,28.78462228],[76.67509479,28.79142165],[76.67221504,28.79847184],[76.67188147,28.81090729],[76.66234049,28.81544842],[76.65179075,28.83240984],[76.64698714,28.83586405],[76.64168707,28.83279052],[76.63385801,28.82373885],[76.63541172,28.81606924],[76.64781934,28.80507239],[76.64524197,28.80087084],[76.63674237,28.79180474],[76.62950805,28.78572728],[76.61332554,28.78716294],[76.60137083,28.78157663],[76.59713083,28.77403595],[76.59603804,28.75575362],[76.59008988,28.74017641],[76.5759087,28.73425483],[76.54859678,28.74209509],[76.53573601,28.7460307],[76.52641398,28.73740074],[76.50092857,28.73684486],[76.4706251,28.73758323],[76.45314414,28.73579165],[76.42957518,28.72402958],[76.41850767,28.7209726],[76.42054546,28.70556649],[76.41780608,28.69005297],[76.407013,28.68082426],[76.40587907,28.67985451],[76.39828791,28.68612872],[76.39795474,28.6864041],[76.39795471,28.68640416],[76.38396291,28.6979657],[76.38080313,28.70221522],[76.38053412,28.70769527],[76.38680194,28.71734145],[76.38774518,28.72158735],[76.39365874,28.72761509],[76.4007592,28.73177036],[76.40577712,28.75007449],[76.39083028,28.76954167],[76.38752309,28.77170082],[76.35009116,28.79612822],[76.33258112,28.80412734],[76.33223189,28.80743956],[76.33187766,28.81942021],[76.33694684,28.82506957],[76.34295439,28.8344289],[76.3457956,28.84463771],[76.35183188,28.85307487],[76.35988152,28.86432388],[76.35861815,28.87167215],[76.32865414,28.89288096],[76.30019628,28.9031581],[76.29184702,28.87450556],[76.29037092,28.87382118],[76.28633088,28.89436264],[76.27673449,28.89808352],[76.25645892,28.89990349],[76.23707164,28.89990756],[76.23277999,28.90393374],[76.22983077,28.93578011],[76.21547553,28.95176562],[76.21343592,28.9569707],[76.21163003,28.96157904],[76.21256509,28.96359096],[76.21994812,28.97947447],[76.23980453,28.99534763],[76.23888101,29.01201515],[76.23456627,29.0509757],[76.24101679,29.05259287],[76.25393454,29.0558306],[76.2737435,29.05995978],[76.28056206,29.06740323],[76.28249397,29.06767111],[76.28718807,29.06832195],[76.29063868,29.07272486],[76.29194655,29.07697267],[76.30151197,29.08538569],[76.33233088,29.08604763],[76.34085034,29.0844956],[76.35140297,29.08531825],[76.3810348,29.07169138],[76.39068826,29.07298166],[76.3962567,29.07656346],[76.40484609,29.07947012],[76.4120518,29.07782072],[76.42417778,29.07015166],[76.43070335,29.06392029],[76.44012009,29.05973783],[76.44647196,29.05850805],[76.45547535,29.06098113],[76.46123394,29.06507382],[76.47260129,29.08194651],[76.47911289,29.0949388],[76.48731857,29.08986535],[76.49868936,29.08145927],[76.50550669,29.07938008],[76.51242116,29.07912258],[76.52000927,29.08367443],[76.52684175,29.09090028],[76.54011072,29.10288993],[76.54595841,29.09741897],[76.55060844,29.0909823],[76.55426298,29.08410688]]]},"geometry_name":"geometry","properties":{"fid":202,"state_name":"Haryana","state_id":"6","district_name":"ROHTAK","district_id":82}},{"type":"Feature","id":"railway_shapefile.fid-7165b83f_17ec626fcae_2497","geometry":{"type":"LineString","coordinates":[[77.20053514,28.66707104],[77.1701275,28.66873684],[77.15085908,28.67444862],[77.13878007,28.67955302],[77.12705661,28.68104114],[77.1204191,28.68188335],[77.11622764,28.68213757],[77.0901064,28.68371911],[77.06815655,28.68377646],[77.05898208,28.68493942],[77.04817328,28.68630883],[77.03529025,28.68793999],[77.00832211,28.68899674],[76.97997949,28.69094027],[76.95918629,28.6946738],[76.93536721,28.69871347],[76.93172285,28.69926543],[76.92092428,28.70090065],[76.91709217,28.70148075],[76.88916945,28.7113967],[76.86895242,28.7209085],[76.84617795,28.73266039],[76.83243396,28.74110246],[76.81470688,28.75056477],[76.78576887,28.76677079],[76.76348877,28.77888719],[76.7406599,28.79190625],[76.73298861,28.79459302],[76.71327862,28.80363609],[76.68943335,28.81534268],[76.66953166,28.82740278],[76.64881555,28.83861788],[76.63331398,28.84714196],[76.62403646,28.85224227],[76.59900611,28.86599748],[76.58526596,28.87313335],[76.58494311,28.87337671]]},"geometry_name":"geometry","properties":{"fid":10,"DESCRIPTIO":"RAILWAY BROAD GAUGE DOUBLE LINE","RAILWAY_BR":null,"ELECTRIFIE":"YES","DIVISION":"DELHI","ZONE_":"NORTHERN RAILWAY","GAUGE":"BROAD GAUGE","SHAPE_LENG":64741.9298417,"FROM":"DELHI","TO":"ROHTAK"}}],"totalFeatures":6,"numberMatched":6,"numberReturned":6,"timeStamp":"2022-02-04T20:28:10.729Z","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::4326"}}}

Style defined in JS is as:

var style = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.0)'
  }),
  stroke: new ol.style.Stroke({
    color: '#f21602',
    width: 12
  }),

  image: new ol.style.Circle({
    radius: 7,
    fill: new ol.style.Fill({
      color: '#ffcc33'
    })
  })
});

geojson = new ol.layer.Vector({
  source: new ol.source.Vector({
    URL: "https://raw.githubusercontent.com/abhilashsinghimd/AASD_Geojson/main/features.json",
    format: new ol.format.GeoJSON()
  }),
  style: style,
  visible: true,

});

The output now is like this

enter image description here

but it should be like this.

enter image description here

How to define the style for 2 different types of geometries?

1 Answer 1

5

Instead of fixed style you can use style function, where first parameter is feature. Here you can check feature geometry type with .getGeometry().getType() methods and return desired style.

Code could the look something like this:

var defaultStyle = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.0)'
  }),
  stroke: new ol.style.Stroke({
    color: '#0000ff',
    width: 4
  })
});

var lineStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#f21602',
    width: 12
  })
});

function style(feature, resolution) {
  if (feature.getGeometry().getType() == 'LineString')
    return(lineStyle);
  else {
    return(defaultStyle);
  }
}

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: "https://raw.githubusercontent.com/abhilashsinghimd/AASD_Geojson/main/features.json",
    format: new ol.format.GeoJSON({
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    })
  }),
  style: style,
  visible: true
});

var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM(),
});

var view = new ol.View({
  center: ol.proj.transform([77.21966794,28.68516349], 'EPSG:4326', 'EPSG:3857'),
  zoom: 8,
});
            
var map = new ol.Map({
  target: 'map',
  layers: [
    osmLayer,
    vectorLayer
  ],
  view: view
});

This is the result:

enter image description here

5
  • Hii @TomazicM, thanks for the suggestions, but can you please tell how to parse it in geojson = new ol.layer.Vector function where style: style, coz I don't have much expertise in JavaScript Feb 4, 2022 at 21:20
  • There's no change in applying style, see modified answer.
    – TomazicM
    Feb 4, 2022 at 21:25
  • Okay thanks @TomazicM, But it is somehow not working, like map is not being generated now, neither it is giving any error in the console. 1. tried changing the name of function style that you made, to stylee then parsing it as style: stylee. 2. tried changing the hex codes for colour, did not worked. Feb 4, 2022 at 21:55
  • I had a typo in a style name. Se modified answer with the complete working code.
    – TomazicM
    Feb 4, 2022 at 22:19
  • Thanks for your time, it worked as expected. Feb 4, 2022 at 22:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.