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>


    <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>

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

    <style>body { padding: 0; margin: 0; } </style>
<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>

    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'

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

            .bindPopup("You are within " + radius + " meters from this point").openPopup();

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

    function onLocationError(e) {

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

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


var x = document.getElementById("map");

function getLocation() {
  if (navigator.geolocation) {
  } 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;            

</body> </html>

asked 24 Nov '19, 09:55

eurus's gravatar image

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
Be the first one to answer this question!
toggle preview

Follow this question

By Email:

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



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

Question tags:


question asked: 24 Nov '19, 09:55

question was seen: 2,119 times

last updated: 24 Nov '19, 10:40

powered by OSQA