show user location by lat and lon

hi, i show user current location in map.i need after show location by receive lat and lon via user show location on map. thanks for help.

    <!DOCTYPE html>
<html>
<head>

    <title>view</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <link rel="stylesheet" href="leaflet/leaflet.css" />
    <script src="leaflet/leaflet.js"></script>


    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 600px;
            height: 400px;
        }       
        div#lat-lon {
            padding-top: 10px;
        }
    </style>

    <style>body { padding: 0; margin: 0; } </style>
</head>
<body>
<div id="main-content">
    <div id='map'></div>
    <div id="lat-lon">
        <input type="text" id="frmLat">
        <input type="text" id="frmLon">
        <button onclick="getLocation()">show lat and lon</button>
        <button onclick="setLocation()">set location</button>
    </div>
</div>


<script>
    var map = L.map('map').fitWorld();

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=token', {
        maxZoom: 18,

        id: 'mapbox.streets'
    }).addTo(map);

    function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng).addTo(map)
            .bindPopup("You are within " + radius + " meters from this point").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({setView: true, maxZoom: 16});

</script>

<script>
var x = document.getElementById("map");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
    document.getElementById("frmLat").value = position.coords.latitude;
    document.getElementById("frmLon").value = position.coords.longitude;            
}
</script>

</body> </html>

location

asked 24 Nov '19, 09:55

eurus
11●3●3●5
accept rate: 0%

edited 24 Nov '19, 10:12

Can you explain in a bit more detail what you are trying to do and how it is related to OpenStreetMap?

What sort of platform are you asking about (on the web, on a phone, something else?) and what sort of map (tile-based, vector based, something else again?)

Questions such as "how do I find the user's location from a web page" (which may be part of what you are asking) are general web technology questions - you'll find answers at this help site but much more in-depth answers elsewhere.

(24 Nov '19, 10:04) SomeoneElse ♦

now can help me ?

(24 Nov '19, 10:13) eurus

er - not really, since it's unclear what "navigator" is in your code snippet. I can show you an example of web-based geolocation that works, though - see here. That's using leaflet (as you seem to be doing also). Pressing the "centre" button here will invoke it.

(24 Nov '19, 10:21) SomeoneElse ♦

solved, thanks

(24 Nov '19, 10:29) eurus

can set marker to center location ?

(24 Nov '19, 10:37) eurus

There's a ton of examples at the leaflet site here - including setting markers.

(24 Nov '19, 10:40) SomeoneElse ♦

showing 5 of 6 show 1 more comments

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

*italic* or _italic_
**bold** or __bold__
link:[text](http://url.com/ "title")
image?![alt text](/path/img.jpg "title")
numbered list: 1. Foo 2. Bar
to add a line break simply add two spaces to where you would like the new line to be.
basic HTML tags are also supported

learn more about Markdown

Question tags:

location ×97

question asked: 24 Nov '19, 09:55

question was seen: 6,012 times

last updated: 24 Nov '19, 10:40

show user location by lat and lon

Follow this question

Related questions