Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd40928b

Browse files
author
Filip Hric
committed
add browser geolocation
1 parent0bac5cc commitd40928b

File tree

7 files changed

+741
-4
lines changed

7 files changed

+741
-4
lines changed

‎cypress/e2e/pricing.spec.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,25 @@ it('shows pricing', () => {
5656
cy.getDataCy('plan-price').should('contain','€')
5757
cy.getDataCy('discount').should('be.visible').and('contain','20%')
5858

59-
});
59+
});
60+
61+
it('shows map',()=>{
62+
63+
cy.visit('/pricing',{
64+
onBeforeLoad(win){
65+
// e.g., force Barcelona geolocation
66+
constlatitude=41.38879;
67+
constlongitude=2.15899;
68+
cy.stub(win.navigator.geolocation,'getCurrentPosition').callsFake((cb)=>{
69+
returncb({coords:{ latitude, longitude}});
70+
});
71+
}
72+
})
73+
74+
cy.getDataCy('find-location')
75+
.click()
76+
77+
cy.get('#map')
78+
.should('be.visible')
79+
80+
})

‎cypress/support/@types/selectors.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export type Selectors =
3434
|'discount'
3535
|'due-date'
3636
|'error-icon'
37+
|'find-location'
3738
|'first-board'
3839
|'footer-link'
3940
|'header-month'

‎package-lock.json‎

Lines changed: 42 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"json-server":"^0.17.0",
4242
"json-server-auth":"^2.1.0",
4343
"jws-jwk":"^0.1.4",
44+
"leaflet":"^1.8.0",
4445
"moment":"^2.29.1",
4546
"nocache":"^3.0.1",
4647
"node-emoji":"^1.11.0",
@@ -67,6 +68,7 @@
6768
},
6869
"devDependencies": {
6970
"@cypress/skip-test":"^2.6.1",
71+
"@types/leaflet":"^1.7.11",
7072
"cypress":"^10.3.0",
7173
"esbuild":"^0.14.7",
7274
"eslint":"^8.5.0",

‎src/components/Pricing.vue‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,22 +52,49 @@
5252
</div>
5353
</div>
5454
<divclass="flex justify-center mt-6">
55-
<buttonclass="py-2 px-8 tracking-wide text-white capitalize bg-green7 hover:bg-green6 rounded-sm focus:outline-none">
56-
Choose Plan
55+
<button
56+
class="py-2 px-8 tracking-wide text-white capitalize bg-green7 hover:bg-green6 rounded-sm focus:outline-none"
57+
data-cy="find-location"
58+
@click="geolocation"
59+
>
60+
Find my location
5761
</button>
5862
</div>
63+
<div
64+
id="map"
65+
ref="map"
66+
class="mx-auto mt-4 max-w-2xl h-64"
67+
/>
5968
</div>
6069
</div>
6170
</template>
6271
<script setup lang="ts">
6372
import {useStore }from'@/store/store';
73+
import {ref }from'vue'
6474
import {storeToRefs }from'pinia';
6575
importemojifrom'node-emoji';
76+
import*asLfrom'leaflet'
6677
importRoundCheckboxfrom'@/assets/icons/roundCheckbox.svg';
6778
const { pricing }=storeToRefs(useStore());
6879
const { getLocation }=useStore();
6980
getLocation();
7081
82+
const geolocation= ()=> {
83+
if (navigator.geolocation) {
84+
navigator.geolocation.getCurrentPosition(drawMap);
85+
}
86+
else {
87+
console.log('not working!!')
88+
}
89+
}
90+
91+
const drawMap= (position:GeolocationPosition)=> {
92+
let map=L.map(ref('map').value);
93+
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
94+
let target=L.latLng(position.coords.latitude,position.coords.longitude);
95+
map.setView(target,14);
96+
}
97+
7198
const plans: { [key:string]:any }= [
7299
{
73100
id:1,
@@ -97,4 +124,4 @@ const plans: { [key: string]: any } = [
97124
},
98125
},
99126
];
100-
</script>
127+
</script>

‎src/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@importurl('leaflet.css');
12
@tailwind base;
23
@tailwind components;
34
@tailwind utilities;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp