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.
Run npm run dev
.
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.
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/.
Make sure any dependencies are placed into the peer dependencies section so that the consuming application doesn't automatically install them as dependencies.
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.
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.
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.
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 />
-
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
.
- Renamed
MapComponent
toMapControl
. - Added
StatusbarControl
control. - Added
IntegratedControl
that replacesMapControl
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.
- 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.
- 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.