Skip to content

Svg sprite plugin #762

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+1,640 −1,087
Open

Svg sprite plugin #762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a2dabf7
feat: use terriajs svg-sprite plugin
zoran995 Aug 8, 2025
ead80ff
wait for index.html to exists before starting terriajs-servre
zoran995 Aug 18, 2025
0f9d9ce
implement sprite loader instead of injecting sprites into html
zoran995 Aug 19, 2025
b56e89a
put sprites in DOM under svg-sprites id
zoran995 Aug 19, 2025
57ea78e
Merge remote-tracking branch 'origin/main' into svg-sprite-plugin
zoran995 Sep 14, 2025
bee0ac8
use script injected in main output file
zoran995 Sep 14, 2025
b48e159
pass correct namespace
zoran995 Sep 15, 2025
6dd8c43
pass baseHref as param to webpack
zoran995 Sep 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions buildprocess/configureWebpackForPlugins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

const path = require("path");
const fs = require("fs");

/**
* RegExp pattern used for matching plugin package names for applying various rules.
*
Expand All @@ -19,7 +18,7 @@ function configureWebpackForPlugins(config) {
}

/**
* Creates a webpack rule for processing svg icons from terriajs plugins using `svg-sprite-loader`.
* Creates a webpack rule for processing svg icons from terriajs plugins using terriajs `svg-sprite-loader`.
* We check two things to decide whether to include an icon:
* 1. The icon belongs to assets/icons folder
* 2. assets/icons/../../package.json has a name field with `terriajs-plugin-` prefix
Expand Down Expand Up @@ -48,15 +47,12 @@ function createPluginIconsRule() {
packageNames[svgPath] = packageName;
return isTerriaJsPlugin;
},
loader: require.resolve("svg-sprite-loader"),
loader: require.resolve("terriajs/buildprocess/svgs/svg-sprite-loader.js"),
options: {
esModule: false,
symbolId: (svgPath) => {
namespace: (svgPath) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This namespace function is currently returning a new name for each icon in the plugin. It should instead just return the package name, something like: namespace: (svgPath) => packageNames[svgPath] || "terriajs-plugin"

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this. It was definitely not intended

// Generate a symbolId by concatenating the package name and the icon name
const packageName = packageNames[svgPath] || "terriajs-plugin-";
const iconName = path.basename(svgPath, ".svg");
const symbolId = `${packageName}-${iconName}`;
return symbolId;
const packageName = packageNames[svgPath] || "terriajs-plugin";
return packageName;
}
}
};
Expand Down
10 changes: 9 additions & 1 deletion buildprocess/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ const configureWebpackForTerriaJS = require("terriajs/buildprocess/configureWebp
const configureWebpackForPlugins = require("./configureWebpackForPlugins");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");

/**
* Webpack config for building terriamap
*/
module.exports = function (devMode) {
module.exports = function ({ devMode, baseHref = "/" }) {
// Base configuration
const config = {
mode: devMode ? "development" : "production",
Expand Down Expand Up @@ -133,6 +134,13 @@ module.exports = function (devMode) {
new MiniCssExtractPlugin({
filename: "TerriaMap.css",
ignoreOrder: true
}),
new HtmlPlugin({
filename: path.resolve(__dirname, "..", "wwwroot", "index.html"),
template: path.resolve(__dirname, "..", "wwwroot", "index.ejs"),
templateParameters: {
baseHref: baseHref
}
})
],
resolve: {
Expand Down
75 changes: 40 additions & 35 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,17 @@ var watchOptions = {
interval: 1000
};

const getBaseHref = () => {
var minimist = require("minimist");
// Arguments written in skewer-case can cause problems (unsure why), so stick to camelCase
var options = minimist(process.argv.slice(2), {
string: ["baseHref"],
default: { baseHref: "/" }
});

return options.baseHref;
};

gulp.task("check-terriajs-dependencies", function (done) {
var appPackageJson = require("./package.json");
var terriaPackageJson = require("terriajs/package.json");
Expand Down Expand Up @@ -70,33 +81,19 @@ gulp.task("write-version", function (done) {
done();
});

gulp.task("render-index", function renderIndex(done) {
var ejs = require("ejs");
var minimist = require("minimist");
// Arguments written in skewer-case can cause problems (unsure why), so stick to camelCase
var options = minimist(process.argv.slice(2), {
string: ["baseHref"],
default: { baseHref: "/" }
});

var index = fs.readFileSync("wwwroot/index.ejs", "utf8");
var indexResult = ejs.render(index, { baseHref: options.baseHref });

fs.writeFileSync(path.join("wwwroot", "index.html"), indexResult);
done();
});

gulp.task(
"build-app",
gulp.parallel(
"render-index",
gulp.series(
"check-terriajs-dependencies",
"write-version",
function buildApp(done) {
var runWebpack = require("terriajs/buildprocess/runWebpack.js");
var webpack = require("webpack");
var webpackConfig = require("./buildprocess/webpack.config.js")(true);
var webpackConfig = require("./buildprocess/webpack.config.js")({
devMode: true,
baseHref: getBaseHref()
});

checkForDuplicateCesium();

Expand All @@ -109,14 +106,16 @@ gulp.task(
gulp.task(
"release-app",
gulp.parallel(
"render-index",
gulp.series(
"check-terriajs-dependencies",
"write-version",
function releaseApp(done) {
var runWebpack = require("terriajs/buildprocess/runWebpack.js");
var webpack = require("webpack");
var webpackConfig = require("./buildprocess/webpack.config.js")(false);
var webpackConfig = require("./buildprocess/webpack.config.js")({
devMode: false,
baseHref: getBaseHref()
});

checkForDuplicateCesium();

Expand All @@ -132,25 +131,17 @@ gulp.task(
)
);

gulp.task(
"watch-render-index",
gulp.series("render-index", function watchRenderIndex() {
gulp.watch(["wwwroot/index.ejs"], gulp.series("render-index"));
})
);

gulp.task(
"watch-app",
gulp.parallel(
"watch-render-index",
gulp.series("check-terriajs-dependencies", function watchApp(done) {
var fs = require("fs");
var watchWebpack = require("terriajs/buildprocess/watchWebpack");
var webpack = require("webpack");
var webpackConfig = require("./buildprocess/webpack.config.js")(
true,
false
);
var webpackConfig = require("./buildprocess/webpack.config.js")({
devMode: true,
baseHref: getBaseHref()
});

checkForDuplicateCesium();

Expand Down Expand Up @@ -290,10 +281,24 @@ gulp.task("terriajs-server", terriajsServerGulpTask(3001));
gulp.task("build", gulp.series("copy-terriajs-assets", "build-app"));
gulp.task("release", gulp.series("copy-terriajs-assets", "release-app"));
gulp.task("watch", gulp.parallel("watch-terriajs-assets", "watch-app"));
// Run render-index before starting terriajs-server because terriajs-server won't
// start if index.html isn't present
// Simple task that waits for index.html then starts server
gulp.task(
"dev",
gulp.parallel(gulp.series("render-index", "terriajs-server"), "watch")
gulp.parallel("watch", function startServerWhenReady(done) {
const indexFile = path.join(__dirname, "wwwroot", "index.html");

if (fs.existsSync(indexFile)) {
terriajsServerGulpTask(3001)(done);
return;
}
var watcher = gulp.watch(
path.join(__dirname, "wwwroot", "index.html"),
watchOptions
);
watcher.on("add", function () {
watcher.close();
terriajsServerGulpTask(3001)(done);
});
})
);
gulp.task("default", gulp.series("lint", "build"));
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@
"@typescript-eslint/parser": "^8.24.0",
"babel-loader": "^9.2.1",
"css-loader": "^7.1.2",
"ejs": "^3.1.10",
"eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react": "^7.37.4",
Expand All @@ -59,6 +58,7 @@
"fork-ts-checker-webpack-plugin": "^9.0.2",
"fs-extra": "^7.0.1",
"gulp": "^5.0.0",
"html-webpack-plugin": "^5.6.3",
"husky": "^8.0.3",
"is-subdir": "^1.2.0",
"json5": "^2.1.0",
Expand All @@ -75,7 +75,7 @@
"sass": "^1.81.0",
"sass-loader": "^16.0.3",
"style-loader": "^4.0.0",
"svg-sprite-loader": "^6.0.11",
"svg-sprite": "^2.0.4",
"terriajs": "8.10.0",
"terriajs-cesium": "8.0.2",
"terriajs-plugin-api": "0.0.1-alpha.17",
Expand Down
127 changes: 95 additions & 32 deletions wwwroot/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,104 @@
<!DOCTYPE html>
<html lang="en" class="terria">
<head>
<base href="<%= baseHref %>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="A web map built on Terria Map">
<meta name="apple-mobile-web-app-capable" content="yes">
<head>
<base href="<%= baseHref %>" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<!-- Use Chrome Frame in IE -->
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="A web map built on Terria Map" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#282D32">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#282D32">
<link
rel="apple-touch-icon"
sizes="57x57"
href="favicons/apple-icon-57x57.png"
/>
Comment on lines +15 to +19
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are these formatting changes from prettier?

Copy link
Collaborator Author

@zoran995 zoran995 Sep 15, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I don't think this file was prettified before

<link
rel="apple-touch-icon"
sizes="60x60"
href="favicons/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="favicons/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="favicons/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="favicons/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="favicons/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="favicons/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="favicons/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="favicons/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="favicons/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="favicons/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="favicons/favicon-16x16.png"
/>
<link rel="manifest" href="favicons/manifest.json" />
<meta name="msapplication-TileColor" content="#282D32" />
<meta
name="msapplication-TileImage"
content="favicons/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#282D32" />

<title>Terria Map</title>
<link rel="stylesheet" type="text/css" href="build/TerriaMap.css">

<!-- Leaflet -->
<script>L_PREFER_CANVAS = true;</script>
</head>
<script>
L_PREFER_CANVAS = true;
</script>
</head>

<body>

<div id='ui'></div>
<script src="build/TerriaMap.js"></script>
</body>
<body>
<div id="svg-sprites" style="display: none"></div>
<div id="ui"></div>
</body>
</html>
Loading
Loading