Vue Map Library

Developin the Library

Initial Setup

Install latest version of Node JS. This includes NPM.

The following command line was run: npm create vue@latest vue-map-library.

This command line presents the developer with options to install various plugins like TypeScript, testing, linting and prettier. Use spacebar or arrow keys in the commandline wizard to toggle Yes and No options. The application makes use of Vite for testing and configuration.

Compile and Hot-Reload for Development

Run npm run dev.

Type-Check, Compile and Minify for Production

Run npm run build to compile for distribution.

Run Unit Tests with Vitest

Run npm run test:unit to run tests.

Lint with ESLint

Run npm run lint to show any compiler and syntax errors.

Hashed URLs

Default behaviour is to not use hashed URLs in the Router definition. Main disadvantage is that links to new 'pages' go to the server and back again, essentially reloading the app.

This app has since been mofified to use createWebHashHistory instead of default createWebHistory in the Router definition page.

As a result, the URL for a page becomes http://localhost:5173/#/page instead of http://localhost:5173/page and the URL for home becomes http://localhost:5173/#/ instead of http://localhost:5173/.

Peer Dependencies

Make sure any dependencies are placed into the peer dependencies section so that the consuming application doesn't automatically install them as dependencies.

Linking the Library

Linking by file

Enter "rrwvuemap": "file:../VueMapLibrary" instead of "rrwvuemap: "?.?.?" in the dependencies section of the package.json file to load the package with reference to a file. Run npm install afterwards to update it.

Linking by NPM Link

Enter npm link in the terminal of this library.

Enter npm link rrwvuemap in the terminal of the consuming NodeJS project.

To unlink: type npm unlink rrwvuemap in the terminal of the consuming NodeJS project.

Publishing to NPM

The first time:

Register with npm in https://www.npmjs.com/. Then follow https://registry.npmjs.org/ to register PC against your new profile.

Username: richardrobinwebster Password: R!chardWebster01

You need to authorize this machine using npm adduser.

Find your NPM package in https://www.npmjs.com/package/rrwvuemap; alternatively search for it in https://www.npmjs.com.

Then login on https://registry.npmjs.org/ to be able to update the package online.

On the command line, in the package root directory, run the following commands:

First run npm version patch to increment the version, then run npm publish to publish it. Your browser will need to be logged in to https://registry.npmjs.org/ in order to do this. It will prompt you to do so if you are not logged in. It authorises your PC against the profile.

Don't forget to commit GIT after doing this to commit the newly published verion.

Developing the Consumer Application

Run npm install rrwvuemap for a final version or link the methods mentioned above for debugging.

Make sure Vue 3 is installed.

import { MapComponent } from "rrwvuemap";

<MapComponent />

Release Notes

Version 1.0.4

• MapComponent is the only exported component at the moment.
• It has a single map layer: Open Street Map.
• It has a single projection, default projection Web Mercator, EPSG 3857.
• Input properties for MapComponent are:
  • Longitude and latitude for initial center point. This will facilitate geolocation by the consuming application.
  • Height, in pixels or calculated pixels (calc() method in stylesheets).
  • Initial zoom level.
  • Scalebar control, not confugurable.
  • Incorporation of stylesheets from Open Layers (ol.css).
  • Added new event: map-extent-changed.
  • Added new event: map-cursor-move.

Version 1.0.5

• Renamed MapComponent to MapControl.
• Added StatusbarControl control.
• Added IntegratedControl that replaces MapControl as the exported control.
• Modified emitted events to be:
  • view-changed
  • map-cursor-move
  • map-loaded
• Added many props to the IntegratedControl regarding the status bar.

Version 1.0.6

• Changed many props into one big structure.
• Exporting types and components in export.ts file.
• Cache layers in a singleton service for re-use by map when it is re-created.
• Added first hardcoded feature layer.
• Re-introduced map width property.
• Re-distributed code into services.
• Removed IntegratedControl; all controls inside map.
• Added buttonbar, ButtonbarControl, and geolocation button.
• Removed emitted events due to redundancy.
• Added functionality to label vectors and declutter labels.
• Added functionality to load polygons, polylines and point vector layers.

Version 1.0.14

• Attrbutions and legends. Legend graphics dynamic for layers with feature style functions.
• Labels unique to a map.
• Layers and map have auto unique IDs.
• Added min and max resolution for layers.