Revize 351a2dd2
Přidáno uživatelem Václav Honzík před asi 3 roky(ů)
| map_frameworks/package.json | ||
|---|---|---|
| 6 | 6 |
"@testing-library/jest-dom": "^5.14.1", |
| 7 | 7 |
"@testing-library/react": "^12.0.0", |
| 8 | 8 |
"@testing-library/user-event": "^13.2.1", |
| 9 |
"@types/": "urbica/react-map-gl", |
|
| 9 | 10 |
"@types/dotenv": "^8.2.0", |
| 10 | 11 |
"@types/jest": "^27.0.1", |
| 11 | 12 |
"@types/mapbox-gl": "^2.6.2", |
| 12 | 13 |
"@types/node": "^16.7.13", |
| 13 | 14 |
"@types/react": "^17.0.20", |
| 14 | 15 |
"@types/react-dom": "^17.0.9", |
| 16 |
"@urbica/react-map-gl": "^1.14.4", |
|
| 15 | 17 |
"mapbox-gl": "^2.7.0", |
| 18 |
"pigeon-maps": "^0.20.0", |
|
| 16 | 19 |
"react": "^17.0.2", |
| 17 | 20 |
"react-dom": "^17.0.2", |
| 21 |
"react-router-dom": "^6.2.2", |
|
| 18 | 22 |
"react-scripts": "5.0.0", |
| 19 | 23 |
"typescript": "^4.4.2", |
| 20 | 24 |
"web-vitals": "^2.1.0" |
| map_frameworks/src/App.tsx | ||
|---|---|---|
| 1 | 1 |
import React from 'react' |
| 2 | 2 |
import './App.css' |
| 3 | 3 |
import MapBoxExample from './component/MapBoxExample' |
| 4 |
import PigeonMapsExample from './component/PigeonMapsExample' |
|
| 4 | 5 |
|
| 5 |
function App() {
|
|
| 6 |
return ( |
|
| 7 |
<div className="App"> |
|
| 8 |
<MapBoxExample/> |
|
| 9 |
</div> |
|
| 10 |
) |
|
| 11 |
} |
|
| 6 |
const App = () => ( |
|
| 7 |
<div className="App"> |
|
| 8 |
<MapBoxExample/> |
|
| 9 |
<PigeonMapsExample/> |
|
| 10 |
</div> |
|
| 11 |
) |
|
| 12 | 12 |
|
| 13 | 13 |
export default App |
| map_frameworks/src/component/MapBoxExample.tsx | ||
|---|---|---|
| 9 | 9 |
|
| 10 | 10 |
// Adapted from |
| 11 | 11 |
// https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/ |
| 12 |
|
|
| 13 |
// Potential wrapper could be: https://github.com/alex3165/react-mapbox-gl |
|
| 14 |
// https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/ |
|
| 15 |
|
|
| 16 |
// But has only 50k uses PER MONTH lol |
|
| 12 | 17 |
const MapBoxExample = () => {
|
| 13 | 18 |
|
| 14 | 19 |
const [lng, setLng] = useState(coords.lng) |
| ... | ... | |
| 24 | 29 |
for (let i = 1; i <= 10; i += 1) { //
|
| 25 | 30 |
new mapboxgl.Marker() |
| 26 | 31 |
.setLngLat([i * .5 + coords.lng, i * .5 + coords.lat]) |
| 27 |
.setPopup(new Popup() |
|
| 28 |
.setHTML(`<h3>HELLO POPUP ${ i } ☀️🍕😂😅</h3>`))
|
|
| 32 |
.setPopup(new Popup().setHTML(`<h3>HELLO POPUP ${ i } ☀️🍕😂😅</h3>`))
|
|
| 29 | 33 |
.addTo(map.current as mapboxgl.Map) |
| 30 | 34 |
} |
| 31 | 35 |
} |
| ... | ... | |
| 48 | 52 |
addMarkers() |
| 49 | 53 |
}) |
| 50 | 54 |
|
| 51 |
console.log('Whatup')
|
|
| 52 |
|
|
| 53 | 55 |
return ( |
| 54 |
<div>
|
|
| 55 |
<h1>Hello Map</h1>
|
|
| 56 |
<div ref={ mapContainer } style={ { height: '700px' } }/>
|
|
| 57 |
</div>
|
|
| 56 |
<> |
|
| 57 |
<h1>MapBox Example</h1>
|
|
| 58 |
<div ref={ mapContainer } style={ { height: '400px' } }/>
|
|
| 59 |
</> |
|
| 58 | 60 |
) |
| 59 | 61 |
} |
| 60 | 62 |
|
| map_frameworks/src/component/PigeonMapsExample.tsx | ||
|---|---|---|
| 1 |
import { Map, Marker } from 'pigeon-maps'
|
|
| 2 |
import { useState } from 'react'
|
|
| 3 |
|
|
| 4 |
// This would be also a great library but did not find any official way to draw path |
|
| 5 |
const PigeonMapsExample = () => {
|
|
| 6 |
return ( |
|
| 7 |
<> |
|
| 8 |
<h1>PigeonMaps Example</h1> |
|
| 9 |
<Map height={ 400 } defaultCenter={ [50.879, 4.6997] } defaultZoom={ 11 }>
|
|
| 10 |
<Marker width={ 50 } anchor={ [50.879, 4.6997] }/>
|
|
| 11 |
</Map> |
|
| 12 |
</> |
|
| 13 |
) |
|
| 14 |
} |
|
| 15 |
|
|
| 16 |
export default PigeonMapsExample |
|
Také k dispozici: Unified diff
pigeon maps