Client - fix map bounds display since MapContainer props are immutable
(linked to react-leaflet update to v3.0+)
This commit is contained in:
Sam
14
fittrackee/dist/asset-manifest.json
vendored
14
fittrackee/dist/asset-manifest.json
vendored
@@ -1,15 +1,15 @@
|
|||||||
{
|
{
|
||||||
"files": {
|
"files": {
|
||||||
"main.css": "/static/css/main.34182cc5.chunk.css",
|
"main.css": "/static/css/main.34182cc5.chunk.css",
|
||||||
"main.js": "/static/js/main.0bf3092a.chunk.js",
|
"main.js": "/static/js/main.6835a9fb.chunk.js",
|
||||||
"main.js.map": "/static/js/main.0bf3092a.chunk.js.map",
|
"main.js.map": "/static/js/main.6835a9fb.chunk.js.map",
|
||||||
"runtime-main.js": "/static/js/runtime-main.1240af94.js",
|
"runtime-main.js": "/static/js/runtime-main.1240af94.js",
|
||||||
"runtime-main.js.map": "/static/js/runtime-main.1240af94.js.map",
|
"runtime-main.js.map": "/static/js/runtime-main.1240af94.js.map",
|
||||||
"static/js/2.c2a15923.chunk.js": "/static/js/2.c2a15923.chunk.js",
|
"static/js/2.1b88ef3c.chunk.js": "/static/js/2.1b88ef3c.chunk.js",
|
||||||
"static/js/2.c2a15923.chunk.js.map": "/static/js/2.c2a15923.chunk.js.map",
|
"static/js/2.1b88ef3c.chunk.js.map": "/static/js/2.1b88ef3c.chunk.js.map",
|
||||||
"index.html": "/index.html",
|
"index.html": "/index.html",
|
||||||
"static/css/main.34182cc5.chunk.css.map": "/static/css/main.34182cc5.chunk.css.map",
|
"static/css/main.34182cc5.chunk.css.map": "/static/css/main.34182cc5.chunk.css.map",
|
||||||
"static/js/2.c2a15923.chunk.js.LICENSE.txt": "/static/js/2.c2a15923.chunk.js.LICENSE.txt",
|
"static/js/2.1b88ef3c.chunk.js.LICENSE.txt": "/static/js/2.1b88ef3c.chunk.js.LICENSE.txt",
|
||||||
"static/media/en.9e6dbfb0.svg": "/static/media/en.9e6dbfb0.svg",
|
"static/media/en.9e6dbfb0.svg": "/static/media/en.9e6dbfb0.svg",
|
||||||
"static/media/fr.d0f9280c.svg": "/static/media/fr.d0f9280c.svg",
|
"static/media/fr.d0f9280c.svg": "/static/media/fr.d0f9280c.svg",
|
||||||
"static/media/mail-send.619079f0.svg": "/static/media/mail-send.619079f0.svg",
|
"static/media/mail-send.619079f0.svg": "/static/media/mail-send.619079f0.svg",
|
||||||
@@ -17,8 +17,8 @@
|
|||||||
},
|
},
|
||||||
"entrypoints": [
|
"entrypoints": [
|
||||||
"static/js/runtime-main.1240af94.js",
|
"static/js/runtime-main.1240af94.js",
|
||||||
"static/js/2.c2a15923.chunk.js",
|
"static/js/2.1b88ef3c.chunk.js",
|
||||||
"static/css/main.34182cc5.chunk.css",
|
"static/css/main.34182cc5.chunk.css",
|
||||||
"static/js/main.0bf3092a.chunk.js"
|
"static/js/main.6835a9fb.chunk.js"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
2
fittrackee/dist/index.html
vendored
2
fittrackee/dist/index.html
vendored
@@ -1 +1 @@
|
|||||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation-icons/3.0/foundation-icons.min.css"><link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""><title>FitTrackee</title><link href="/static/css/main.34182cc5.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><script type="text/javascript">$(document).ready((function(){$("li.nav-item").click((function(){$("button.navbar-toggler").toggleClass("collapsed"),$("#navbarSupportedContent").toggleClass("show")}))}))</script><script>!function(e){function t(t){for(var n,i,l=t[0],f=t[1],a=t[2],p=0,s=[];p<l.length;p++)i=l[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(t);s.length;)s.shift()();return u.push.apply(u,a||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var f=r[l];0!==o[f]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var l=this.webpackJsonpfittrackee_client=this.webpackJsonpfittrackee_client||[],f=l.push.bind(l);l.push=t,l=l.slice();for(var a=0;a<l.length;a++)t(l[a]);var c=f;r()}([])</script><script src="/static/js/2.c2a15923.chunk.js"></script><script src="/static/js/main.0bf3092a.chunk.js"></script></body></html>
|
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation-icons/3.0/foundation-icons.min.css"><link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""><title>FitTrackee</title><link href="/static/css/main.34182cc5.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><script type="text/javascript">$(document).ready((function(){$("li.nav-item").click((function(){$("button.navbar-toggler").toggleClass("collapsed"),$("#navbarSupportedContent").toggleClass("show")}))}))</script><script>!function(e){function t(t){for(var n,i,l=t[0],f=t[1],a=t[2],p=0,s=[];p<l.length;p++)i=l[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(t);s.length;)s.shift()();return u.push.apply(u,a||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var f=r[l];0!==o[f]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var l=this.webpackJsonpfittrackee_client=this.webpackJsonpfittrackee_client||[],f=l.push.bind(l);l.push=t,l=l.slice();for(var a=0;a<l.length;a++)t(l[a]);var c=f;r()}([])</script><script src="/static/js/2.1b88ef3c.chunk.js"></script><script src="/static/js/main.6835a9fb.chunk.js"></script></body></html>
|
||||||
File diff suppressed because one or more lines are too long
1
fittrackee/dist/static/js/2.1b88ef3c.chunk.js.map
vendored
Normal file
1
fittrackee/dist/static/js/2.1b88ef3c.chunk.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
fittrackee/dist/static/js/main.6835a9fb.chunk.js
vendored
Normal file
2
fittrackee/dist/static/js/main.6835a9fb.chunk.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
fittrackee/dist/static/js/main.6835a9fb.chunk.js.map
vendored
Normal file
1
fittrackee/dist/static/js/main.6835a9fb.chunk.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,10 +1,9 @@
|
|||||||
import hash from 'object-hash'
|
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { GeoJSON, MapContainer, Marker, TileLayer } from 'react-leaflet'
|
import { MapContainer } from 'react-leaflet'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
|
|
||||||
|
import Map from './Map'
|
||||||
import { getActivityGpx, getSegmentGpx } from '../../../actions/activities'
|
import { getActivityGpx, getSegmentGpx } from '../../../actions/activities'
|
||||||
import { apiUrl } from '../../../utils'
|
|
||||||
import { getGeoJson } from '../../../utils/activities'
|
import { getGeoJson } from '../../../utils/activities'
|
||||||
|
|
||||||
class ActivityMap extends React.Component {
|
class ActivityMap extends React.Component {
|
||||||
@@ -59,21 +58,12 @@ class ActivityMap extends React.Component {
|
|||||||
bounds={bounds}
|
bounds={bounds}
|
||||||
boundsOptions={{ padding: [10, 10] }}
|
boundsOptions={{ padding: [10, 10] }}
|
||||||
>
|
>
|
||||||
<TileLayer
|
<Map
|
||||||
// eslint-disable-next-line max-len
|
bounds={bounds}
|
||||||
attribution={mapAttribution}
|
coordinates={coordinates}
|
||||||
url={`${apiUrl}activities/map_tile/{s}/{z}/{x}/{y}.png`}
|
jsonData={jsonData}
|
||||||
|
mapAttribution={mapAttribution}
|
||||||
/>
|
/>
|
||||||
<GeoJSON
|
|
||||||
// hash as a key to force re-rendering
|
|
||||||
key={hash(jsonData)}
|
|
||||||
data={jsonData}
|
|
||||||
/>
|
|
||||||
{coordinates.latitude && (
|
|
||||||
<Marker
|
|
||||||
position={[coordinates.latitude, coordinates.longitude]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</MapContainer>
|
</MapContainer>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { GeoJSON, Marker, TileLayer, useMap } from 'react-leaflet'
|
||||||
|
import hash from 'object-hash'
|
||||||
|
|
||||||
|
import { apiUrl } from '../../../utils'
|
||||||
|
|
||||||
|
export default function Map({ bounds, coordinates, jsonData, mapAttribution }) {
|
||||||
|
const map = useMap()
|
||||||
|
map.fitBounds(bounds)
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TileLayer
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
|
attribution={mapAttribution}
|
||||||
|
url={`${apiUrl}activities/map_tile/{s}/{z}/{x}/{y}.png`}
|
||||||
|
/>
|
||||||
|
<GeoJSON
|
||||||
|
// hash as a key to force re-rendering
|
||||||
|
key={hash(jsonData)}
|
||||||
|
data={jsonData}
|
||||||
|
/>
|
||||||
|
{coordinates.latitude && (
|
||||||
|
<Marker position={[coordinates.latitude, coordinates.longitude]} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user