log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: script is not imported correctly

Browse Source
This commit is contained in:
log101 2024-01-17 09:15:15 +03:00
parent 997d4d4967
commit cdcf08898f
2 changed files with 95 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/index.astro
View File

@ -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:
'&copy; <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
View 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:
'&copy; <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);