Geolocation Script Development with PHP & JS
Budget: €30 – €250 EUR
I'm in need of a skilled developer who can create a geolocation/reverse geocoding script using PHP, Bootstrap 3, and Javascript, specifically utilizing the Nomatim service.
A rather simple job tha can be solved by a professional in only a few hours. I, as a non professional, am working already one day on it so, I want to find a freelancer who can do this small job for me. Since it takes a fes hours, I am willing to pay 50€ for it. But, it must be good, actual coding. I have seen worse here on Freelancer.. So here is what I want to be done ASAP. Bootstrap 3 must be used fort he layout, not 4 or 5.
1. A webpage with in the content 1 button (id: carLocation). The value of the button is ‘Car’ and clicking on it opens a modal (data-toggle=”modal” data-target=”myCar”).
2. The modal contains:
a. A paragraph 1 <p> in which the address of the device (geolocation) is shown. For this I use ‘reverse geocoding’ of Nomatim for OpenStreetMap. This is 100% free, without any API or cost.
b. A paragraph 2 <p> in which latitude and longitude of the device is shown. For this I also use Nomatim for OpenStreetMap. This is 100% free, without any API or cost.
c. 3 buttons:
· Btn 1: save this location. (id: saveBtn)
· Btn 2: delete location. (id: deleteBtn)
· Btn 3: go to saved location. (id: goBtn)
d. A table (id: tableCarLocation) with columns ‘location’, ‘latitude/longitude’, ‘datetime’. The content comes from tabel ‘tbl_car’ columns ‘location’, ‘lati_long’, ‘datetime’. If there are no records in tabel ‘tbl_car’, the message ‘no car location saved’ is shown.
- saveBtn (Btn1) saves the data of paragraph 1 and 2 in a tabel. The tabel (id: tbl_car) has 4 columns: ‘id’, ‘location’, ‘lati_long’, ‘datetime’. ID is auto increment. LOCATION is the content of ‘paragraph 1’. ‘LATI-LONG is the content of ‘paragraph 2’. ‘DATETIME’ is the date and time of the creation of a record (timestamp).
When you click on saveBtn, deleteBtn and goBtn get display: block. saveBtn itself gets gisplay: none;
- deleteBtn deletes the record of table ‘tbl_car’. By default this button is display:none;
When clicking on ‘saveBnt’ this ‘deleteBtn’ gets display: block;
When clicking on ‘deleteBtn’ this button itself gets dipslay: none; and ‘saveBtn’ gets again display:block; Button ‘goBtn’ also gets display:none;
- goBtn. When clicking on ‘goBtn’ button a new page (target:_blank) is opened in Google Maps with the content of column ‘location’ in tabel ‘tbl_car’. This button is by default display: none; .
Example: for Street art I use: href="https://www.google.com/maps?q=street art" target="_blank">
When clicking on saveBtn, this button gets display: block;
When clicking on this deleteBtn this button gets dipslay: none; like deleteBtn.
What is important:
· The use must be 100% free for the user. No use of Google Maps API or other solutions with ‘pay per click’ are allowed. I know this is possible with the solutions of Nomatim for OpenStreetMap.
· It may only be possible to save 1 record. A user only has one car!!!!
· On the webpage, the button ‘carLocation’ has class ‘btn-primary’ if there is no record saved in the tabel and class ‘btn-success’ if there is a record saved in the tabel.
What is the meaning of this all?
I have a ca rand I park it somewhere in the world (where there is internet). I click on saveBtn and the place where my car is parked is saved. I walk the whole day and I want to find back my car. I click on the button carLocation with class ‘btn-success’, the modal opens and I click on goBtn. The place of my car appears in a Google Maps page. I can take the route. Once arrived at the car, I cn delete the location in the tabel.
I want this job to be professionally done ASAP for 50€.
The ideal candidate for this project would be knowledgeable in geolocation services, PHP, Bootstrap 3, and Javascript, with prior experience working with Nomatim. A good understanding of user interface design using Bootstrap 3 will be an advantage as I would like the script to be user-friendly.
A rather simple job tha can be solved by a professional in only a few hours. I, as a non professional, am working already one day on it so, I want to find a freelancer who can do this small job for me. Since it takes a fes hours, I am willing to pay 50€ for it. But, it must be good, actual coding. I have seen worse here on Freelancer.. So here is what I want to be done ASAP. Bootstrap 3 must be used fort he layout, not 4 or 5.
1. A webpage with in the content 1 button (id: carLocation). The value of the button is ‘Car’ and clicking on it opens a modal (data-toggle=”modal” data-target=”myCar”).
2. The modal contains:
a. A paragraph 1 <p> in which the address of the device (geolocation) is shown. For this I use ‘reverse geocoding’ of Nomatim for OpenStreetMap. This is 100% free, without any API or cost.
b. A paragraph 2 <p> in which latitude and longitude of the device is shown. For this I also use Nomatim for OpenStreetMap. This is 100% free, without any API or cost.
c. 3 buttons:
· Btn 1: save this location. (id: saveBtn)
· Btn 2: delete location. (id: deleteBtn)
· Btn 3: go to saved location. (id: goBtn)
d. A table (id: tableCarLocation) with columns ‘location’, ‘latitude/longitude’, ‘datetime’. The content comes from tabel ‘tbl_car’ columns ‘location’, ‘lati_long’, ‘datetime’. If there are no records in tabel ‘tbl_car’, the message ‘no car location saved’ is shown.
- saveBtn (Btn1) saves the data of paragraph 1 and 2 in a tabel. The tabel (id: tbl_car) has 4 columns: ‘id’, ‘location’, ‘lati_long’, ‘datetime’. ID is auto increment. LOCATION is the content of ‘paragraph 1’. ‘LATI-LONG is the content of ‘paragraph 2’. ‘DATETIME’ is the date and time of the creation of a record (timestamp).
When you click on saveBtn, deleteBtn and goBtn get display: block. saveBtn itself gets gisplay: none;
- deleteBtn deletes the record of table ‘tbl_car’. By default this button is display:none;
When clicking on ‘saveBnt’ this ‘deleteBtn’ gets display: block;
When clicking on ‘deleteBtn’ this button itself gets dipslay: none; and ‘saveBtn’ gets again display:block; Button ‘goBtn’ also gets display:none;
- goBtn. When clicking on ‘goBtn’ button a new page (target:_blank) is opened in Google Maps with the content of column ‘location’ in tabel ‘tbl_car’. This button is by default display: none; .
Example: for Street art I use: href="https://www.google.com/maps?q=street art" target="_blank">
When clicking on saveBtn, this button gets display: block;
When clicking on this deleteBtn this button gets dipslay: none; like deleteBtn.
What is important:
· The use must be 100% free for the user. No use of Google Maps API or other solutions with ‘pay per click’ are allowed. I know this is possible with the solutions of Nomatim for OpenStreetMap.
· It may only be possible to save 1 record. A user only has one car!!!!
· On the webpage, the button ‘carLocation’ has class ‘btn-primary’ if there is no record saved in the tabel and class ‘btn-success’ if there is a record saved in the tabel.
What is the meaning of this all?
I have a ca rand I park it somewhere in the world (where there is internet). I click on saveBtn and the place where my car is parked is saved. I walk the whole day and I want to find back my car. I click on the button carLocation with class ‘btn-success’, the modal opens and I click on goBtn. The place of my car appears in a Google Maps page. I can take the route. Once arrived at the car, I cn delete the location in the tabel.
I want this job to be professionally done ASAP for 50€.
The ideal candidate for this project would be knowledgeable in geolocation services, PHP, Bootstrap 3, and Javascript, with prior experience working with Nomatim. A good understanding of user interface design using Bootstrap 3 will be an advantage as I would like the script to be user-friendly.