i hope you guys can help me fix my issue.
I am building a custom map with leaflet library using GeoJSON data. I have a form to allow users to add new locations but i am having issue adding a new object into the existing array(i hope this makes sense). I am working with 3 files:
- index.html: contains my css, form and map
- location.js: contains my GeoJSON data
- main.js: contains all my js (search google and youtube)
Whenever a user submit the form, data is structure following a constructor in my main.js
Currently when i submit my form, i get a new marker on the map with all the details but it is not added into the array in location.js, if i refresh the page, data is lost. How can i do it so when the form is submited, it adds the object into array in location.js have been stuck on this for 2 days now. I need some help... Kind Regards
Edit
Please see my whole code below... It works as it is but not as i want it to... I do not want to use a server of some sort, it is meant to be lightweight and portable... with geojson, latlng is reversed...i will try to find documentation and link it here.
//below section is on a seperate file
const stationList = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [268.314902, -47.734191]
},
"properties": {
"kind": "Office",
"name": "haos ia",
"officer_in_charge": "Officer in Charge6",
"province": "Shefa",
"aelan": "Efate",
"phone": "4854125"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [108.3143158943781, -11.73814925639549]
},
"properties": {
"kind": "Office",
"name": "Center Point Station",
"officer_in_charge": "Officer in Charge5",
"province": "Shefa",
"aelan": "Efate",
"phone": "4854125"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [268.3140905888201, -19.736953655770762]
},
"properties": {
"kind": "Office",
"name": "bula",
"officer_in_charge": "Officer in Charge4",
"province": "Shefa",
"aelan": "Efate",
"phone": "4854125"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [188.31524421878765, -77.724547142535663]
},
"properties": {
"kind": "Office",
"name": "VMF",
"officer_in_charge": "Officer in Charge3",
"province": "Shefa",
"aelan": "Efate",
"phone": "4854125"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [128.3157, -77.72460]
},
"properties": {
"kind": "Office",
"name": "Test1",
"officer_in_charge": "Officer in Charge1",
"province": "Shefa",
"aelan": "Efate",
"phone": "4854125"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [148.3155, -11.7247]
},
"properties": {
"kind": "Office",
"name": "test 2",
"officer_in_charge": "Officer in Charge2",
"province": "Shefa",
"aelan": "Efate",
"phone": "4854125"
}
},
]
class Station {
constructor(latlng, kind, name, oic, province, aelan, phone) {
this.type = "Feature",
this.geometry = {
type: "Point",
coordinates: latlng
},
this.properties = {
kind: kind,
name: name,
officer_in_charge: oic,
province: province,
aelan: aelan,
phone: phone
}
}
}
//section above is on a seperate file
let map;
let ul = document.querySelector('.station-ul-list');
function DisplayMarker() {
function runForEachFeature(feature, layer) {
layer.bindPopup(customPopup(feature));
}
let stationLayer = L.geoJSON(stationList, {
onEachFeature: runForEachFeature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng)
}
});
stationLayer.addTo(map);
}
function success(position) {
let lat = -77.72460;
let lng = 128.3157;
map = L.map('map', { center: [lat, lng], zoom: 12 });
let layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
layer.addTo(map);
DisplayMarker();
map.on('çlick', function (event) {
//console.log(event);
let { lat, lng } = event.latlng;
document.getElementById('lattitude').value = lat;
document.getElementById('longitude').value = lng;
})
}
function customPopup(station) {
return `<div style = "padding: none; margin: none">
<h4>${station.properties.name}</h4>
<p>${station.properties.province + ' ' + station.properties.aelan}</p>
<p>tel: ${station.properties.phone}</p>
</div>`;
}
function createStation(station, ul) {
let li = document.createElement('li');
let div = document.createElement('div');
div.classList.add('station-item');
let a = document.createElement('a');
let p = document.createElement('p');
let area = station.properties.province + ` ` + station.properties.aelan;
a.innerText = station.properties.name;
a.href = '#';
a.addEventListener('click', () => {
flyToStore(station);
})
let oic = document.createElement('p');
oic.innerText = station.properties.officer_in_charge;
p.innerText = (area);
div.appendChild(a);
div.appendChild(p);
div.appendChild(oic);
li.appendChild(div);
ul.appendChild(li);
}
function generateStations() {
stationList.forEach(function (station) {
createStation(station, ul);
})
}
success();
generateStations();
function flyToStore(station) {
let lat = station.geometry.coordinates[0];
let lng = station.geometry.coordinates[1];
map.flyTo([lng, lat], 18);
}
document.getElementById('submit-btn').addEventListener('click', function () {
let lat = document.getElementById('lattitude').value;
let lng = document.getElementById('longitude').value;
let name = document.getElementById('stationN').value;
let oic = document.getElementById('oic').value;
let kind = document.getElementById('kind').value;
let province = document.getElementById('province').value;
let aelan = document.getElementById('aelan').value;
let phone = document.getElementById('phone').value;
let latlng = [lng, lat];
let station = new Station(latlng, kind, name, oic, province, aelan, phone);
console.log(station);
stationList.push(station);
createStation(station, ul);
DisplayMarker();
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSU MapTool</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
<style>
body {
margin-top: 0;
margin-left: 0;
background-color: rgb(150, 176, 202);
}
input[type=text],
select {
width: 25%;
padding: 5px 10px;
margin: 4px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
align-items: center;
}
input[type=number],
select {
width: 20%;
padding: 5px 10px;
margin: 4px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=tel],
select {
width: 20%;
padding: 5px 10px;
margin: 4px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 20%;
padding: 5px 10px;
margin: 4px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.store-list {
background-color: #f1f1f1;
margin: 1px;
/* padding: 10px; */
width: 30vw;
height: 96vh;
overflow-y: auto;
float: left;
min-width: 600px;
border-bottom: 25px rgb(94, 55, 55);
}
.store-form {
background-color: rgb(158, 183, 197);
padding: 10px;
}
#map {
height: 96vh;
margin-top: 2px;
}
</style>
</head>
<body>
<main>
<div class="store-list">
<div class="header">
<h2 style="text-align: center;">CSU MapTool</h2>
</div>
<div class="add-new-store">
<form class="store-form">
<input type="text" id="kind" placeholder="Station/Post/Office">
<input type="text" id="stationN" placeholder="Name blong station">
<input type="text" id="oic" placeholder="Ofisa in Charge">
<br>
<input type="text" id="province" placeholder="Province">
<input type="text" id="aelan" placeholder="Aelan">
<input type="tel" id="phone" placeholder="tel"><br>
<!-- <input type="number" min="0" id="hrnumba" placeholder="Nmb ofisa">
<input type="number" min="0" id="hrM" placeholder="M. ofisa">
<input type="number" min="0" id="hrF" placeholder="F. ofisa"><br> -->
<input type="text" id="lattitude" placeholder="Lattitude">
<input type="text" id="longitude" placeholder="Longitude"><br>
<button type="button" id="submit-btn">Addem Station</button>
</form>
<hr class="solid" style="border-top: 3px solid #bbb">
</div>
<ul class="station-ul-list">
<!--Append list of stations-->
</ul>
</div>
<div id="map"></div>
</main>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
<script src="./posts.js"></script>
<script src="./script2.js"></script>
</body>
</html>I need to update stationList when form is submited.
