{"version":3,"sources":["Card.js","App.js","reportWebVitals.js","index.js"],"names":["setProp","ref","prop","value","current","style","setProperty","Card","props","cardActive","setCardActive","useState","animation","setAnimation","useRef","careTakers","setCareTakers","useEffect","max","Math","floor","random","id","onMouseMove","e","width","offsetWidth","YAngle","pageX","offsetLeft","XAngle","pageY","offsetTop","sqrt","onMouseLeave","onMouseEnter","src","alt","name","mapboxgl","accessToken","console","log","trees","features","properties","SOORT_KORT","geometry","coordinates","length","App","mapContainer","map","lng","setLng","lat","setLat","zoom","setZoom","selectModel","setselectModel","popup","setPopup","Map","container","center","pitch","on","onSelectedChange","detail","selected","flyTo","bearing","speed","curve","easing","t","essential","addObject","sorte","options","obj","type","scale","units","rotation","x","y","z","anchor","window","tb","loadObj","model","tree","setCoords","fixedZoom","addEventListener","add","addLayer","renderingMode","onAdd","m","gl","Threebox","defaultLights","enableSelectingObjects","forEach","render","metric","update","buildings","remove","getCenter","toFixed","getZoom","className","innerWidth","height","innerHeight","userData","slice","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","StrictMode","fallBack","document","getElementById"],"mappings":"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","file":"static/js/main.00f22a41.chunk.js","sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport \"./Card.css\";\n\nconst setProp = (ref, prop, value) =>\n ref.current.style.setProperty(prop, value);\n\nexport default function Card(props) {\n const [cardActive, setCardActive] = useState(false);\n const [animation, setAnimation] = useState(0);\n const ref = useRef(null);\n const [careTakers, setCareTakers] = useState(0);\n\n useEffect(() => {\n setProp(ref, \"--dx\", \"0deg\");\n setProp(ref, \"--dy\", \"0deg\");\n setProp(ref, \"--dp\", \"0deg\");\n setAnimation(1);\n return setAnimation(-1);\n }, []);\n\n useEffect(() => {\n setCareTakers(getRandomInt(100));\n }, [careTakers]);\n\n const onMouseMove = (e) => {\n // if(cardActive){\n let width = ref.current.offsetWidth;\n let XRel = e.pageX - ref.current.offsetLeft;\n let YRel = e.pageY - ref.current.offsetTop;\n\n let YAngle = -(0.5 - XRel / width) * 40;\n let XAngle = (0.5 - YRel / width) * 40;\n // console.log(XAngle,Math.sqrt(XAngle * XAngle ))\n setProp(ref, \"--dx\", `${XAngle}deg`);\n setProp(ref, \"--dy\", `${YAngle}deg`);\n setProp(\n ref,\n \"--dp\",\n `${Math.sqrt(XAngle * XAngle) + Math.sqrt(YAngle * YAngle) / 2}%`\n );\n // }\n };\n const onPointerOut = (e) => {\n setProp(ref, \"--dx\", \"0deg\");\n setProp(ref, \"--dy\", \"0deg\");\n setProp(ref, \"--dp\", \"0%\");\n setCardActive(false);\n };\n\n const onMouseEnter = () => {\n setCardActive(true);\n };\n\n // to illustrate with different values,\n // for now we'll generate these numbers randomly\n // number of people that taken care of the plants.\n function getRandomInt(max) {\n return Math.floor(Math.random() * max);\n }\n\n return (\n \n
\n
\n \"tree\"\n

{props.name}

\n

did:0x0291

\n {/*
*/}\n {/*
\n
\n
\n
\n
\n
*/}\n\n

{careTakers} contributors took care of me

\n
\n
\n \n );\n}\n","/* ************************************************************************** */\n/* */\n/* ::: :::::::: */\n/* App.js :+: :+: :+: */\n/* +:+ +:+ +:+ */\n/* By: mgavillo +#+ +:+ +#+ */\n/* +#+#+#+#+#+ +#+ */\n/* Created: 2022/02/06 01:20:58 by mgavillo #+# #+# */\n/* Updated: 2022/02/11 01:37:34 by mgavillo ### ########.fr */\n/* */\n/* ************************************************************************** */\n\n\nimport React, {useRef, useState, useEffect} from 'react';\nimport './popup.css'\nimport mapboxgl, {CameraOptions} from 'mapbox-gl';\n// import cameraOptions from \"com.mapbox.maps.dsl.cameraOptions\";\n// import mapAnimationOptions from \"com.mapbox.maps.plugin.animation.MapAnimationOptions.Companion.mapAnimationOptions\" ;\n// import flyTo from \"com.mapbox.maps.plugin.animation.flyTo\";\nimport buildings from './buildings.json'\nimport {Threebox} from 'threebox-plugin'\nimport trees from './geojson_lnglat.php.json'\nimport Card from \"./Card\"\nmapboxgl.accessToken = 'pk.eyJ1Ijoic3dhZ2d5bWFyaWUiLCJhIjoiY2t6YWIwMmJ4MDVsazJvc2F1OGgyZng3ZCJ9.DwdPX1NESbr-69ReQRu6XA';\n\nconsole.log(trees.features[69000].properties.SOORT_KORT);\nconsole.log(trees.features[69000].geometry.coordinates[0], trees.features[69000].geometry.coordinates[1]);\n\nconsole.log(trees.features.length)\nfunction App() {\n const mapContainer = useRef(null);\n const map = useRef(null);\n\n // change start point to Vondelpark, Amsterdam\n const [lng, setLng] = useState('4.8672965666724375'); // \n const [lat, setLat] = useState('52.35732625243595');\n \n const [zoom, setZoom] = useState(17);\n // const [lng, setLng] = useState(trees.features[69000].geometry.coordinates[0]);\n // const [lat, setLat] = useState(trees.features[69000].geometry.coordinates[1]);\n const [selectModel, setselectModel] = useState(null);\n const [popup, setPopup] = useState(0);\n\n // const camera = useRef(null)\n // const scene = useRef(null)\n // const renderer = useRef(null)\n\n useEffect(() => {\n // if (map.current) return; // initialize map only once\n map.current = new mapboxgl.Map({\n container: mapContainer.current,\n style: 'mapbox://styles/mapbox/dark-v10',\n center: [lng, lat],\n zoom: zoom,\n pitch: 70,\n })\n\n map.current.on(\"style.load\", () => {\n // const layers = map.current.getStyle().layers;\n // const labelLayerId = layers.find(\n // (layer) => layer.type === 'symbol' && layer.layout['text-field']).id;\n \n const onSelectedChange = (e) => {\n const selected = e.detail.selected;\n if (selected) {\n setselectModel(e.detail);\n console.log(e.detail);\n map.current.flyTo({\n center: e.detail.coordinates,\n zoom: 16,\n bearing: 0,\n pitch:70,\n speed: 1, \n curve: 1, \n easing: (t) => t,\n essential: true\n })\n setPopup(1);\n\n } else {\n setPopup(0);\n setselectModel(null);\n }\n };\n\n const addObject = (sorte, coordinates) => {\n const options = {\n obj: `/${sorte}.glb`,\n type: \"gltf\",\n scale: 1,\n units: \"meters\",\n rotation: { x: 90, y: Math.random() * 360, z: 0 },\n anchor: \"center\", //default rotation\n\n };\n\n window.tb.loadObj(options, (model) => {\n const tree = model.setCoords([coordinates[0], coordinates[1]])\n tree.fixedZoom = 1;\n tree.addEventListener(\"SelectedChange\", onSelectedChange, false);\n // Listening to the events\n // tree.addEventListener(\"SelectedChange\", onSelectedChange, false);\n // // tree.addEventListener('Wireframed', onWireframed, false);\n // // tree.addEventListener('IsPlayingChanged', onIsPlayingChanged, false);\n // // tree.addEventListener('ObjectDragged', onDraggedObject, false);\n // tree.addEventListener(\n // \"ObjectMouseOver\",\n // onObjectMouseOver,\n // false\n // );\n // tree.addEventListener('ObjectMouseOut', onObjectMouseOut, false);\n // tree.addEventListener('ObjectChanged', onObjectChanged, false);\n\n window.tb.add(tree, sorte);\n });\n }\n\n map.current.addLayer({\n id: 'custom_layer',\n type: 'custom',\n renderingMode: '3d',\n onAdd: (m, gl) => {\n window.tb = new Threebox(m, gl, {\n defaultLights: true,\n // enableSelectingFeatures: true,\n enableSelectingObjects: true\n // enableDraggingObjects: true,\n // enableRotatingObjects: true\n // enableTooltips: true,\n });\n\n trees.features.forEach((e) => {\n if(e.properties.SOORT_KORT === \"Populus\")\n {\n addObject(e.properties.SOORT_KORT, e.geometry.coordinates)\n }\n if(e.properties.SOORT_KORT === \"Salix\"){\n addObject( e.properties.SOORT_KORT, e.geometry.coordinates)\n }\n })\n\n },\n render: (gl, metric) => {\n window.tb.update();\n }\n });\n map.current.addLayer(buildings);\n })\n \n map.current.on(\"load\", (e) => {\n // console.log(e);\n });\n\n\n return () => {\n map.current.remove();\n }\n }, []);\n \n\n useEffect(() => {\n if (!map.current) return; // wait for map to initialize\n map.current.on('move', () => {\n setLng(map.current.getCenter().lng.toFixed(4));\n setLat(map.current.getCenter().lat.toFixed(4));\n setZoom(map.current.getZoom().toFixed(2));\n });\n });\n return( \n
\n {/*
Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
*/}\n
\n {\n popup && \n }\n
\n )\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React, {Suspense} from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n \n\n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}