11'use client'
22
33import type { MapOptions } from 'ts-maps'
4+ import { useCallback , useMemo , useState } from 'react'
45import { VectorMap } from 'ts-maps-react'
5- import { useState , useCallback , useMemo } from 'react'
66import styles from './page.module.css'
77
88type MapName = 'world' | 'world-merc' | 'us-merc' | 'us-mill' | 'us-lcc' | 'us-aea' | 'spain' | 'italy' | 'canada' | 'russia' | 'iraq' | 'brasil'
@@ -88,7 +88,7 @@ export default function IndexPage() {
8888 const toggleTheme = useCallback ( ( ) => {
8989 const newIsDarkTheme = ! isDarkTheme
9090 setIsDarkTheme ( newIsDarkTheme )
91-
91+
9292 setOptions ( prev => ( {
9393 ...prev ,
9494 backgroundColor : newIsDarkTheme ? '#2c3e50' : '#ffffff' ,
@@ -115,7 +115,7 @@ export default function IndexPage() {
115115 r : 5 ,
116116 } ,
117117 }
118-
118+
119119 setOptions ( prev => ( {
120120 ...prev ,
121121 markers : [ ...( prev . markers || [ ] ) , marker ] ,
@@ -166,21 +166,27 @@ export default function IndexPage() {
166166 < div className = { styles . controls } >
167167 < div className = { styles . controlGroup } >
168168 < label htmlFor = "map-select" > Select Map:</ label >
169- < select
170- id = "map-select"
169+ < select
170+ id = "map-select"
171171 value = { currentMap }
172- onChange = { ( e ) => setCurrentMap ( e . target . value as MapName ) }
172+ onChange = { e => setCurrentMap ( e . target . value as MapName ) }
173173 >
174174 { mapOptions . map ( map => (
175175 < option key = { map . value } value = { map . value } >
176- { map . label } ({ map . projection } )
176+ { map . label }
177+ { ' ' }
178+ (
179+ { map . projection }
180+ )
177181 </ option >
178182 ) ) }
179183 </ select >
180184 </ div >
181185
182186 < div className = { styles . controlInfo } >
183- Current Projection: < strong > { currentProjection } </ strong >
187+ Current Projection:
188+ { ' ' }
189+ < strong > { currentProjection } </ strong >
184190 </ div >
185191
186192 < button onClick = { toggleTheme } >
@@ -190,7 +196,9 @@ export default function IndexPage() {
190196 Add Random Marker
191197 </ button >
192198 < button onClick = { toggleZoom } >
193- { options . zoomOnScroll ? 'Disable' : 'Enable' } Zoom
199+ { options . zoomOnScroll ? 'Disable' : 'Enable' }
200+ { ' ' }
201+ Zoom
194202 </ button >
195203 </ div >
196204
0 commit comments