import React , { useEffect , useState } from "react" ; import { Map as LeafletMap , Marker , Popup , TileLayer , Tooltip , } from "react-leaflet" ; import { countriesWithNumOfDevsObj } from "../util/UsersDataCleanup" ; const countryNamesAndNumOfDevsArr = Object . entries ( countriesWithNumOfDevsObj ) ; let centerLatLngArr = [ ] ; function SimpleMap ( { zoom = 3 } ) { const [ allCountriesLatLang , setAllCountriesLatLang ] = useState ( [ ] ) ; useEffect ( ( ) => { let isComponentSubscribedToPromise = true ; if ( isComponentSubscribedToPromise ) { fetch ( `https://restcountries.eu/rest/v2/all` ) . then ( ( resp ) => resp . json ( ) ) . then ( ( data ) => { if ( isComponentSubscribedToPromise ) setAllCountriesLatLang ( data ) ; } ) . catch ( ( err ) => console . error ( err ) ) ; } return ( ) => { isComponentSubscribedToPromise = false ; } ; } , [ ] ) ; let countriesLatLngArr = allCountriesLatLang . map ( ( { name , latlng } ) => ( { name , latlng , } ) ) ; const UK = { country : "United Kingdom" , latlng : [ 54 , - 2 ] , numberOfDevs : countriesWithNumOfDevsObj [ "United Kingdom" ] , } ; let finalArrayWithCountryAndLatLng = [ ] ; function finalCountryAndLocationArray ( ) { for ( let i = 0 ; i < countryNamesAndNumOfDevsArr . length ; i ++ ) { for ( let j = 0 ; j < countriesLatLngArr . length ; j ++ ) { if ( countryNamesAndNumOfDevsArr [ i ] [ 0 ] . toLowerCase ( ) === countriesLatLngArr [ j ] . name . toLowerCase ( ) ) { finalArrayWithCountryAndLatLng . push ( { country : countryNamesAndNumOfDevsArr [ i ] [ 0 ] , latlng : countriesLatLngArr [ j ] . latlng , numberOfDevs : countryNamesAndNumOfDevsArr [ i ] [ 1 ] , } ) ; } } } finalArrayWithCountryAndLatLng . push ( UK ) ; return finalArrayWithCountryAndLatLng ; } finalCountryAndLocationArray ( ) ; const markersArray = finalArrayWithCountryAndLatLng . map ( ( { country , latlng , numberOfDevs } ) => { let numberOfDevsText = numberOfDevs === 1 ? numberOfDevs + " Developer from " + country : numberOfDevs + " Developers from " + country ; return ( < Marker key = { country } position = { [ latlng [ 0 ] , latlng [ 1 ] ] } color = "royalblue" title = { numberOfDevsText } text = { numberOfDevs } > < Tooltip > { numberOfDevsText } < /Tooltip> < Popup > { numberOfDevsText } < /Popup> < /Marker>); } ) ; const center = centerLatLngArr . length > 0 ? [ centerLatLngArr [ 0 ] . lat , centerLatLngArr [ 0 ] . lng ] : [ 55.378052 , - 3.435973 ] ; return ( < div style = { { height : "90vh" , width : "100%" , margin : 0 } } > < LeafletMap center = { center } zoom = { zoom } minZoom = { 1 } maxZoom = { 10 } attributionControl = { true } zoomControl = { true } doubleClickZoom = { true } scrollWheelZoom = { true } dragging = { true } animate = { true } easeLinearity = { 0.35 } > < TileLayer attribution = '&amp;copy <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" / > { markersArray } < /LeafletMap> < /div>); } export default SimpleMap ;