react-leaflet: how to set zoom based on geojson

Question

I'm using react-leaflet and my map is displaying fine so far. I've also successfully used <GeoJson> to overlay a polygon.

I've currently got hard-coded my center and zoom values, but I'd like my default zoom to be set so that the entire GeoJSON polygon is visible. I'm struggling with the documentation/answers I've found on the web (I'm only beginner/intermediate JS).

Here's my component:

import React from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup, GeoJson } from 'react-leaflet';
import axios from 'axios';

const styles = StyleSheet.create({
  map: {
    height: 240,
    width: '100%'
  }
});

const geodatas = { "type": "Polygon", "coordinates": [ [ [ 0.901409326032148, 51.87846074983652 ], [ 0.900728205963941, 51.87844428860128 ], [ 0.899345524616457, 51.8784325381963 ], [ 0.898758899468915, 51.878417331772674 ], [ 0.898382518544509, 51.87839424237513 ], [ 0.897325195329164, 51.878223304667991 ], [ 0.89594922021314, 51.877976588301692 ], [ 0.894955640203439, 51.877846407999037 ], [ 0.894280316390969, 51.877785709788448 ], [ 0.893320356777677, 51.877703150758911 ], [ 0.892628493048771, 51.877632959777358 ], [ 0.892139172447305, 51.877548791413972 ], [ 0.891852225577892, 51.877468544876464 ], [ 0.891748332612011, 51.877548514557468 ], [ 0.891456640213901, 51.877849701135801 ], [ 0.891291905863462, 51.878157745192553 ], [ 0.891212527716225, 51.878460992695949 ], [ 0.891079390830871, 51.879306113637384 ], [ 0.891068489722895, 51.879386403461886 ], [ 0.890532814748409, 51.879394179295069 ], [ 0.890012032842571, 51.879477202674821 ], [ 0.889375209183071, 51.879561187317655 ], [ 0.888523881288328, 51.879678311227721 ], [ 0.887732863790842, 51.87978495647382 ], [ 0.887717924807106, 51.879755652410928 ], [ 0.8877112616848, 51.879741430134168 ], [ 0.887496874906409, 51.879752090096723 ], [ 0.887360497828209, 51.879779715499488 ], [ 0.887280191227346, 51.879796073522684 ], [ 0.88718833818694, 51.879813614145419 ], [ 0.88706385375741, 51.879821166518113 ], [ 0.886767033455902, 51.879837445743426 ], [ 0.886758489556766, 51.879954631053209 ], [ 0.886578395546395, 51.879956355274935 ], [ 0.886452014758515, 51.879956760590304 ], [ 0.886200176414292, 51.879994412073138 ], [ 0.886030078804612, 51.880039946947051 ], [ 0.885567071719315, 51.880138525670596 ], [ 0.885346650339984, 51.880169110424305 ], [ 0.885139730722157, 51.880182280172704 ], [ 0.884856862688072, 51.88016764209975 ], [ 0.884439622271071, 51.880097857131176 ], [ 0.883460215670161, 51.879938459949649 ], [ 0.882545487519237, 51.879816041218362 ], [ 0.88202611994388, 51.879760440037977 ], [ 0.881353079538259, 51.879758054179931 ], [ 0.880867549737238, 51.879731289583212 ], [ 0.880629373069327, 51.879688482840614 ], [ 0.879914179646963, 51.879502802111887 ], [ 0.87909138760359, 51.879339442609194 ], [ 0.878624991225511, 51.879272639047592 ], [ 0.878295085017608, 51.879226768603523 ], [ 0.877982758160618, 51.879114741366571 ], [ 0.877645624873188, 51.878978235040002 ], [ 0.877294418532155, 51.8788708439507 ], [ 0.876897013638247, 51.878814842967316 ], [ 0.876417345581585, 51.878813991095299 ], [ 0.876164532039012, 51.87881388193393 ], [ 0.875555156171977, 51.878806309116875 ], [ 0.875145809085678, 51.87876776746041 ], [ 0.874727443401668, 51.878724949298828 ], [ 0.874688370094159, 51.879227792320627 ], [ 0.874678085840498, 51.879635434120594 ], [ 0.874646030296739, 51.879634419620402 ], [ 0.874509194844878, 51.879630572109889 ], [ 0.874491729010884, 51.87963099911331 ], [ 0.874461033018298, 51.879763919892177 ], [ 0.874266864459982, 51.879772263150876 ], [ 0.874273115896171, 51.879825158282216 ], [ 0.874509916131233, 51.879778908931314 ], [ 0.874571095956836, 51.879802588494051 ], [ 0.875011735049452, 51.880879207933553 ], [ 0.875063877959868, 51.881012800603493 ], [ 0.875154852104679, 51.881208471872306 ], [ 0.875175413531478, 51.881256521442964 ], [ 0.87529051738762, 51.881443510495714 ], [ 0.875489363187087, 51.881780402402256 ], [ 0.875722161078739, 51.882104775064533 ], [ 0.876014940309792, 51.882456451913107 ], [ 0.876082550654661, 51.88253571873868 ], [ 0.876168143697128, 51.882579480046651 ], [ 0.876482554975814, 51.882723829494935 ], [ 0.876539940045734, 51.88280244710019 ], [ 0.876593128121568, 51.882884763830063 ], [ 0.876828235972976, 51.883290088395555 ], [ 0.877005895766627, 51.883703921217418 ], [ 0.877029497141308, 51.883778869632195 ], [ 0.877124155114336, 51.884054470794702 ], [ 0.877175392208823, 51.88415122089723 ], [ 0.877258066409254, 51.884194243657916 ], [ 0.877339931934844, 51.884224608588156 ], [ 0.877423526548593, 51.884235150553707 ], [ 0.877430762369245, 51.884235872597479 ], [ 0.877656259525027, 51.884261823162831 ], [ 0.877765412001952, 51.884310401458563 ], [ 0.877891165133687, 51.884457476321913 ], [ 0.877997316320446, 51.884822797224388 ], [ 0.878229652774874, 51.885819896448112 ], [ 0.87834363069242, 51.886056361674164 ], [ 0.878505517980494, 51.886361785147784 ], [ 0.878571706765954, 51.886351173607551 ], [ 0.880334009665515, 51.886091239694117 ], [ 0.880424791914881, 51.886077327296213 ], [ 0.88043783327319, 51.88607700782093 ], [ 0.880704881703364, 51.886025509676543 ], [ 0.88090326748098, 51.88597029854111 ], [ 0.880981920754037, 51.885926022943693 ], [ 0.881055688461447, 51.885876562201595 ], [ 0.881139171026242, 51.8858178721824 ], [ 0.881241958942011, 51.88574252491086 ], [ 0.881337559220615, 51.885715906077138 ], [ 0.881385937856071, 51.885676058458287 ], [ 0.881404549670886, 51.885672905013088 ], [ 0.881631036319648, 51.885667354634286 ], [ 0.882076471813645, 51.885656437325643 ], [ 0.882056078006435, 51.885745949945587 ], [ 0.881993450315757, 51.88585897570433 ], [ 0.881874182519518, 51.885948304245524 ], [ 0.881879755943845, 51.886035382145558 ], [ 0.882347992750353, 51.887241671205189 ], [ 0.882404707654513, 51.88749113499459 ], [ 0.882853957884807, 51.887494597204501 ], [ 0.884028759735186, 51.887500853841111 ], [ 0.885202413300444, 51.887511622501421 ], [ 0.886590316907309, 51.88753330410465 ], [ 0.887555928029772, 51.88756264315473 ], [ 0.888202481793116, 51.88758182931528 ], [ 0.888956015183013, 51.887592988828722 ], [ 0.889658183982424, 51.88759551550784 ], [ 0.890322869160589, 51.887490165863746 ], [ 0.892203940736874, 51.887131827383271 ], [ 0.892629205597487, 51.887054831392291 ], [ 0.893388163095852, 51.886969623054483 ], [ 0.89404980532498, 51.886929063714575 ], [ 0.895280219891035, 51.886805174667664 ], [ 0.895323478152911, 51.886801412129813 ], [ 0.896179817068388, 51.886713787718342 ], [ 0.897415056318077, 51.886622215638788 ], [ 0.898647041286751, 51.886591851018451 ], [ 0.899686268373963, 51.886569823711085 ], [ 0.900351520883763, 51.886540828313116 ], [ 0.900884573173965, 51.886511494268028 ], [ 0.901340110935552, 51.886476877525794 ], [ 0.901562391659487, 51.886452510943201 ], [ 0.901902151973541, 51.886402766551157 ], [ 0.902463248379137, 51.886291722255116 ], [ 0.902757098309845, 51.886226924440386 ], [ 0.903150888634868, 51.886113803082765 ], [ 0.903243962294006, 51.886226592689667 ], [ 0.903355623961783, 51.886291269748519 ], [ 0.903443835883261, 51.886328652951633 ], [ 0.903640578390754, 51.886359849425965 ], [ 0.903777366271163, 51.886451778405799 ], [ 0.903921275467924, 51.886542632232221 ], [ 0.904619569200365, 51.886529879935892 ], [ 0.904647145263885, 51.886530097842467 ], [ 0.904644680496465, 51.886423163114955 ], [ 0.904806010678643, 51.886423673231825 ], [ 0.904807446404658, 51.886423637762697 ], [ 0.906076204161999, 51.886422856835182 ], [ 0.907022198544648, 51.886441731102899 ], [ 0.90730666281605, 51.88645807500005 ], [ 0.907404335168953, 51.886463752026572 ], [ 0.90810606059014, 51.886526420497582 ], [ 0.908497633992893, 51.886559083872683 ], [ 0.909250409977232, 51.886669934534716 ], [ 0.909920399282772, 51.886781031005334 ], [ 0.910794842211242, 51.886931209477844 ], [ 0.911857500375587, 51.887069437663193 ], [ 0.914187992691951, 51.887236571851361 ], [ 0.915564259859456, 51.887368881794721 ], [ 0.916237185524361, 51.887458290661186 ], [ 0.917096872133215, 51.88757992659508 ], [ 0.91728495272614, 51.887612214370037 ], [ 0.917386434020573, 51.887630376379299 ], [ 0.917533327200215, 51.887543023084007 ], [ 0.917674599005015, 51.887457697250859 ], [ 0.917830466960201, 51.887372009032987 ], [ 0.917964904772121, 51.887294045428717 ], [ 0.91799293120233, 51.887277165650318 ], [ 0.918270843270076, 51.887147897468367 ], [ 0.918324311895519, 51.887120495771434 ], [ 0.918260947025518, 51.887063625303497 ], [ 0.918242493122197, 51.887046999930959 ], [ 0.918219263299262, 51.887025098336316 ], [ 0.918193394778538, 51.887006858727382 ], [ 0.918167681980051, 51.886968834490808 ], [ 0.918121993594273, 51.886892553702928 ], [ 0.918118598509993, 51.8868845458341 ], [ 0.918111416611052, 51.886886522324808 ], [ 0.918092090118659, 51.886856431705347 ], [ 0.918088866304774, 51.886852915211819 ], [ 0.918070859203, 51.886820993594071 ], [ 0.918054695110634, 51.886795320112185 ], [ 0.918012659454562, 51.886753205307109 ], [ 0.918019724977938, 51.886749433459734 ], [ 0.918029545579465, 51.88674379498778 ], [ 0.918070768510037, 51.88670680692686 ], [ 0.918078917373575, 51.886699411688461 ], [ 0.918082936905406, 51.886693018055482 ], [ 0.918085575617747, 51.886689356067215 ], [ 0.918085284714103, 51.886684867660044 ], [ 0.918084993810534, 51.886680379252859 ], [ 0.918074688990573, 51.886656358610303 ], [ 0.918026444493577, 51.886538781457205 ], [ 0.917967819210123, 51.886442231699029 ], [ 0.917917539541698, 51.8863616590615 ], [ 0.917856018831887, 51.886242613057391 ], [ 0.917875485331733, 51.886228643096942 ], [ 0.917905644965449, 51.886222499897784 ], [ 0.918266441324591, 51.886138918296524 ], [ 0.91843543741289, 51.886100557024506 ], [ 0.918588288139598, 51.886058999768181 ], [ 0.918621765414349, 51.886037488897976 ], [ 0.918650101834482, 51.885981039731959 ], [ 0.918654816251417, 51.885987216586045 ], [ 0.918698403834106, 51.886031090891748 ], [ 0.918908038135575, 51.886013299171736 ], [ 0.919197702484083, 51.885998914921643 ], [ 0.919223496487564, 51.885991980642089 ], [ 0.919256527153531, 51.88598576581176 ], [ 0.919292603806707, 51.885982172722741 ], [ 0.919311329258946, 51.885980808676692 ], [ 0.919346148055345, 51.885978145927318 ], [ 0.919367457097976, 51.885970423845514 ], [ 0.919365436126073, 51.885963281018427 ], [ 0.91935093750544, 51.885872739394792 ], [ 0.919346665993608, 51.885853064685733 ], [ 0.919340263582773, 51.885820855124173 ], [ 0.919328542022821, 51.885752812601339 ], [ 0.919289882788854, 51.885559471383921 ], [ 0.919280004480731, 51.88549767697058 ], [ 0.919249774710786, 51.885343777893503 ], [ 0.919220816514632, 51.885211336342415 ], [ 0.919208881861081, 51.885162180736742 ], [ 0.919188799077709, 51.885053885128599 ], [ 0.919179322619601, 51.884998284695968 ], [ 0.919168652382673, 51.884944602064856 ], [ 0.919127319807822, 51.884778390844936 ], [ 0.919103755432662, 51.884706955902153 ], [ 0.919031022166563, 51.88470516511407 ], [ 0.918878337657739, 51.884727028021807 ], [ 0.918790953612087, 51.884722903411216 ], [ 0.918757889943345, 51.884414335024665 ], [ 0.918735830940248, 51.883872529953408 ], [ 0.918749725312522, 51.883661699688126 ], [ 0.91876948654494, 51.883517348999135 ], [ 0.918807074323049, 51.883335601694213 ], [ 0.91889079846776, 51.882878475620764 ], [ 0.918958313313544, 51.882417166316976 ], [ 0.918982419246705, 51.882251128670951 ], [ 0.91903609340834, 51.881868386851345 ], [ 0.919083135265649, 51.88171976225923 ], [ 0.919132074133214, 51.881646617138863 ], [ 0.919460445307968, 51.881375829199726 ], [ 0.919682376169793, 51.881189504020099 ], [ 0.919622144819442, 51.881156832903159 ], [ 0.919532145528479, 51.881114111420317 ], [ 0.919467662737287, 51.881084243173227 ], [ 0.9193478408487, 51.88102877517116 ], [ 0.919311923435926, 51.881012583586418 ], [ 0.919145777688999, 51.880937495751546 ], [ 0.918979576869284, 51.880863398092266 ], [ 0.918770168817696, 51.880769692921554 ], [ 0.91874166217972, 51.880756913698789 ], [ 0.918749929520663, 51.880749515455761 ], [ 0.918664590785148, 51.8807102741292 ], [ 0.91853467017157, 51.88081510045231 ], [ 0.918421577960399, 51.880907820274757 ], [ 0.91828483339089, 51.881018300359699 ], [ 0.918189474725769, 51.881094395519042 ], [ 0.91809830931614, 51.881166790020707 ], [ 0.917993479597975, 51.881253909586817 ], [ 0.917904394743247, 51.881336232592744 ], [ 0.917810644813509, 51.881414984882035 ], [ 0.917765061520439, 51.881451182002245 ], [ 0.917727277189953, 51.881474597804313 ], [ 0.917687827925033, 51.881492660154741 ], [ 0.917648938456006, 51.881499019964004 ], [ 0.917592528229499, 51.881503117155624 ], [ 0.917556338675728, 51.881504914307293 ], [ 0.917505499482299, 51.881504377586126 ], [ 0.917451553238886, 51.881502119688008 ], [ 0.917286552659126, 51.881490928668363 ], [ 0.917022454180388, 51.881474103927459 ], [ 0.916854640826272, 51.881463881213051 ], [ 0.916681143470547, 51.881454698387849 ], [ 0.916542458322954, 51.881444651770153 ], [ 0.916450828929447, 51.881443328165275 ], [ 0.916365058019841, 51.88144365742528 ], [ 0.91613912610168, 51.88145555515014 ], [ 0.915933298553328, 51.881463357339797 ], [ 0.915652217169243, 51.881476621848734 ], [ 0.915484247081051, 51.881486181825672 ], [ 0.915303179167124, 51.881495167199617 ], [ 0.915032382081902, 51.881509973470926 ], [ 0.914778873006563, 51.881523451410523 ], [ 0.914515256753215, 51.881536280217745 ], [ 0.914315286865372, 51.881545732613532 ], [ 0.914202349364867, 51.881552128410966 ], [ 0.91416305610943, 51.881550404942168 ], [ 0.914133753676999, 51.881547534711132 ], [ 0.914092037330798, 51.881530586147313 ], [ 0.914064635192414, 51.881534861802102 ], [ 0.914058939568137, 51.881604235603618 ], [ 0.913871780046409, 51.881607974990075 ], [ 0.913900532364438, 51.88133383846192 ], [ 0.913917565262247, 51.88074341037305 ], [ 0.913915618714501, 51.880511484301309 ], [ 0.913833603674322, 51.880456872005311 ], [ 0.913786842581242, 51.880386010937187 ], [ 0.913649135214015, 51.880053959957102 ], [ 0.913403240720076, 51.879533075995766 ], [ 0.913283588243218, 51.879300380117705 ], [ 0.913185285838128, 51.879038383111109 ], [ 0.913038300145875, 51.878653512941725 ], [ 0.912870983102134, 51.878111709462075 ], [ 0.912874541304731, 51.877694337226671 ], [ 0.912882068522283, 51.877542108633129 ], [ 0.912867085588723, 51.877466054180474 ], [ 0.912805599364724, 51.877437906363596 ], [ 0.912671047036016, 51.877400779144196 ], [ 0.912582803327189, 51.877384982718738 ], [ 0.912494153328336, 51.877362902414752 ], [ 0.912106774318374, 51.87730497366146 ], [ 0.911659053816844, 51.877279198182528 ], [ 0.910845194815755, 51.87725529345915 ], [ 0.909926648245021, 51.877274434814687 ], [ 0.909670899249886, 51.877252891518367 ], [ 0.909314163264232, 51.877218561517246 ], [ 0.908384292245072, 51.8771309752075 ], [ 0.908277728226409, 51.877122731840934 ], [ 0.908232519705985, 51.877120253622557 ], [ 0.908188745426027, 51.877208641402873 ], [ 0.908007083445798, 51.877545900731107 ], [ 0.907888040374143, 51.87770439359209 ], [ 0.907726401053779, 51.877900893805283 ], [ 0.907586018157088, 51.878023949121449 ], [ 0.907354930378132, 51.878224863611997 ], [ 0.90713896490615, 51.878368668968015 ], [ 0.907122137459287, 51.878378975413113 ], [ 0.907045194451947, 51.878425024888081 ], [ 0.906476964377067, 51.878739470610434 ], [ 0.906305963132985, 51.878857886479572 ], [ 0.905803484441867, 51.879157216640536 ], [ 0.90439353651545, 51.880006840402224 ], [ 0.904392100993312, 51.880006875863238 ], [ 0.904344316112181, 51.880033231718144 ], [ 0.904336166117978, 51.8800406260278 ], [ 0.904185133823075, 51.880132560746368 ], [ 0.904031996055894, 51.880282900377274 ], [ 0.904003347248133, 51.880310581683851 ], [ 0.903871370881516, 51.880270683389554 ], [ 0.903593978168444, 51.880183126162159 ], [ 0.903353643783826, 51.880107240915706 ], [ 0.903161900201356, 51.880017477750883 ], [ 0.90296870540926, 51.879882883859892 ], [ 0.902777974766133, 51.879630353765876 ], [ 0.902671125181507, 51.879506215333478 ], [ 0.902619161218453, 51.879443570543998 ], [ 0.902557150743474, 51.879383061909991 ], [ 0.902488132571657, 51.879327221855746 ], [ 0.902407746268306, 51.879273460640192 ], [ 0.902255699001237, 51.879169319160937 ], [ 0.90213067173243, 51.879123762764571 ], [ 0.902039998502742, 51.879070255219737 ], [ 0.901914565974001, 51.878994228325332 ], [ 0.901692967582603, 51.87880359876965 ], [ 0.901515661277313, 51.878601176198579 ], [ 0.901441918235169, 51.878516590297131 ], [ 0.901409326032148, 51.87846074983652 ] ] ] }

class MapHolder extends React.Component {
  constructor() {
    super();
    this.state = {
      geodatas: geodatas,
      lat: 51.881403,
      lng: 0.918583,
      zoom: 17,
    };
  }


  render() {
const accessToken = 'pk.eyJ1IjoiZ2F6YXN0b24iLCJhIjoiY2loa21hNzRoMG50eHQ0bHp2azNpeHhwaiJ9.h81FekBCVUufbqxc9ywySQ'
const position = [this.state.lat, this.state.lng];

console.log(this.refs.geojson);
console.log(this.refs.foo.leafletElement);

this.refs.foo.leafletElement.fitBounds(this.refs.geojson.getBounds());

return (
  <div>
    <Map ref="foo" style={{height: "260px"}} center={position} zoom={this.state.zoom} scrollWheelZoom={false} >
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url={`https://api.mapbox.com/styles/v1/gazaston/cihkojpjh00whrom498ghjoc5/tiles/256/{z}/{x}/{y}?access_token=${accessToken}`}
      id='gazaston.o9phia6g'
      detectRetina={true}
    />
    <GeoJson ref="geojson" data={this.state.geodatas} />
  </Map>
  </div>
);

}

export default MapHolder; 

UPDATE:

When I use the React dev tools, select my <MapHolder> component, switch to the console, and run

$r.refs.foo.leafletElement.fitBounds($r.refs.geojson.leafletElement.getBounds());

everything works as expected. However, in my code

this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds());

returns Uncaught TypeError: Cannot read property 'leafletElement' of undefined

I'm so close! What am I missing?

Answer 1

Seems like you're 99% of the way there! For benefit of future readers, you can escape the lingering uncaught type error:

Uncaught TypeError: Cannot read property 'leafletElement' of undefined

...by wrapping the fitBounds method call in a check to ensure this.refs.foo, this.refs.geojson and friends exist:

if (this.refs.foo && this.refs.foo.leafletElement && this.refs.geojson && this.refs.geojson.leafletElement) {
    this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds());
}

The reason the current implementation throws an error is that the map and GeoJSON refs aren't set until the render method is called once. That means this.refs.foo and this.refs.geojson aren't set the very first time the render method is called.

You could also consider moving the entire fitBounds operation out of the render method and into componentWillReceiveProps; this would be especially worthwhile if geodata was likely to update dynamically via props sent in to the map component.

Answer 2

Because of the way that react-leaflet handles its lifecycle in which it turns over control to leaflet immediately after it mounts the Map component, it can be tricky to access subcomponent refs.

I solved this issue two ways.

My first attempt involved storing the number of features that was adding within my outer component state, attaching an map-object event handler for layeradd as recommended above, and then accessing the Geojson ref once all the polygons had been added.

```

componentDidMount() {
   let count = 0;
   const map = this.refs.map.leafletElement;
   map.on('layeradd', () => {
       count += 1;
       if (count > this.state.polygonCount) {
            setTimeout(()=>{DO STUFF}, 200)
        }
   });
}

```

While this works, it smells.

The second way I solved this was to use turf-bbox to pre-compute the bounds of the geojson, which I then passed in to the Map object in my render method.

```

const bboxArray = bbox(geojson);
const corner1 = [bboxArray[1], bboxArray[0]];
const corner2 = [bboxArray[3], bboxArray[2]];
this.state.bounds = [corner1, corner2];

```

and then

```

 <Map bounds={this.state.bounds} ref="map">

```

The second way is much cleaner if you don't need to do anything more with the GeoJSON leafletElement, but the first way will let you set up any number of event handlers, etc.

Answer 3

Based on @IvanSanchez reply and how react-leaflet works I would suggest first add a ref to your GeoJson layer

 <GeoJson  ref="geojson" data={this.state.geodatas} />

then access the map with its ref

this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds())