dancingCycle
/
sandbox-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(leaflet): add svg loader according to https://www.pluralsight.com/guides/how-to-load-svg-with-react-and-webpack

This commit is contained in:
dancingCycle 2022-09-14 21:25:30 +02:00
parent df3c4eedda
commit bde18f1b2a
7 changed files with 110 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
leaflet/app/components/map/bfly-black.jsx
View File

@ -1,13 +1,15 @@
import L from 'leaflet';
const iconBFlyBlack = new L.Icon({
iconUrl: require('../../assets/Logo_SIB_schwarz.svg');
iconUrl: require('../../assets/Logo_SIB_schwarz.svg'),
iconAnchor: null,
popupAnchor: null,
shadowUrl: null,
shadowSize: null,
shadowAnchor: null,
iconSize: [32,45]
/*TODO study
iconSize: new L.Point(60, 75),
className: 'leaflet-div-icon'
*/
});
export { iconBFlyBlack };

7
leaflet/app/components/map/map.jsx
View File

@ -9,9 +9,9 @@ import { getRequiredSVGPinByCategory } from './pin-by-category';
/**/
import BoatMarker from './marker-boat';
/**/
/*TODO add SVG loader
import MarkerBFly from './marker-butterfly';
*/
/**/
import MarkerBFlyBlack from './marker-butterfly-black';
const Map = () => {
const position = [51.505, -0.09]
const positionP = [51.504, -0.09]
@ -31,7 +31,8 @@ const Map = () => {
</Popup>
</Marker>
<BoatMarker/>
{/*TODO add SVG loader <MarkerBFly/>*/}
<MarkerBFly/>
<MarkerBFlyBlack/>
</MapContainer>
</>
);

4
leaflet/app/components/map/marker-butterfly-black.jsx
View File

@ -1,13 +1,13 @@
import React from "react";
import {Marker, Popup} from 'react-leaflet'
import L from 'leaflet';
import BFlyBlack from './bfly-black';
import {iconBFlyBlack} from './bfly-black';
export default function MarkerButterflyBlack(props) {
const positionM = [51.502, -0.09]
return (
<Marker
position={positionM}
icon={BFlyBlack}
icon={iconBFlyBlack}
>
<Popup>
Popup

2
leaflet/app/components/map/marker-butterfly.jsx
View File

@ -5,7 +5,7 @@ import bfly from '../../assets/Logo_SIB_electricindigo.svg';
export default function MarkerButterfly(props) {
const positionM = [51.503, -0.09]
const myIcon = new L.Icon({
iconUrl: blfy,
iconUrl: bfly,
iconRetinaUrl: bfly,
popupAnchor: [-0, -0],
iconSize: [32,45],

12
leaflet/config/webpack.common.js
View File

@ -26,6 +26,18 @@ module.exports = {
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
//test all *.svg using svg-loader
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
},
]
},
resolve: {

86
leaflet/package-lock.json generated
View File

@ -25,6 +25,7 @@
"css-loader": "6.7.1",
"html-webpack-plugin": "5.5.0",
"style-loader": "3.3.1",
"svg-url-loader": "^8.0.0",
"webpack": "5.73.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.9.3",
@ -3477,6 +3478,44 @@
"node": ">=0.8.0"
}
},
"node_modules/file-loader": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
"dev": true,
"dependencies": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/file-loader/node_modules/schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"dependencies": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -5794,6 +5833,21 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/svg-url-loader": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-8.0.0.tgz",
"integrity": "sha512-5doSXvl18hY1fGsRLdhWAU5jgzgxJ06/gc/26cpuDnN0xOz1HmmfhkpL29SSrdIvhtxQ1UwGzmk7wTT/l48mKw==",
"dev": true,
"dependencies": {
"file-loader": "~6.2.0"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"webpack": "^5.0.0"
}
},
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@ -9061,6 +9115,29 @@
"websocket-driver": ">=0.5.1"
}
},
"file-loader": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"dependencies": {
"schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
}
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -10797,6 +10874,15 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true
},
"svg-url-loader": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-8.0.0.tgz",
"integrity": "sha512-5doSXvl18hY1fGsRLdhWAU5jgzgxJ06/gc/26cpuDnN0xOz1HmmfhkpL29SSrdIvhtxQ1UwGzmk7wTT/l48mKw==",
"dev": true,
"requires": {
"file-loader": "~6.2.0"
}
},
"tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

1
leaflet/package.json
View File

@ -25,6 +25,7 @@
"css-loader": "6.7.1",
"html-webpack-plugin": "5.5.0",
"style-loader": "3.3.1",
"svg-url-loader": "^8.0.0",
"webpack": "5.73.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.9.3",