Centering the map in the place where the user is located in OpenStreetMap

trakis Published at Dev

trakis

I am beginner webmaster. I have map with 2 markers and round. I have this code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>title</title>
      <link rel="stylesheet" href="style.css">
      <script src="script.js"></script>
      <link href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" rel="stylesheet" type="text/css" />
      <script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script>
      <script src="Leaflet.Editable.js"></script>
      <style type="text/css">
         #mapdiv { height: 500px; }
      </style>
   </head>
   <body>
      <div id="mapdiv"></div>
      <script type="text/javascript">
         var map = L.map('mapdiv', {editable: true}).setView([54.35070881441067, 18.641191756395074], 13);
         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
             maxZoom: 30
         }).addTo(map);

         var LeafIcon = L.Icon.extend({
             options: {
                 shadowUrl: 'leaf-shadow.png',
                 iconSize:     [38, 95],
                 shadowSize:   [50, 64],
                 iconAnchor:   [22, 94],
                 shadowAnchor: [4, 62],
                 popupAnchor:  [-3, -76]
             }
         });

         var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
             redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
             orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});

         L.icon = function (options) {
             return new L.Icon(options);
         };

         L.marker([54.45070881441067, 18.541191756395074], {icon: greenIcon}).addTo(map).bindPopup('yyyyyy.<br> Easily customizable.');
         L.marker([54.35070881441367, 18.641191756395774], {icon: redIcon}).addTo(map).bindPopup('xxxxxxx.<br> Easily customizable.').openPopup();

         L.EditControl = L.Control.extend({
             options: {
                 position: 'topleft',
                 callback: null,
                 kind: '',
                 html: ''
             },

             onAdd: function (map) {
                 var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
                     link = L.DomUtil.create('a', '', container);

                 link.href = '#';
                 link.title = 'Create a new ' + this.options.kind;
                 link.innerHTML = this.options.html;
                 L.DomEvent.on(link, 'click', L.DomEvent.stop)
                           .on(link, 'click', function () {
                             window.LAYER = this.options.callback.call(map.editTools);
                           }, this);

                 return container;
             }
         });

         var circle = L.circle([54.35070881441067, 18.641191756395074], {radius: 1000}).addTo(map);
         circle.enableEdit();
         circle.on('dblclick', L.DomEvent.stop).on('dblclick', circle.toggleEdit);
         //circle.on('editable:vertex:drag', function (e) {
         map.on('editable:drawing:move', function (e) {
             console.log(circle.getLatLng())
             console.log(circle.getRadius());
         });
      </script>
   </body>
</html>

This code work fine.

I need to add to this map: - centering the map in the place where the user is located (user's location), - center circle in the place where the user is located (user's location.

How can I make it? Does anyone know how to do it?

skdroid

You can use geolocation.setTracking to true it will automatically get user current location and display a blue dot - Example Link

or you can use navigator javascript object to get users current lat lng and pass it to open street map

navigator.geolocation.getCurrentPosition(showPosition);

Example link to get lat lng of user

add code after map init.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    /* map is object of Leaflet Map (var map = L.map(... )*/
    map.panTo(new L.LatLng(position.coords.latitude, position.coords.longitude));
  });
} else {
  alert("Geolocation is not supported by this browser.");
}

Collected from the Internet

Please contact [email protected] to delete if infringement.