rever to 9615d4fecd

traque-front/components/admin/mapPicker.jsx

@@ -0,0 +1,125 @@
+"use client";
+import { useLocation } from "@/hook/useLocation";
+import { useEffect, useState } from "react";
+import "leaflet/dist/leaflet.css";
+import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
+import { useMapCircleDraw } from "@/hook/mapDrawing";
+import useAdmin from "@/hook/useAdmin";
+
+function MapPan(props) {
+    const map = useMap();
+    const [initialized, setInitialized] = useState(false);
+
+    useEffect(() => {
+        if (!initialized && props.center) {
+            map.flyTo(props.center, props.zoom, { animate: false });
+            setInitialized(true)
+        }
+    }, [props.center]);
+    return null;
+}
+
+function MapEventListener({ onClick, onMouseMove }) {
+    const map = useMap();
+    useEffect(() => {
+        map.on('click', onClick);
+        return () => {
+            map.off('click', onClick);
+        }
+    }, [onClick]);
+    useEffect(() => {
+        map.on('mousemove', onMouseMove);
+        return () => {
+            map.off('mousemove', onMouseMove);
+        }
+    });
+    return null;
+}
+
+const DEFAULT_ZOOM = 17;
+export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
+    const location = useLocation(Infinity);
+    const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
+    return (
+        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
+            {markerPosition && <Marker position={markerPosition} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [41, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            })}></Marker>}
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
+        </MapContainer>)
+}
+export const EditMode = {
+    MIN: 0,
+    MAX: 1
+}
+export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode, ...props }) {
+    const location = useLocation(Infinity);
+    const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
+    const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
+    function handleClick(e) {
+        if (editMode == EditMode.MAX) {
+            maxClick(e);
+        } else {
+            minClick(e);
+        }
+    }
+    function handleMouseMove(e) {
+        if (editMode == EditMode.MAX) {
+            maxHover(e);
+        } else {
+            minHover(e);
+        }
+    }
+    return (
+        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
+            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
+        </MapContainer>
+    )
+}
+
+export function LiveMap() {
+    const location = useLocation(Infinity);
+    const { zone, zoneExtremities, teams, getTeamName } = useAdmin();
+    return (
+        <MapContainer className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            {zone && <Circle center={zone.center} radius={zone.radius} color="blue" />}
+            {zoneExtremities && <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} />}
+            {zoneExtremities && <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />}
+            {teams.map((team) => team.currentLocation && !team.captured && <Marker key={team.id} position={team.currentLocation} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [41, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            })}>
+                <Popup>
+                    <strong className="text-lg">{team.name}</strong>
+                    <p className="text-md">Chasing : {getTeamName(team.chasing)}</p>
+                    <p className="text-md">Chased by : {getTeamName(team.chased)}</p>
+                </Popup>
+            </Marker>)}
+        </MapContainer>
+    )
+}

traque-front/components/admin/mapZoneSelector.jsx

@@ -1,15 +0,0 @@
-import { useMapGrid } from '@/hook/mapDrawing';
-import { TileNumber, latLngToTileNumber } from '../util/map';
-import { useMapEvent } from 'react-leaflet';
-
-export function MapGridZoneSelector({ tilesColor, onClickTile, tileSize }) {
-    useMapEvent('click', (e) => {
-            const fractionalTileNumber = latLngToTileNumber(e.latlng, tileSize);
-            const tileNumber = new TileNumber(Math.floor(fractionalTileNumber.x), Math.floor(fractionalTileNumber.y));
-            onClickTile(tileNumber);
-    });
-
-    useMapGrid(tilesColor, tileSize);
-
-    return null;
-}

traque-front/components/admin/maps.jsx

@@ -1,245 +0,0 @@
-"use client";
-import { useLocation } from "@/hook/useLocation";
-import { use, useEffect, useState } from "react";
-import "leaflet/dist/leaflet.css";
-import L from "leaflet";
-import { Circle, LayerGroup, LayersControl, MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
-import { useMapCircleDraw, useTilesColor } from "@/hook/mapDrawing";
-import useAdmin from "@/hook/useAdmin";
-import { MapGridZoneSelector } from "./mapZoneSelector.jsx";
-import { useAdminContext } from "@/context/adminContext.jsx";
-import { GreenButton } from "../util/button.jsx";
-import TextInput from "../util/textInput.jsx";
-
-export const TILE_SIZE = 17
-
-function MapPan(props) {
-    const map = useMap();
-    const [initialized, setInitialized] = useState(false);
-
-    useEffect(() => {
-        if (!initialized && props.center) {
-            map.flyTo(props.center, props.zoom, { animate: false });
-            setInitialized(true)
-        }
-    }, [props.center]);
-    return null;
-}
-
-function MapEventListener({ onClick, onMouseMove }) {
-    const map = useMap();
-    useEffect(() => {
-        map.on('click', onClick);
-        return () => {
-            map.off('click', onClick);
-        }
-    }, [onClick]);
-    useEffect(() => {
-        map.on('mousemove', onMouseMove);
-        return () => {
-            map.off('mousemove', onMouseMove);
-        }
-    });
-    return null;
-}
-
-const DEFAULT_ZOOM = 13;
-export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
-    const location = useLocation(Infinity);
-    const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
-    return (
-        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
-            {markerPosition && <Marker position={markerPosition} icon={new L.Icon({
-                iconUrl: '/icons/location.png',
-                iconSize: [41, 41],
-                iconAnchor: [12, 41],
-                popupAnchor: [1, -34],
-                shadowSize: [41, 41]
-            })}></Marker>}
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
-        </MapContainer>)
-}
-
-//https://stackoverflow.com/questions/71231865/show-fixed-100-m-x-100-m-grid-on-lowest-zoom-level
-
-export function ZoneInitializer({ ...props }) {
-    const location = useLocation(Infinity);
-    const { zone } = useAdminContext();
-    const { initZone } = useAdmin();
-
-    const tilesColor = useTilesColor(zone);
-
-    const handleClickTile = (tile) => {
-        if (zone) {
-            if (zone.some(t => t.x === tile.x && t.y === tile.y)) {
-                initZone(zone.filter(t => t.x !== tile.x || t.y !== tile.y));
-            } else {
-                initZone([...zone, tile]);
-            }
-        }
-    }
-
-    return (
-        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <LayersControl>
-                <LayersControl.Overlay name="Play area" checked={true}>
-                    <LayerGroup>
-                        <MapGridZoneSelector tilesColor={tilesColor} onClickTile={handleClickTile} tileSize={TILE_SIZE} />
-                    </LayerGroup>
-                </LayersControl.Overlay>
-            </LayersControl>
-        </MapContainer>
-    )
-}
-
-export function ZoneEditor() {
-    const location = useLocation(Infinity);
-    const { zone, teams, getTeamName, removeZone } = useAdmin();
-    const [zonesToDelete, setZonesToDelete] = useState([]);
-    const [tilesColor, setTilesColor] = useState([]);
-    const [timeBeforeDeletion, setTimeBeforeDeletion] = useState(null);
-
-    function handleClickTile(tile) {
-        if (!zone.some(t => t.x === tile.x && t.y === tile.y)) return;
-        console.log(tile, "click", zonesToDelete);
-        if (!zonesToDelete.some(t => t.x === tile.x && t.y === tile.y)) {
-            setZonesToDelete([...zonesToDelete, tile]);
-            console.log("delete", tile);
-        } else {
-            setZonesToDelete(zonesToDelete.filter(t => t.x !== tile.x || t.y !== tile.y));
-        }
-    }
-
-    useEffect(() => {
-        console.log(zone);
-        setTilesColor([
-            ...zonesToDelete.map(t => ({ x: t.x, y: t.y, color: 'rgba(255, 0, 0, 0.5)' })),
-            ...zone
-                .filter(t => !zonesToDelete.some(t2 => t.x == t2.x && t.y == t2.y))
-                .map(t => {
-                    console.log(t)
-                    if (t.removeDate == null) {
-                        return { x: t.x, y: t.y, color: 'rgba(0, 0, 255, 0.5)' }
-                    } else {
-                        return { x: t.x, y: t.y, color: 'rgba(255, 255, 0, 0.5)' }
-                    }
-                }),
-        ]);
-    }, [zone, zonesToDelete]);
-
-    const handleSubmit = (e) => {
-        if (timeBeforeDeletion == null) {
-            return;
-        }
-        e.preventDefault();
-        removeZone(zonesToDelete, timeBeforeDeletion);
-        setZonesToDelete([]);
-        setTimeBeforeDeletion(null);
-    }
-
-
-    return (
-        <div className="flex flex-col w-full">
-            <div className="h-full">
-                <MapContainer className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
-                    <TileLayer
-                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                    />
-                    <MapPan center={location} zoom={DEFAULT_ZOOM} />
-                    {teams.map((team) => team.currentLocation && !team.captured && <Marker key={team.id} position={team.currentLocation} icon={new L.Icon({
-                        iconUrl: '/icons/location.png',
-                        iconSize: [41, 41],
-                        iconAnchor: [12, 41],
-                        popupAnchor: [1, -34],
-                        shadowSize: [41, 41]
-                    })}>
-                        <Popup>
-                            <strong className="text-lg">{team.name}</strong>
-                            <p className="text-md">Chasing : {getTeamName(team.chasing)}</p>
-                            <p className="text-md">Chased by : {getTeamName(team.chased)}</p>
-                        </Popup>
-                    </Marker>)}
-                    <LayersControl>
-                        <LayersControl.Overlay name="Play area" checked={true}>
-                            <LayerGroup>
-                                <MapGridZoneSelector tilesColor={tilesColor} onClickTile={handleClickTile} tileSize={16} />
-                            </LayerGroup>
-                        </LayersControl.Overlay>
-                    </LayersControl>
-                </MapContainer>
-            </div>
-            <div className="flex flex-row h-20">
-
-                <TextInput className="w-4/5" placeholder="Time before deletion" value={timeBeforeDeletion} onChange={(e) => setTimeBeforeDeletion(Number(e.target.value))}></TextInput>
-                <GreenButton className="w-1/5" onClick={handleSubmit}>Delete selected zones</GreenButton>
-            </div>
-        </div>
-    )
-}
-
-export function LiveMap({ ...props }) {
-    const location = useLocation(Infinity);
-    const { zone, teams, getTeamName  } = useAdmin();
-    const tilesColor = useTilesColor(zone);
-
-    return (
-        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <LayersControl>
-                <LayersControl.Overlay name="Play area" checked={true}>
-                    <LayerGroup>
-                        <MapGridZoneSelector tilesColor={tilesColor} onClickTile={() => { }} tileSize={TILE_SIZE} />
-                    </LayerGroup>
-                </LayersControl.Overlay>
-                <LayersControl.Overlay name="Players live position" checked={true}>
-                    <LayerGroup>
-                        {teams.map((team) => team.currentLocation && !team.captured && <Marker key={team.id} position={team.currentLocation} icon={new L.Icon({
-                            iconUrl: '/icons/location.png',
-                            iconSize: [41, 41],
-                            iconAnchor: [12, 41],
-                            popupAnchor: [1, -34],
-                            shadowSize: [41, 41]
-                        })}>
-                            <Popup>
-                                <strong className="text-lg">{team.name}</strong>
-                                <p className="text-md">Chasing : {getTeamName(team.chasing)}</p>
-                                <p className="text-md">Chased by : {getTeamName(team.chased)}</p>
-                            </Popup>
-                        </Marker>)}
-                    </LayerGroup>
-                </LayersControl.Overlay>
-                <LayersControl.Overlay name="Players last sent position" checked={false}>
-                    <LayerGroup>
-                        {teams.map((team) => team.currentLocation && !team.captured && <Marker key={team.id} position={team.lastSentLocation} icon={new L.Icon({
-                            iconUrl: '/icons/clock.png',
-                            iconSize: [41, 41],
-                            iconAnchor: [12, 41],
-                            popupAnchor: [1, -34],
-                            shadowSize: [41, 41]
-                        })}>
-                            <Popup>
-                                <strong className="text-lg">Last position of {team.name}</strong>
-                            </Popup>
-                        </Marker>)}
-                    </LayerGroup>
-                </LayersControl.Overlay>
-            </LayersControl>
-        </MapContainer>
-    )
-}

traque-front/components/admin/teamEdit.jsx

@@ -4,7 +4,7 @@ import BlueButton, { RedButton } from '../util/button';
 import useAdmin from '@/hook/useAdmin';
 import dynamic from 'next/dynamic';
 
-const CircularAreaPicker = dynamic(() => import('./maps').then((mod) => mod.CircularAreaPicker), {
+const CircularAreaPicker = dynamic(() => import('./mapPicker').then((mod) => mod.CircularAreaPicker), {
     ssr: false
 });
 

traque-front/components/admin/zoneSelector.jsx

@@ -1,12 +1,61 @@
-import {  ZoneInitializer } from "./maps";
+import { useEffect, useState } from "react";
+import BlueButton, { GreenButton, RedButton } from "../util/button";
+import { EditMode, ZonePicker } from "./mapPicker";
+import TextInput from "../util/textInput";
+import useAdmin from "@/hook/useAdmin";
 
 export function ZoneSelector() {
+    const [editMode, setEditMode] = useState(EditMode.MIN);
+    const [minZone, setMinZone] = useState(null);
+    const [maxZone, setMaxZone] = useState(null);
+    const [reductionCount, setReductionCount] = useState("");
+    const [reductionDuration, setReductionDuration] = useState("");
+    const [reductionInterval, setReductionInterval] = useState("");
+    const {zoneSettings, changeZoneSettings} = useAdmin();
+
+    useEffect(() => {
+        if (zoneSettings) {
+            setMinZone(zoneSettings.min);
+            setMaxZone(zoneSettings.max);
+            setReductionCount(zoneSettings.reductionCount.toString());
+            setReductionDuration(zoneSettings.reductionDuration.toString());
+            setReductionInterval(zoneSettings.reductionInterval.toString());
+        }
+    }, [zoneSettings]);
+
+    function handleSettingsSubmit() {
+        changeZoneSettings({min:minZone, max:maxZone, reductionCount: Number(reductionCount), reductionDuration: Number(reductionDuration), reductionInterval: Number(reductionInterval)});
+    }
 
     //When the user set one zone, switch to the other
+    useEffect(() => {
+        if(editMode == EditMode.MIN) {
+            setEditMode(EditMode.MAX);
+        }else {
+            setEditMode(EditMode.MIN);
+        }
+
+    }, [minZone, maxZone]);
+
     return <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
         <h2 className="text-2xl">Edit zones</h2>
+        {editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>}
+        {editMode == EditMode.MAX && <BlueButton onClick={() => setEditMode(EditMode.MIN)}>Edit start zone</BlueButton>}
         <div className='h-96'>
-            <ZoneInitializer />
+            <ZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
         </div>
+        <div>
+            <p>Number of reductions</p>
+            <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>
+        </div>
+        <div>
+            <p>Duration of each reduction</p>
+            <TextInput value={reductionDuration} onChange={(e) => setReductionDuration(e.target.value)}></TextInput>
+        </div>
+        <div>
+            <p>Interval between reductions</p>
+            <TextInput value={reductionInterval} onChange={(e) => setReductionInterval(e.target.value)}></TextInput>
+        </div>
+        <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
     </div>
 }

traque-front/components/team/actionDrawer.jsx

@@ -16,6 +16,7 @@ export default function ActionDrawer() {
 
     useEffect(() => {
         const interval = setInterval(() => {
+            console.log(locationSendDeadline)
             const timeLeft = locationSendDeadline - Date.now();
             setTimeLeftBeforePenalty(Math.floor(timeLeft / 1000 / 60));
         }, 1000);

traque-front/components/team/map.jsx

@@ -1,14 +1,11 @@
 'use client';
 import React, { useEffect, useState } from 'react'
-import { Circle, LayerGroup, LayersControl, MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
+import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
 import "leaflet-defaulticon-compatibility";
 import "leaflet/dist/leaflet.css";
 import useGame from '@/hook/useGame';
 import { useTeamContext } from '@/context/teamContext';
-import {  useTilesColor } from '@/hook/mapDrawing';
-import { MapGridZoneSelector } from '../admin/mapZoneSelector';
-import { TILE_SIZE } from '../admin/maps';
 
 const DEFAULT_ZOOM = 17;
 
@@ -28,11 +25,27 @@ function MapPan(props) {
     return null;
 }
 
-export function LiveMap({ ...props }) {
-    const {zone} = useTeamContext();
-    const tilesColor = useTilesColor(zone);
-    const { currentPosition, enemyPosition } = useGame();
+function LiveZone() {
+    const { zone } = useTeamContext();
+    console.log('Zone', zone);
+    return zone && <Circle center={zone.center} radius={zone.radius} color='blue' fill={false} />
+}
 
+function ZoneExtremities() {
+    const { zoneExtremities } = useTeamContext();
+    console.log('Zone extremities', zoneExtremities);
+    return zoneExtremities?.begin && zoneExtremities?.end && <>
+        {/* <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} /> */}
+        <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />
+    </>
+
+}
+
+export function LiveMap({ ...props }) {
+    const { currentPosition, enemyPosition } = useGame();
+    useEffect(() => {
+        console.log('Current position', currentPosition);
+    }, [currentPosition]);
     return (
         <MapContainer  {...props} className='min-h-full z-0' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
             <TileLayer
@@ -62,13 +75,8 @@ export function LiveMap({ ...props }) {
                 </Popup>
             </Marker>}
             <MapPan center={currentPosition} />
-            <LayersControl>
-                <LayersControl.Overlay name="Play area" checked={true}>
-                    <LayerGroup>
-                        <MapGridZoneSelector tilesColor={tilesColor} onClickTile={()=>{}} tileSize={TILE_SIZE}/>
-                    </LayerGroup>
-                </LayersControl.Overlay>
-            </LayersControl>
+            <LiveZone />
+            <ZoneExtremities />
         </MapContainer>
     )
 }

traque-front/components/team/placementOverlay.jsx

@@ -1,5 +1,6 @@
 import { useTeamConnexion } from "@/context/teamConnexionContext";
 import useGame from "@/hook/useGame"
+import Image from "next/image";
 
 export default function PlacementOverlay() {
     const { name, ready } = useGame();

traque-front/components/util/map.jsx

@@ -1,21 +0,0 @@
-export class TileNumber {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-        this.removeDate = null;
-    }
-    equals(other) {
-        return this.x === other.x && this.y === other.y;
-    }
-}
-
-export function latLngToTileNumber(latLng, tileSize) {
-    const numTilesX = 2 ** tileSize;
-    const numTilesY = 2 ** tileSize;
-    const lngDegrees = latLng.lng;
-    const latRadians = latLng.lat * (Math.PI / 180);
-    return new L.Point(
-        numTilesX * ((lngDegrees + 180) / 360),
-        numTilesY * (1 - Math.log(Math.tan(latRadians) + 1 / Math.cos(latRadians)) / Math.PI) / 2
-    );
-}