fix: script is not imported correctly
This commit is contained in:
parent
997d4d4967
commit
cdcf08898f
|
@ -37,113 +37,5 @@ import LocationButton from '@/components/LockedContent';
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<Button className="w-full">Paylaş</Button>
|
<Button className="w-full">Paylaş</Button>
|
||||||
|
<script src="../scripts/initMap.js"></script>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<script>
|
|
||||||
// TODO: Move script to a seperate file
|
|
||||||
import L from 'leaflet';
|
|
||||||
import type { LatLngTuple, Marker, LocationEvent, ErrorEvent } from 'leaflet';
|
|
||||||
|
|
||||||
const TARGET_LOCATION: LatLngTuple = [41.01907795861253, 29.01715377829709];
|
|
||||||
|
|
||||||
var map = L.map('map').setView(TARGET_LOCATION, 13);
|
|
||||||
|
|
||||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
||||||
maxZoom: 19,
|
|
||||||
attribution:
|
|
||||||
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
|
||||||
}).addTo(map);
|
|
||||||
|
|
||||||
var targetLocationIcon = L.icon({
|
|
||||||
iconUrl: 'goal.svg',
|
|
||||||
iconSize: [32, 32],
|
|
||||||
});
|
|
||||||
|
|
||||||
L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
|
|
||||||
|
|
||||||
var currentLocationIcon = L.icon({
|
|
||||||
iconUrl: 'blue-dot.png',
|
|
||||||
iconSize: [32, 32],
|
|
||||||
});
|
|
||||||
|
|
||||||
let currentLocationMarker: Marker;
|
|
||||||
|
|
||||||
function onLocationFound(e: LocationEvent) {
|
|
||||||
var radius = e.accuracy;
|
|
||||||
|
|
||||||
if (currentLocationMarker) {
|
|
||||||
currentLocationMarker.setLatLng(e.latlng);
|
|
||||||
} else {
|
|
||||||
currentLocationMarker = L.marker(e.latlng, { icon: currentLocationIcon });
|
|
||||||
currentLocationMarker.addTo(map);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
map.on('locationfound', onLocationFound);
|
|
||||||
|
|
||||||
function onLocationError(e: ErrorEvent) {
|
|
||||||
alert(e.message);
|
|
||||||
}
|
|
||||||
|
|
||||||
map.on('locationerror', onLocationError);
|
|
||||||
|
|
||||||
// @ts-expect-error extend object
|
|
||||||
L.Control.GoToCurrentLocation = L.Control.extend({
|
|
||||||
onAdd: function (map: L.Map) {
|
|
||||||
const locationButton = document.createElement('button');
|
|
||||||
|
|
||||||
locationButton.textContent = 'Konumuma Git';
|
|
||||||
|
|
||||||
locationButton.classList.add('custom-map-control-button');
|
|
||||||
|
|
||||||
locationButton.addEventListener('click', () => {
|
|
||||||
map.locate({ setView: true, maxZoom: 16 });
|
|
||||||
});
|
|
||||||
|
|
||||||
return locationButton;
|
|
||||||
},
|
|
||||||
|
|
||||||
onRemove: function (map: L.Map) {
|
|
||||||
// Nothing to do here
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// @ts-expect-error extend object
|
|
||||||
L.Control.GoToTargetLocation = L.Control.extend({
|
|
||||||
onAdd: function (map: L.Map) {
|
|
||||||
const locationButton = document.createElement('button');
|
|
||||||
|
|
||||||
locationButton.textContent = 'Hedefe Git';
|
|
||||||
|
|
||||||
locationButton.classList.add('custom-map-control-button');
|
|
||||||
|
|
||||||
locationButton.addEventListener('click', () => {
|
|
||||||
map.setView(TARGET_LOCATION, 16);
|
|
||||||
});
|
|
||||||
|
|
||||||
return locationButton;
|
|
||||||
},
|
|
||||||
|
|
||||||
onRemove: function (map: L.Map) {
|
|
||||||
// Nothing to do here
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// @ts-expect-error extend object
|
|
||||||
L.control.currentLocation = function (opts) {
|
|
||||||
// @ts-expect-error extend object
|
|
||||||
return new L.Control.GoToCurrentLocation(opts);
|
|
||||||
};
|
|
||||||
|
|
||||||
// @ts-expect-error extend object
|
|
||||||
L.control.targetLocation = function (opts) {
|
|
||||||
// @ts-expect-error extend object
|
|
||||||
return new L.Control.GoToTargetLocation(opts);
|
|
||||||
};
|
|
||||||
|
|
||||||
// @ts-expect-error extend object
|
|
||||||
L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
|
|
||||||
|
|
||||||
// @ts-expect-error extend object
|
|
||||||
L.control.targetLocation({ position: 'bottomleft' }).addTo(map);
|
|
||||||
</script>
|
|
||||||
|
|
94
src/scripts/initMap.js
Normal file
94
src/scripts/initMap.js
Normal file
|
@ -0,0 +1,94 @@
|
||||||
|
const TARGET_LOCATION = [41.01907795861253, 29.01715377829709];
|
||||||
|
|
||||||
|
var map = L.map('map').setView(TARGET_LOCATION, 13);
|
||||||
|
|
||||||
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
maxZoom: 19,
|
||||||
|
attribution:
|
||||||
|
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
var targetLocationIcon = L.icon({
|
||||||
|
iconUrl: 'goal.svg',
|
||||||
|
iconSize: [32, 32],
|
||||||
|
});
|
||||||
|
|
||||||
|
L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
|
||||||
|
|
||||||
|
var currentLocationIcon = L.icon({
|
||||||
|
iconUrl: 'blue-dot.png',
|
||||||
|
iconSize: [32, 32],
|
||||||
|
});
|
||||||
|
|
||||||
|
let currentLocationMarker;
|
||||||
|
|
||||||
|
function onLocationFound(e) {
|
||||||
|
var radius = e.accuracy;
|
||||||
|
|
||||||
|
if (currentLocationMarker) {
|
||||||
|
currentLocationMarker.setLatLng(e.latlng);
|
||||||
|
} else {
|
||||||
|
currentLocationMarker = L.marker(e.latlng, { icon: currentLocationIcon });
|
||||||
|
currentLocationMarker.addTo(map);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
map.on('locationfound', onLocationFound);
|
||||||
|
|
||||||
|
function onLocationError(e) {
|
||||||
|
alert(e.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
map.on('locationerror', onLocationError);
|
||||||
|
|
||||||
|
L.Control.GoToCurrentLocation = L.Control.extend({
|
||||||
|
onAdd: function (map) {
|
||||||
|
const locationButton = document.createElement('button');
|
||||||
|
|
||||||
|
locationButton.textContent = 'Konumuma Git';
|
||||||
|
|
||||||
|
locationButton.classList.add('custom-map-control-button');
|
||||||
|
|
||||||
|
locationButton.addEventListener('click', () => {
|
||||||
|
map.locate({ setView: true, maxZoom: 16 });
|
||||||
|
});
|
||||||
|
|
||||||
|
return locationButton;
|
||||||
|
},
|
||||||
|
|
||||||
|
onRemove: function (map) {
|
||||||
|
// Nothing to do here
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
L.Control.GoToTargetLocation = L.Control.extend({
|
||||||
|
onAdd: function (map) {
|
||||||
|
const locationButton = document.createElement('button');
|
||||||
|
|
||||||
|
locationButton.textContent = 'Hedefe Git';
|
||||||
|
|
||||||
|
locationButton.classList.add('custom-map-control-button');
|
||||||
|
|
||||||
|
locationButton.addEventListener('click', () => {
|
||||||
|
map.setView(TARGET_LOCATION, 13);
|
||||||
|
});
|
||||||
|
|
||||||
|
return locationButton;
|
||||||
|
},
|
||||||
|
|
||||||
|
onRemove: function (map) {
|
||||||
|
// Nothing to do here
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
L.control.currentLocation = function (opts) {
|
||||||
|
return new L.Control.GoToCurrentLocation(opts);
|
||||||
|
};
|
||||||
|
|
||||||
|
L.control.targetLocation = function (opts) {
|
||||||
|
return new L.Control.GoToTargetLocation(opts);
|
||||||
|
};
|
||||||
|
|
||||||
|
L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
|
||||||
|
|
||||||
|
L.control.targetLocation({ position: 'bottomleft' }).addTo(map);
|
Loading…
Reference in New Issue
Block a user