User Defined Map

After a long time, finally I am  here for you to write a blog. It doesn’t mean that I was not working but due to academics work.

Huhh.. Now come to OSM again.

It’s very difficult for me to mouse the map to a particular loaction everytime while loading the map.

So, what I want is to enter the latitude and longitude of my own choice and browser should render that location while loading.

Now, we will try to do the same.

Just add two files name “input.html” and “process.php”. I added both files in the same directory that of the “slippymap.html”.

Content of both files are shown below.

input.html

<html><body>
<h4>SPT Test: Site location</h4>
<form action=”process.php” method=”post”>
<select name=”zoom” id=”zoom”>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select>
Latitude: <input name=”lat” type=”text” id=”lat”/>
Longitude: <input name=”lon” type=”text” id=”lon”/>
<button type=”submit” onclick=”qwer()” >submit</button>
</form>

function qwer(){
a = document.getElementById(“lat”).value;
b = document.getElementById(“lon”).value;
c = document.getElementById(“zoom”).value;

//console.log(a);
sessionStorage.setItem(“lat”, a);
sessionStorage.setItem(“lon”, b);
sessionStorage.setItem(“zoom”,c);
//alert(x);
}

</body></html>

 

process.php

<html><body>
<?php
$a=$_POST[“lat”];
$b=$_POST[“lon”];
$c=$_POST[“zoom”];?>
You ordered zoom <?php echo $_POST[“zoom”] ; ?>  at lat <?php echo $_POST[“lat”] ; ?>  and long <?php echo $_POST[“lon”] ; ?> <br />TCC<a href=”http://lab.gdy.club/osm/slippymap.html”>Get location of site on Map</a>

</body></html>

 

In “slippymap.html”  file just make the following changes.

 

http://OpenStreetMap.js

<script type=”text/javascript”>
var lat=sessionStorage.getItem(“lat”);
var lon=sessionStorage.getItem(“lon”);
var zoom=sessionStorage.getItem(“zoom”);
var map;

 

Now, open the file input.html in the browser and proceed further as shown.

 

osm2osm3

You will be able to see the map at the desired location.

osm4

Have a nice day.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s