Working With Maps

So in this tutorial we will be working with Open Streets Maps. You have to get the users geo location then store that in a database. Afterwards, you can display their location on a web page. This tutorial is written in PHP and jQuery and a Ubuntu server.

What is So Great About This

The great things about this is that it is free! It works great too! I use it in a lot of my applications. These codes snippets will benefit you for years to come. Here is the functions.php file but there is actually several more file to make this work. 

<?php 
/*MAP STUFF*/
//geocode
function routemap($lat1, $lon1, $lat2, $lon2, $user1, $user2){
	echo '<link rel="stylesheet" href="leaflet.css" />
<div id="map" style="width: 500px; height: 280px"></div>
<script src="leaflet.js"></script>
<script>
let mapOptions = {
    center:['.$lat1.', '.$lon1.'],
    zoom:14
}
let map = new L.map("map" , mapOptions);
let layer = new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
map.addLayer(layer);
let locations = [
    {
        "id": 1,
        "lat": '.$lat1.',
        "long": '.$lon1.',
        "src": "images/house.png",
        "title": "'.$user1.'",
        "url":"manage.php"
    },
    {
        "id": 2,
        "lat": '.$lat2.',
        "long": '.$lon2.',
        "src": "images/house.png",
        "title": "'.$user1.'",
        "url":"manage.php"
    }
]

let popupOption = {
    "closeButton":false
}
locations.forEach(element => {
    new L.Marker([element.lat,element.long]).addTo(map)
    .on("mouseover",event =>{
        event.target.bindPopup("<div class="card"><img src=""+element.src+"" width="80" height="80" alt=""+element.title+"">   <h3>"+element.title+"</h3></div>",popupOption).openPopup();
    })
    .on("mouseout", event => {
        event.target.closePopup();
    })
    .on("click" , () => {
        window.open(element.url);
    })
});
</script>';
}


function geocode($address){
    $address = urlencode($address);
    $url = "https://nominatim.openstreetmap.org/?addressdetails=1&q=$address&format=json&limit=1";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_URL,$url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_REFERER, $url);
    curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36");
    $result = curl_exec($ch);
    curl_close($ch);
    return json_decode($result, true);
}

function showmap($latlon, $personname){
	if(!empty($latlon)){
	echo '<link rel="stylesheet" href="leaflet.css" />
	<style>.leaflet-popup-content p{color:#000000;}</style>
<div id="map" style="width: 100%; height:50vh;"></div>
<script src="leaflet.js"></script>
<script>
			let mapOptions = {
			 center:['.$latlon.'],
			 zoom:16
			}
			let map = new L.map("map" , mapOptions);
			let layer = new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
			map.addLayer(layer);
			let customIcon = {
			 iconUrl:"images/markers.png",
			 iconSize:[40,40]
			}
			let myIcon = L.icon(customIcon);
			let iconOptions = {
			 title:"company name",
			 draggable:false,
			 icon:myIcon
			}
			let marker = new L.Marker(['.$latlon.'] , iconOptions);
			marker.addTo(map);
			marker.bindPopup("content").openPopup();
			let popup = L.popup().setLatLng(['.$latlon.'] ).setContent("<p>'.$personname.'</p>").openOn(map);
              </script>';
	}
}

/*END OF MAP STUFF*/

Here are all the downloads you get in the zip file. 

#maps #ubuntu #server #geolocation

Seeing an Example

You can see an example of the work here at the Home and Business inventory app where we let the users track their mileage. You will need functions, leavleft.js and leaflet.css along with the images. The cost is only $8 for the time I took to put it together for you. Otherwise you can watch the video and write the code out.

Get the code here!