feat: ✨ add 300 marker positions to docs and update next to 15.1.6

Author: giorgiabosello

.husky/pre-commit

@@ -1,5 +1,4 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 . "$(dirname "$0")/common.sh"
 
 yarn lint-staged

docs/package.json

@@ -4,7 +4,7 @@
 	"version": "0.0.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev",
+		"dev": "next dev -H google-maps-react-markers.com.tech",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint"
@@ -14,7 +14,7 @@
 	},
 	"dependencies": {
 		"google-maps-react-markers": "link:..",
-		"next": "14.2.10",
+		"next": "15.1.6",
 		"react": "link:../node_modules/react",
 		"react-dom": "link:../node_modules/react-dom"
 	},

docs/public/marker-pin-draggable.png

@@ -26,6 +26,7 @@
 	--callout-border-rgb: 172, 175, 176;
 	--card-rgb: 180, 185, 188;
 	--card-border-rgb: 131, 134, 135;
+	--highlight-rgb: 255, 255, 107;
 }
 
 @media (prefers-color-scheme: dark) {

docs/src/app/globals.css

@@ -63,7 +63,7 @@
 
 .action {
 	color: #000;
-	background: rgb(255, 255, 107);
+	background: rgba(var(--highlight-rgb));
 	border: 0;
 	padding: 10px;
 	margin: 5px 0;
@@ -83,7 +83,7 @@
 .container h1,
 .container h2,
 .container h3 {
-	color: rgb(255, 255, 107);
+	color: rgba(var(--highlight-rgb));
 	margin: 0.5rem 0;
 }
 
@@ -133,7 +133,7 @@
 
 .highlighted button {
 	font-size: 1rem;
-	color: rgb(255, 255, 107);
+	color: rgba(var(--highlight-rgb));
 	background-color: transparent;
 	border: 0;
 	padding: 4px;

docs/src/app/page.module.css

@@ -1,7 +1,7 @@
 'use client'
 
 import GoogleMap, { LatLngBounds, MapContextProps } from 'google-maps-react-markers'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import coordinates from '../components/coordinates'
 import Info from '../components/info'
 import mapOptions from '../components/map-options.json'
@@ -12,8 +12,6 @@ export default function Home() {
 	const mapRef = useRef<any>(null)
 	const [mapReady, setMapReady] = useState<boolean>(false)
 	const [mapBounds, setMapBounds] = useState<{ bounds: number[]; zoom: number }>({ bounds: [], zoom: 0 })
-	const [usedCoordinates, setUsedCoordinates] = useState<number>(0)
-	const [currCoordinates, setCurrCoordinates] = useState(coordinates[usedCoordinates])
 	const [highlighted, setHighlighted] = useState<string | null>(null)
 
 	const [dragStart, setDragStart] = useState<{ lat: number; lng: number } | null>(null)
@@ -50,25 +48,11 @@ export default function Home() {
 		setHighlighted(null)
 	}
 
-	const updateCoordinates = () => {
-		setUsedCoordinates(!usedCoordinates ? 1 : 0)
-		// reset drag
-		setDragStart(null)
-		setDragEnd(null)
-		setDragging(null)
-	}
-
-	useEffect(() => {
-		setCurrCoordinates(coordinates[usedCoordinates])
-	}, [usedCoordinates])
-
 	return (
 		<main className={styles.main}>
 			<div className={styles.description}>
 				{mapReady && (
 					<Info
-						buttonAction={updateCoordinates}
-						coordinates={currCoordinates}
 						bounds={mapBounds?.bounds}
 						drag={{
 							dragStart,
@@ -88,7 +72,7 @@ export default function Home() {
 					onGoogleApiLoaded={onGoogleApiLoaded}
 					onChange={onMapChange}
 				>
-					{currCoordinates.map(({ lat, lng, name }, index) => (
+					{coordinates.map(({ lat, lng, name }, index) => (
 						<Marker
 							// eslint-disable-next-line react/no-array-index-key
 							key={index}

docs/src/app/page.tsx

@@ -1,38 +1,14 @@
 const coordinates = [
-	[
-		{
-			lat: 45.4046987,
-			lng: 12.2472504,
-			name: 'Venice',
-		},
-		{
-			lat: 41.9102415,
-			lng: 12.3959151,
-			name: 'Rome',
-		},
-		{
-			lat: 45.4628328,
-			lng: 9.1076927,
-			name: 'Milan',
-		},
-	],
-	[
-		{
-			lat: 40.8518,
-			lng: 14.2681,
-			name: 'Naples',
-		},
-		{
-			lat: 43.7696,
-			lng: 11.2558,
-			name: 'Florence',
-		},
-		{
-			lat: 37.5023,
-			lng: 15.0873,
-			name: 'Catania',
-		},
-	],
+	{
+		lat: 45.4046987,
+		lng: 12.2472504,
+		name: 'Store draggable',
+	},
+	...[...Array(300)].map((_, i) => ({
+		lat: parseFloat((Math.random() * 180 - 90).toFixed(6)),
+		lng: parseFloat((Math.random() * 360 - 180).toFixed(6)),
+		name: `Store #${i + 1}`,
+	})),
 ]
 
 export default coordinates

docs/src/components/coordinates.ts

@@ -2,7 +2,6 @@ import styles from '../app/page.module.css'
 
 interface InfoProps {
 	bounds?: number[]
-	buttonAction?: () => void
 	coordinates?: { lat: number; lng: number; name: string }[]
 	drag?: {
 		dragEnd: { lat: number; lng: number } | null
@@ -11,7 +10,7 @@ interface InfoProps {
 	}
 }
 
-const Info = ({ buttonAction = () => {}, coordinates = [], bounds, drag }: InfoProps) => (
+const Info = ({ coordinates = [], bounds, drag }: InfoProps) => (
 	<div className={styles.container}>
 		<div className={styles.info}>
 			<div>
@@ -25,7 +24,10 @@ const Info = ({ buttonAction = () => {}, coordinates = [], bounds, drag }: InfoP
 			</div>
 			<div>
 				<h3>🖐🏼 Drag</h3>
-				<p>Drag the blue marker to see its coordinates change.</p>
+				<p>
+					Drag the <span style={{ color: 'rgb(var(--highlight-rgb))' }}>yellow</span> marker to see its coordinates
+					change.
+				</p>
 				{drag?.dragStart && drag?.dragEnd && (
 					<>
 						<p>Drag start:</p>
@@ -52,13 +54,6 @@ const Info = ({ buttonAction = () => {}, coordinates = [], bounds, drag }: InfoP
 				</div>
 			</div>
 		)}
-		<div className={styles.buttonContainer}>
-			<p>Click UPDATE below to trigger markers coordinates change.</p>
-			<p>Or move the map to trigger bounds change.</p>
-			<button className={styles.action} type="button" onClick={buttonAction}>
-				UPDATE
-			</button>
-		</div>
 	</div>
 )