{"id":2012,"date":"2022-02-11T13:02:03","date_gmt":"2022-02-11T13:02:03","guid":{"rendered":"https:\/\/dreid.nl\/?p=2012"},"modified":"2022-02-13T12:05:54","modified_gmt":"2022-02-13T12:05:54","slug":"displaying-your-position-in-a-leaflet-viewer","status":"publish","type":"post","link":"https:\/\/dreid.nl\/?p=2012","title":{"rendered":"Displaying your position in a Leaflet viewer"},"content":{"rendered":"

A colleague asked my whether it would be possible to view the current location of a user in a Leaflet-based GIS viewer<\/a>. Luckily, this is very easy to do, as explained in this tutorial<\/a>. All you need to add to the code of my previous example is the following code:<\/p>\n

function onLocationFound(e) {
\nvar radius = e.accuracy;
\nL.marker(e.latlng).addTo(map);
\nL.circle(e.latlng, radius).addTo(map);
\n}
\nmap.on('locationfound', onLocationFound);
\nmap.locate({setView: true, maxZoom: 8});<\/code><\/p>\n

This does however require a secure http (i.e. https) connection, so make sure that your webserver is set up for using https.<\/p>\n

Doing it this way will only show the position that you had when loading the page. It is possible to update the position continuously. This is done by adding the watch: true <\/em> argument to the locate method. In its current form, this will however recenter the view and zoom to the defined zoom level, and draw a new circle and marker every time an update is received. This can be avoided this way:<\/p>\n

var marker;
\nfunction onLocationFound(e) {
\nmarker.setLatLng(e.latlng);
\n}
\nmarker=L.marker([0,0]).addTo(map)
\nmap.on('locationfound', onLocationFound);
\nmap.locate({setView: false, watch: true});<\/code><\/p>\n

Instead of creating a new marker, we only set the position. Re-centering the view and setting the zoom level is turned off now. Drawing the accuracy circle is turned off now, but could of course be enabled in the same day that I’ve done with the marker, by pre-defining a variable for it, setting the initial position to [0,0], and then setting the location and radius in the onLocationFound<\/em> method.<\/p>\n","protected":false},"excerpt":{"rendered":"

A colleague asked my whether it would be possible to view the current location of a user in a Leaflet-based GIS viewer. Luckily, this is very easy to do, as explained in this tutorial. All you need to add to the code of my previous example is the following code: function onLocationFound(e) { var radius […]<\/p>\n","protected":false},"author":1,"featured_media":1971,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[100],"tags":[108],"class_list":{"0":"post-2012","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-blog","8":"tag-leaflet","9":"czr-hentry"},"yoast_head":"\nDisplaying your position in a Leaflet viewer - DreiD BV<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dreid.nl\/?p=2012\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying your position in a Leaflet viewer - DreiD BV\" \/>\n<meta property=\"og:description\" content=\"A colleague asked my whether it would be possible to view the current location of a user in a Leaflet-based GIS viewer. Luckily, this is very easy to do, as explained in this tutorial. All you need to add to the code of my previous example is the following code: function onLocationFound(e) { var radius […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dreid.nl\/?p=2012\" \/>\n<meta property=\"og:site_name\" content=\"DreiD BV\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreiDBV\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-11T13:02:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-13T12:05:54+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dreid.nl\/wp-content\/uploads\/2022\/01\/leaflet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"159\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tobias\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tobias\" \/>\n\t<meta name=\"twitter:label2\" content=\"Verwachte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012\"},\"author\":{\"name\":\"Tobias\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/#\\\/schema\\\/person\\\/724765ca445bdd176b5dfa6f0f432741\"},\"headline\":\"Displaying your position in a Leaflet viewer\",\"datePublished\":\"2022-02-11T13:02:03+00:00\",\"dateModified\":\"2022-02-13T12:05:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012\"},\"wordCount\":223,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/dreid.nl\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/leaflet.png\",\"keywords\":[\"Leaflet\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/dreid.nl\\\/?p=2012#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012\",\"url\":\"https:\\\/\\\/dreid.nl\\\/?p=2012\",\"name\":\"Displaying your position in a Leaflet viewer - DreiD BV\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/dreid.nl\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/leaflet.png\",\"datePublished\":\"2022-02-11T13:02:03+00:00\",\"dateModified\":\"2022-02-13T12:05:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dreid.nl\\\/?p=2012\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012#primaryimage\",\"url\":\"https:\\\/\\\/dreid.nl\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/leaflet.png\",\"contentUrl\":\"https:\\\/\\\/dreid.nl\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/leaflet.png\",\"width\":600,\"height\":159},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/?p=2012#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/dreid.nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Displaying your position in a Leaflet viewer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/#website\",\"url\":\"https:\\\/\\\/dreid.nl\\\/\",\"name\":\"DreiD BV\",\"description\":\"3D printen en meer\",\"publisher\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/dreid.nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/#organization\",\"name\":\"DreiD B.V.\",\"url\":\"https:\\\/\\\/dreid.nl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/dreid.nl\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/cropped-logo-vierkant.png\",\"contentUrl\":\"http:\\\/\\\/dreid.nl\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/cropped-logo-vierkant.png\",\"width\":512,\"height\":512,\"caption\":\"DreiD B.V.\"},\"image\":{\"@id\":\"https:\\\/\\\/dreid.nl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/DreiDBV\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/dreid.nl\\\/#\\\/schema\\\/person\\\/724765ca445bdd176b5dfa6f0f432741\",\"name\":\"Tobias\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/da384b41c29915cbc57151669bfd69215048a0d4cebed631ab35a6f893826870?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/da384b41c29915cbc57151669bfd69215048a0d4cebed631ab35a6f893826870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/da384b41c29915cbc57151669bfd69215048a0d4cebed631ab35a6f893826870?s=96&d=mm&r=g\",\"caption\":\"Tobias\"},\"url\":\"https:\\\/\\\/dreid.nl\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Displaying your position in a Leaflet viewer - DreiD BV","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dreid.nl\/?p=2012","og_locale":"nl_NL","og_type":"article","og_title":"Displaying your position in a Leaflet viewer - DreiD BV","og_description":"A colleague asked my whether it would be possible to view the current location of a user in a Leaflet-based GIS viewer. Luckily, this is very easy to do, as explained in this tutorial. All you need to add to the code of my previous example is the following code: function onLocationFound(e) { var radius […]","og_url":"https:\/\/dreid.nl\/?p=2012","og_site_name":"DreiD BV","article_publisher":"https:\/\/www.facebook.com\/DreiDBV","article_published_time":"2022-02-11T13:02:03+00:00","article_modified_time":"2022-02-13T12:05:54+00:00","og_image":[{"width":600,"height":159,"url":"http:\/\/dreid.nl\/wp-content\/uploads\/2022\/01\/leaflet.png","type":"image\/png"}],"author":"Tobias","twitter_card":"summary_large_image","twitter_misc":{"Geschreven door":"Tobias","Verwachte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dreid.nl\/?p=2012#article","isPartOf":{"@id":"https:\/\/dreid.nl\/?p=2012"},"author":{"name":"Tobias","@id":"https:\/\/dreid.nl\/#\/schema\/person\/724765ca445bdd176b5dfa6f0f432741"},"headline":"Displaying your position in a Leaflet viewer","datePublished":"2022-02-11T13:02:03+00:00","dateModified":"2022-02-13T12:05:54+00:00","mainEntityOfPage":{"@id":"https:\/\/dreid.nl\/?p=2012"},"wordCount":223,"commentCount":0,"publisher":{"@id":"https:\/\/dreid.nl\/#organization"},"image":{"@id":"https:\/\/dreid.nl\/?p=2012#primaryimage"},"thumbnailUrl":"https:\/\/dreid.nl\/wp-content\/uploads\/2022\/01\/leaflet.png","keywords":["Leaflet"],"articleSection":["Blog"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dreid.nl\/?p=2012#respond"]}]},{"@type":"WebPage","@id":"https:\/\/dreid.nl\/?p=2012","url":"https:\/\/dreid.nl\/?p=2012","name":"Displaying your position in a Leaflet viewer - DreiD BV","isPartOf":{"@id":"https:\/\/dreid.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dreid.nl\/?p=2012#primaryimage"},"image":{"@id":"https:\/\/dreid.nl\/?p=2012#primaryimage"},"thumbnailUrl":"https:\/\/dreid.nl\/wp-content\/uploads\/2022\/01\/leaflet.png","datePublished":"2022-02-11T13:02:03+00:00","dateModified":"2022-02-13T12:05:54+00:00","breadcrumb":{"@id":"https:\/\/dreid.nl\/?p=2012#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dreid.nl\/?p=2012"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/dreid.nl\/?p=2012#primaryimage","url":"https:\/\/dreid.nl\/wp-content\/uploads\/2022\/01\/leaflet.png","contentUrl":"https:\/\/dreid.nl\/wp-content\/uploads\/2022\/01\/leaflet.png","width":600,"height":159},{"@type":"BreadcrumbList","@id":"https:\/\/dreid.nl\/?p=2012#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dreid.nl\/"},{"@type":"ListItem","position":2,"name":"Displaying your position in a Leaflet viewer"}]},{"@type":"WebSite","@id":"https:\/\/dreid.nl\/#website","url":"https:\/\/dreid.nl\/","name":"DreiD BV","description":"3D printen en meer","publisher":{"@id":"https:\/\/dreid.nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dreid.nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/dreid.nl\/#organization","name":"DreiD B.V.","url":"https:\/\/dreid.nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/dreid.nl\/#\/schema\/logo\/image\/","url":"http:\/\/dreid.nl\/wp-content\/uploads\/2017\/11\/cropped-logo-vierkant.png","contentUrl":"http:\/\/dreid.nl\/wp-content\/uploads\/2017\/11\/cropped-logo-vierkant.png","width":512,"height":512,"caption":"DreiD B.V."},"image":{"@id":"https:\/\/dreid.nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreiDBV"]},{"@type":"Person","@id":"https:\/\/dreid.nl\/#\/schema\/person\/724765ca445bdd176b5dfa6f0f432741","name":"Tobias","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/secure.gravatar.com\/avatar\/da384b41c29915cbc57151669bfd69215048a0d4cebed631ab35a6f893826870?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/da384b41c29915cbc57151669bfd69215048a0d4cebed631ab35a6f893826870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/da384b41c29915cbc57151669bfd69215048a0d4cebed631ab35a6f893826870?s=96&d=mm&r=g","caption":"Tobias"},"url":"https:\/\/dreid.nl\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/dreid.nl\/index.php?rest_route=\/wp\/v2\/posts\/2012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dreid.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dreid.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dreid.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dreid.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2012"}],"version-history":[{"count":3,"href":"https:\/\/dreid.nl\/index.php?rest_route=\/wp\/v2\/posts\/2012\/revisions"}],"predecessor-version":[{"id":2015,"href":"https:\/\/dreid.nl\/index.php?rest_route=\/wp\/v2\/posts\/2012\/revisions\/2015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dreid.nl\/index.php?rest_route=\/wp\/v2\/media\/1971"}],"wp:attachment":[{"href":"https:\/\/dreid.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dreid.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dreid.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}