Skip to content

Commit 0d41c94

Browse files
ahocevarahocevar
authored
Merge pull request #14 from w3geo/example
Add example, use @mdi/js for icons
2 parents 35df4eb + 1d52440 commit 0d41c94

File tree

11 files changed

+266
-98
lines changed

11 files changed

+266
-98
lines changed

‎README.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@ With this, the map view will automatically be centered on the result geometry, a
4646

4747
## Developing
4848

49-
To develop this plugin, it is recommended to set up a test app according to the instructions below, and use [npm link](https://docs.npmjs.com/cli/v10/commands/npm-link). When that is setup properly, use
49+
To develop this plugin, an example has been set up in `example/`. To run the example with dynamically built plugin, run
5050

51-
npm run watch
52-
53-
to automatically update the linked package in the test application.
51+
npm run dev:example

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export default [
3535
rules: {
3636
'no-unused-vars': 'off',
3737
'import/no-dynamic-require': 'warn',
38+
'import/no-unresolved': 'off',
3839
},
3940
},
4041
];

‎example/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="color-scheme" content="light dark">
7+
<title>Vue Place Search</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="./src/main.js"></script>
12+
</body>
13+
</html>

‎example/src/App.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<v-container class="d-flex justify-center align-center">
3+
<v-card>
4+
<v-card-title>OpenLayers Map</v-card-title>
5+
<v-toolbar class="pr-1" density="compact">
6+
<v-spacer /><place-search
7+
/></v-toolbar>
8+
<v-sheet class="fill-height">
9+
<div ref="mapContainer" class="map"></div>
10+
</v-sheet>
11+
</v-card>
12+
</v-container>
13+
</template>
14+
15+
<script setup>
16+
import 'ol/ol.css';
17+
import '../../dist/style.css';
18+
import Map from 'ol/Map';
19+
import View from 'ol/View';
20+
import TileLayer from 'ol/layer/Tile';
21+
import OSM from 'ol/source/OSM';
22+
import { onMounted, ref } from 'vue';
23+
import { PlaceSearch, usePlaceSearch } from '../../dist/vue-place-search.js';
24+
25+
const mapContainer = ref(null);
26+
27+
const map = new Map({
28+
layers: [
29+
new TileLayer({
30+
source: new OSM(),
31+
}),
32+
],
33+
view: new View({
34+
center: [0, 0],
35+
zoom: 2,
36+
}),
37+
});
38+
39+
usePlaceSearch(map);
40+
41+
onMounted(() => {
42+
map.setTarget(mapContainer.value);
43+
});
44+
</script>
45+
46+
<style>
47+
.map {
48+
width: 600px;
49+
height: 400px;
50+
}
51+
</style>

‎example/src/main.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import 'vuetify/styles';
2+
import { createVuetify } from 'vuetify';
3+
import App from './App.vue';
4+
import { createApp } from 'vue';
5+
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
6+
7+
const vuetify = createVuetify({
8+
icons: {
9+
defaultSet: 'mdi',
10+
aliases,
11+
sets: {
12+
mdi,
13+
},
14+
},
15+
});
16+
17+
const app = createApp(App);
18+
app.use(vuetify);
19+
20+
app.mount('#app');

‎example/src/plugins/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import vuetify from './vuetify';
2+
3+
export function registerPlugins(app) {
4+
app.use(vuetify);
5+
}

‎example/src/plugins/vuetify.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* plugins/vuetify.js
3+
*
4+
* Framework documentation: https://vuetifyjs.com`
5+
*/
6+
7+
// Styles
8+
import 'vuetify/styles';
9+
10+
// Composables
11+
import { createVuetify } from 'vuetify';
12+
13+
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
14+
export default createVuetify({
15+
theme: {
16+
defaultTheme: 'dark',
17+
},
18+
});

‎example/vite.config.mjs‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Vue from '@vitejs/plugin-vue';
2+
import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
3+
4+
// Utilities
5+
import { defineConfig } from 'vite';
6+
import { fileURLToPath, URL } from 'node:url';
7+
import { join, resolve } from 'node:path';
8+
9+
const root = fileURLToPath(new URL('.', import.meta.url));
10+
11+
// https://vitejs.dev/config/
12+
export default defineConfig({
13+
root,
14+
plugins: [
15+
Vue({
16+
template: { transformAssetUrls },
17+
}),
18+
Vuetify(),
19+
],
20+
define: { 'process.env': {} },
21+
resolve: {
22+
extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
23+
},
24+
server: {
25+
port: 3000,
26+
},
27+
css: {
28+
preprocessorOptions: {
29+
sass: {
30+
api: 'modern-compiler',
31+
},
32+
},
33+
},
34+
});

‎package-lock.json‎

Lines changed: 50 additions & 29 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"preview": "vite preview",
3636
"prepublishOnly": "npm run build",
3737
"watch": "nodemon --watch src -e js,json,mjs,vue --exec 'npm run build'",
38+
"dev:example": "npm run watch & vite -c example/vite.config.mjs",
3839
"test": "npm run lint && npm run typecheck",
3940
"lint": "eslint .",
4041
"typecheck": "vue-tsc --noEmit"
@@ -58,6 +59,7 @@
5859
"vue-tsc": "^2.0.21"
5960
},
6061
"peerDependencies": {
62+
"@mdi/js": "^7.4.47",
6163
"@types/geojson": "^7946.0.14",
6264
"ol": "*",
6365
"vue": "^3.0.0",

0 commit comments

Comments
 (0)