Skip to content
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

break: rename this thing! #184

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

break: rename this thing! #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ A library of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_C

***Web map***

`<my-map />` is an [OpenLayers](https://openlayers.org/)-powered map to support drawing and modifying red-line boundaries. Other supported modes include: highlighting an OS Feature that intersects with a given address point; clicking to select and merge multiple OS Features into a single boundary; and displaying static point or polygon data. Events are dispatched with the calculated area and geojson representation when you change your drawing.
`<web-map />` is an [OpenLayers](https://openlayers.org/)-powered map to support drawing and modifying red-line boundaries. Other supported modes include: highlighting an OS Feature that intersects with a given address point; clicking to select and merge multiple OS Features into a single boundary; and displaying static point or polygon data. Events are dispatched with the calculated area and geojson representation as data changes.

![chrome-capture-2022-7-16-map](https://user-images.githubusercontent.com/5132349/184860750-bf7514db-7cab-4f9c-aa32-791099ecd6cc.gif)

Expand Down
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OS Web Components Sandbox</title>
<title>OSL Web Components Sandbox</title>
<script type="module" src="./src/index.ts"></script>
<!-- OS vector tile source specifies fonts in .pbf format, which OpenLayers can't load, so make them available directly -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
Expand Down Expand Up @@ -43,7 +43,7 @@
<div style="display:flex;flex-direction:column;">
<h1 style="color:red;font-family:Inter,Helvetica,sans-serif;font-size:16px;">*** This is a testing sandbox - these components are unaware of each other! ***</h1>
<div style="margin-bottom:1em">
<my-map zoom="20" maxZoom="23" drawMode drawPointer="dot" id="example-map" />
<web-map zoom="20" maxZoom="23" drawMode drawPointer="dot" id="example-map" />
</div>
<div style="margin-bottom:1em">
<postcode-search hintText="Optional hint text shows up here" id="example-postcode" />
Expand All @@ -64,7 +64,7 @@ <h1 style="color:red;font-family:Inter,Helvetica,sans-serif;font-size:16px;">***
</div>
<script>
// --- MAP --- //
const map = document.querySelector("my-map");
const map = document.querySelector("web-map");

map.addEventListener("ready", (event) => {
console.log("map ready");
Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
"type": "git",
"url": "https://github.com/theopensystemslab/map.git"
},
"browser": "./dist/component-lib.umd.js",
"module": "./dist/component-lib.es.js",
"exports": "./dist/component-lib.es.js",
"browser": "./dist/place-components.umd.js",
"module": "./dist/place-components.es.js",
"exports": "./dist/place-components.es.js",
"types": "./dist/types/index.d.ts",
"files": [
"dist",
"types"
],
"scripts": {
"dev": "vite",
"build": "rm -rf dist types && tsc && vite build && sed 's/src=\".*\"/src=\"component-lib.es.js\"/' index.html > dist/index.html",
"build": "rm -rf dist types && tsc && vite build && sed 's/src=\".*\"/src=\"place-components.es.js\"/' index.html > dist/index.html",
"prepublishOnly": "npm run build",
"prepare": "husky install",
"test": "vitest",
Expand Down
2 changes: 1 addition & 1 deletion pitsby.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = {
},
],
styles: ["./dist/style.css"],
scripts: ["./dist/component-lib.es.js", "./dist/component-lib.umd.js"],
scripts: ["./dist/place-components.es.js", "./dist/place-components.umd.js"],
custom: {
windowTitle: 'Docs - Place Components',
},
Expand Down
12 changes: 6 additions & 6 deletions ...omponents/my-map/docs/my-map-basic.doc.js → ...mponents/web-map/docs/my-map-basic.doc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module.exports = {
name: "MyMap - Basic",
name: "WebMap - Basic",
description:
"MyMap is an OpenLayers-powered Lit web component map for tasks related to planning permission in the UK. These examples cover the foundational properties used to render and style the map.",
"WebMap is an OpenLayers-powered Lit web component map for tasks related to planning permission in the UK. These examples cover the foundational properties used to render and style the map.",
properties: [
{
name: "latitude",
Expand Down Expand Up @@ -82,20 +82,20 @@ module.exports = {
title: "Basemap: Ordnance Survey vector tiles",
description:
"Requires access to the Ordnance Survey Vector Tiles API, fallsback to OpenStreetMap basemap if no key is provided.",
template: `<my-map zoom="18" osVectorTilesApiKey="" />`,
template: `<web-map zoom="18" osVectorTilesApiKey="" />`,
},
{
title: "Basemap: Ordnance Survey raster tiles",
description:
"Requires access to the Ordnance Survey Maps API, fallsback to OpenStreetMap basemap if no key provided.",
template: `<my-map zoom="18" osVectorTilesApiKey="" disableVectorTiles />`,
template: `<web-map zoom="18" osVectorTilesApiKey="" disableVectorTiles />`,
},
{
title: "Display a static map",
description:
"Disable zooming, panning, and other map interactions. Hide the reset control button.",
template: `
<my-map
<web-map
zoom="20"
staticMode
hideResetControl
Expand All @@ -106,7 +106,7 @@ module.exports = {
description:
'Display a scale bar on the map for orientation, choose between the default or "bar" styles offered by OpenLayers',
template: `
<my-map
<web-map
zoom="20"
showScale
useScaleBarStyle
Expand Down
16 changes: 8 additions & 8 deletions ...components/my-map/docs/my-map-draw.doc.js → ...omponents/web-map/docs/my-map-draw.doc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
name: "MyMap - Drawing",
name: "WebMap - Drawing",
description:
"Drawing mode enables drawing and modifying a shape on the map. Snapping points display for guidance at zoom level 20+ when the vector tile basemap is enabled. One polygon can be drawn at a time. The reset control button will erase your drawing and re-center the map view.",
properties: [
Expand Down Expand Up @@ -45,7 +45,7 @@ module.exports = {
description:
"Draw and modify a site plan boundary with a red line. Start at zoom 20 so snaps are visible on initial load.",
template: `
<my-map
<web-map
id="draw-mode"
zoom="20"
maxZoom="23"
Expand All @@ -58,7 +58,7 @@ module.exports = {
description:
"Load a polygon with the ability to continue modifying it. Click 'reset' to erase and draw fresh.",
controller: function (element) {
const map = element.querySelector("my-map");
const map = element.querySelector("web-map");
map.drawGeojsonData = {
type: "Feature",
properties: {},
Expand All @@ -77,7 +77,7 @@ module.exports = {
};
},
template: `
<my-map
<web-map
id="draw-mode-1"
zoom="20"
maxZoom="23"
Expand All @@ -90,13 +90,13 @@ module.exports = {
description:
"Listen for an event when the drawn polygon is closed or modified. Specify if you want to calculate area in square metres or hectares.",
controller: function (element) {
const map = element.querySelector("my-map");
const map = element.querySelector("web-map");
map.addEventListener("areaChange", ({ detail: area }) => {
console.debug({ area });
});
},
template: `
<my-map
<web-map
id="draw-mode-2"
zoom="19"
maxZoom="23"
Expand All @@ -109,13 +109,13 @@ module.exports = {
description:
"Listen for an event when the drawn polygon is closed or modified.",
controller: function (element) {
const map = element.querySelector("my-map");
const map = element.querySelector("web-map");
map.addEventListener("geojsonChange", ({ detail: geojson }) => {
console.debug({ geojson });
});
},
template: `
<my-map
<web-map
id="draw-mode-3"
zoom="19"
maxZoom="23"
Expand Down
6 changes: 3 additions & 3 deletions ...onents/my-map/docs/my-map-features.doc.js → ...nents/web-map/docs/my-map-features.doc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
name: "MyMap - Features",
name: "WebMap - Features",
description:
"Features mode queries the Ordnance Survey Features API for any features that intersect the center point of the map. Should be used with the vector tiles basemap.",
properties: [
Expand Down Expand Up @@ -45,7 +45,7 @@ module.exports = {
description:
"Show the Ordnance Survey Feature(s) that intersects with a given point.",
template: `
<my-map
<web-map
showFeaturesAtPoint
latitude="51.4858363"
longitude="-0.0761246"
Expand All @@ -58,7 +58,7 @@ module.exports = {
description:
"Show features at point plus ability to click to select or deselect additional features to create a more accurate full site boundary.",
template: `
<my-map
<web-map
showFeaturesAtPoint
clickFeatures
latitude="51.4854329"
Expand Down
6 changes: 3 additions & 3 deletions ...ponents/my-map/docs/my-map-geojson.doc.js → ...onents/web-map/docs/my-map-geojson.doc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
name: "MyMap - GeoJSON",
name: "WebMap - GeoJSON",
description:
"GeoJSON mode displays a static polygon on the map. The map view will center on the shape, overriding the latitude, longitude, and zoom properties. Use the geojsonBuffer property to control the padding between the shape and edge of the map view.",
properties: [
Expand Down Expand Up @@ -36,7 +36,7 @@ module.exports = {
description:
"Show a custom GeoJSON polygon on an OS basemap. Hide the zoom & reset control buttons.",
controller: function (element) {
const map = element.querySelector("my-map");
const map = element.querySelector("web-map");
map.geojsonData = {
type: "Feature",
properties: {},
Expand All @@ -57,7 +57,7 @@ module.exports = {
};
},
template: `
<my-map
<web-map
geojsonColor="#ff0000"
geojsonBuffer="10"
hideResetControl
Expand Down
0 src/components/my-map/drawing.ts → src/components/web-map/drawing.ts
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions src/components/my-map/index.ts → src/components/web-map/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ import pinUrl from "./pin.svg";

type MarkerImageEnum = "circle" | "pin";

@customElement("my-map")
export class MyMap extends LitElement {
@customElement("web-map")
export class WebMap extends LitElement {
// ref https://github.com/e111077/vite-lit-element-ts-sass/issues/3
static styles = unsafeCSS(styles);

Expand Down Expand Up @@ -521,6 +521,6 @@ export class MyMap extends LitElement {

declare global {
interface HTMLElementTagNameMap {
"my-map": MyMap;
"web-map": WebMap;
}
}
6 changes: 3 additions & 3 deletions src/components/my-map/main.test.ts → src/components/web-map/main.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ declare global {
interface Window extends IWindow {}
}

describe.todo("MyMap on initial render with OSM basemap", async () => {
describe.todo("WebMap on initial render with OSM basemap", async () => {
// https://stackoverflow.com/questions/61683583/openlayers-6-typeerror-url-createobjecturl-is-not-a-function
global.URL.createObjectURL = vi.fn();

beforeEach(async () => {
document.body.innerHTML = '<my-map id="map-vitest" disableVectorTiles />';
document.body.innerHTML = '<web-map id="map-vitest" disableVectorTiles />';

await window.happyDOM.whenAsyncComplete();
}, 1000);
Expand All @@ -24,7 +24,7 @@ describe.todo("MyMap on initial render with OSM basemap", async () => {
});

it("should be keyboard navigable", () => {
const input = getShadowRootEl("my-map", "div");
const input = getShadowRootEl("web-map", "div");
expect(input?.getAttribute("tabindex")).toEqual("0");
});
});
0 src/components/my-map/os-features.ts → src/components/web-map/os-features.ts
View file
Open in desktop
File renamed without changes.
0 src/components/my-map/os-layers.ts → src/components/web-map/os-layers.ts
View file
Open in desktop
File renamed without changes.
0 src/components/my-map/pin.svg → src/components/web-map/pin.svg
View file
Open in desktop
File renamed without changes
0 src/components/my-map/scale-line.ts → src/components/web-map/scale-line.ts
View file
Open in desktop
File renamed without changes.
0 src/components/my-map/snapping.ts → src/components/web-map/snapping.ts
View file
Open in desktop
File renamed without changes.
0 src/components/my-map/styles.scss → src/components/web-map/styles.scss
View file
Open in desktop
File renamed without changes.
0 src/components/my-map/utils.ts → src/components/web-map/utils.ts
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export { MyMap } from "./components/my-map/index";
export { WebMap } from "./components/web-map/index";
export { AddressAutocomplete } from "./components/address-autocomplete/index";
export { PostcodeSearch } from "./components/postcode-search/index";
4 changes: 2 additions & 2 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, "src/index.ts"),
name: "ComponentLib",
name: "PlaceComponents",
formats: ["es", "umd"],
fileName: (format) => `component-lib.${format}.js`,
fileName: (format) => `place-components.${format}.js`,
},
rollupOptions: {
// external: /^lit-element/,
Expand Down