CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>API:Nearby places viewer - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"12b840b0-6a29-423d-8afc-8eb33735ac4b","wgCanonicalNamespace":"API","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":104,"wgPageName":"API:Nearby_places_viewer","wgTitle":"Nearby places viewer","wgCurRevisionId":6733925,"wgRevisionId":6733925,"wgArticleId":439712,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["MediaWiki action API","Tutorials"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"API:Nearby_places_viewer","wgRelevantArticleId":439712,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":["autoconfirmed"],"wgRestrictionMove":["autoconfirmed"],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true, "wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgInternalRedirectTargetUrl":"/wiki/API:Nearby_places_viewer","wgTranslatePageTranslation":"source","wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.translate.tag.languages":"ready","ext.pygments":"ready", "skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","mediawiki.ui.button":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","ext.pygments.view","mediawiki.page.media","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface", "ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.pygments%2Ctranslate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cmediawiki.ui.button%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.5"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="API:Nearby places viewer - MediaWiki"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/API:Nearby_places_viewer"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/API:Nearby_places_viewer"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-104 ns-subject page-API_Nearby_places_viewer rootpage-API_Nearby_places_viewer skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Main menu </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z">Main page</a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download">Get MediaWiki</a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions">Get extensions</a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/">Tech blog</a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute">Contribute</a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out">User help</a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ">FAQ</a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents">Technical manual</a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk">Support desk</a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication">Communication</a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/">Developer portal</a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics">Code statistics</a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things">Community portal</a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r">Recent changes</a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats">Translate content</a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x">Random page</a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump">Village pump</a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox">Sandbox</a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&page=API%3ANearby+places+viewer" title="Add interlanguage links" class="wbc-editpage">Add links</a></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"> Search </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"> English</a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Appearance </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en" class="">Donate</a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=API%3ANearby+places+viewer" title="You are encouraged to create an account and log in; however, it is not mandatory" class="">Create account</a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=API%3ANearby+places+viewer" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class="">Log in</a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Personal tools </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en">Donate</a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=API%3ANearby+places+viewer" title="You are encouraged to create an account and log in; however, it is not mandatory"> Create account</a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=API%3ANearby+places+viewer" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"> Log in</a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing">learn more</a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y">Contributions</a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n">Talk</a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Overview" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Overview"> <div class="vector-toc-text"> 1 Overview </div> </a> <ul id="toc-Overview-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-A_step-by-step_process_for_building_this_application" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#A_step-by-step_process_for_building_this_application"> <div class="vector-toc-text"> 2 A step-by-step process for building this application </div> </a> <button aria-controls="toc-A_step-by-step_process_for_building_this_application-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle A step-by-step process for building this application subsection </button> <ul id="toc-A_step-by-step_process_for_building_this_application-sublist" class="vector-toc-list"> <li id="toc-Step_1:_Set_up_Python_and_Flask_development_environment" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_1:_Set_up_Python_and_Flask_development_environment"> <div class="vector-toc-text"> 2.1 Step 1: Set up Python and Flask development environment </div> </a> <ul id="toc-Step_1:_Set_up_Python_and_Flask_development_environment-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_2:_Create_a_simple_Flask_application" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_2:_Create_a_simple_Flask_application"> <div class="vector-toc-text"> 2.2 Step 2: Create a simple Flask application </div> </a> <ul id="toc-Step_2:_Create_a_simple_Flask_application-sublist" class="vector-toc-list"> <li id="toc-Render_a_simple_static_page" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Render_a_simple_static_page"> <div class="vector-toc-text"> 2.2.1 Render a simple static page </div> </a> <ul id="toc-Render_a_simple_static_page-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Style_your_app" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Style_your_app"> <div class="vector-toc-text"> 2.2.2 Style your app </div> </a> <ul id="toc-Style_your_app-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Application_layout" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Application_layout"> <div class="vector-toc-text"> 2.2.3 Application layout </div> </a> <ul id="toc-Application_layout-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Step_3:_Obtain_coordinates_of_your_current_location" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_3:_Obtain_coordinates_of_your_current_location"> <div class="vector-toc-text"> 2.3 Step 3: Obtain coordinates of your current location </div> </a> <ul id="toc-Step_3:_Obtain_coordinates_of_your_current_location-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_4:_Send_location_data_to_the_server_with_AJAX" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_4:_Send_location_data_to_the_server_with_AJAX"> <div class="vector-toc-text"> 2.4 Step 4: Send location data to the server with AJAX </div> </a> <ul id="toc-Step_4:_Send_location_data_to_the_server_with_AJAX-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_5:_Fetch_nearby_places_via_MediaWiki_Action_API" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_5:_Fetch_nearby_places_via_MediaWiki_Action_API"> <div class="vector-toc-text"> 2.5 Step 5: Fetch nearby places via MediaWiki Action API </div> </a> <ul id="toc-Step_5:_Fetch_nearby_places_via_MediaWiki_Action_API-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_6:_Create_a_user_interface_for_list_of_places_from_JSON_response" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_6:_Create_a_user_interface_for_list_of_places_from_JSON_response"> <div class="vector-toc-text"> 2.6 Step 6: Create a user interface for list of places from JSON response </div> </a> <ul id="toc-Step_6:_Create_a_user_interface_for_list_of_places_from_JSON_response-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Step_7:_Style_changes_with_Bootstrap" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Step_7:_Style_changes_with_Bootstrap"> <div class="vector-toc-text"> 2.7 Step 7: Style changes with Bootstrap </div> </a> <ul id="toc-Step_7:_Style_changes_with_Bootstrap-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Next_steps" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Next_steps"> <div class="vector-toc-text"> 3 Next steps </div> </a> <ul id="toc-Next_steps-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> 4 See also </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Toggle the table of contents </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading">API:Nearby places viewer</h1> <div class="mw-indicators"> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-api" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/API:Nearby_places_viewer" title="View the subject page [c]" accesskey="c">API</a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/API_talk:Nearby_places_viewer" rel="discussion" title="Discussion about the content page [t]" accesskey="t">Discussion</a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >English </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/API:Nearby_places_viewer">Read</a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=API:Nearby_places_viewer&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e">View source</a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=API:Nearby_places_viewer&action=history" title="Past revisions of this page [h]" accesskey="h">View history</a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >Tools </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/API:Nearby_places_viewer">Read</a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=API:Nearby_places_viewer&action=edit">View source</a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=API:Nearby_places_viewer&action=history">View history</a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/API:Nearby_places_viewer" title="A list of all wiki pages that link here [j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/API:Nearby_places_viewer" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u">Upload file</a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q">Special pages</a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=API:Nearby_places_viewer&oldid=6733925" title="Permanent link to this revision of this page">Permanent link</a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=API:Nearby_places_viewer&action=info" title="More information about this page">Page information</a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=API%3ANearby_places_viewer&id=6733925&wpFormIdentifier=titleform" title="Information on how to cite this page">Cite this page</a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FAPI%3ANearby_places_viewer">Get shortened URL</a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FAPI%3ANearby_places_viewer">Download QR code</a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=API%3ANearby+places+viewer">Create a book</a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=API%3ANearby_places_viewer&action=show-download-screen">Download as PDF</a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=API:Nearby_places_viewer&printable=yes" title="Printable version of this page [p]" accesskey="p">Printable version</a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-API%3ANearby+places+viewer&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/API:Nearby_places_viewer/de" class="mw-pt-progress mw-pt-progress--complete" title="API:Nahegelegene-Orte-Betrachter (100% translated)" lang="de" dir="ltr">Deutsch</a></li> <li>English</li> <li><a href="/wiki/API:Nearby_places_viewer/dtp" class="mw-pt-progress mw-pt-progress--low" title="API:Nearby places viewer/dtp (1% translated)" lang="dtp" dir="ltr">Kadazandusun</a></li> <li><a href="/wiki/API:Nearby_places_viewer/tr" class="mw-pt-progress mw-pt-progress--complete" title="API:Yakındaki yerler görüntüleyici (100% translated)" lang="tr" dir="ltr">Türkçe</a></li> <li><a href="/wiki/API:Nearby_places_viewer/es" class="mw-pt-progress mw-pt-progress--low" title="API:Visor de lugares cercanos (5% translated)" lang="es" dir="ltr">español</a></li> <li><a href="/wiki/API:Nearby_places_viewer/fr" class="mw-pt-progress mw-pt-progress--complete" title="Afficheur de voisinage (100% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/API:Nearby_places_viewer/pl" class="mw-pt-progress mw-pt-progress--low" title="API:Nearby places viewer/pl (9% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/API:Nearby_places_viewer/cs" class="mw-pt-progress mw-pt-progress--complete" title="API:Prohlížeč míst v okolí (100% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/wiki/API:Nearby_places_viewer/ru" class="mw-pt-progress mw-pt-progress--low" title="API:Просмотр мест поблизости (4% translated)" lang="ru" dir="ltr">русский</a></li> <li><a href="/wiki/API:Nearby_places_viewer/ar" class="mw-pt-progress mw-pt-progress--med" title="واجهة برمجة التطبيقات:عارض الأماكن القريبة (17% translated)" lang="ar" dir="rtl">العربية</a></li> <li><a href="/wiki/API:Nearby_places_viewer/ja" class="mw-pt-progress mw-pt-progress--low" title="API:付近の場所ビュワー (13% translated)" lang="ja" dir="ltr">日本語</a></li> <li><a href="/wiki/API:Nearby_places_viewer/ko" class="mw-pt-progress mw-pt-progress--low" title="API:Nearby places viewer/ko (0% translated)" lang="ko" dir="ltr">한국어</a></li></ul></div> <style data-mw-deduplicate="TemplateStyles:r6651108">.mw-parser-output table.ombox{margin:4px 10%;border-collapse:collapse;border:1px solid #a2a9b1;background-color:#f8f9fa;color:#333;box-sizing:border-box}.mw-parser-output .ombox td.mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox th.mbox-text,.mw-parser-output .ombox td.mbox-text{border:none;padding:0.25em 0.9em;width:100%}.mw-parser-output .ombox td.mbox-image{border:none;text-align:center;padding:2px 0 2px 0.9em}.mw-parser-output .ombox td.mbox-imageright{border:none;text-align:center;padding:2px 0.9em 2px 0}.mw-parser-output table.ombox-notice{border-color:#a2a9b1}.mw-parser-output table.ombox-speedy{background-color:#fee7e6;color:#333}.mw-parser-output table.ombox-speedy,.mw-parser-output table.ombox-delete{border-color:#b32424;border-width:2px}.mw-parser-output table.ombox-content{border-color:#f28500}.mw-parser-output table.ombox-style{border-color:#fc3}.mw-parser-output table.ombox-move{border-color:#9932cc}.mw-parser-output table.ombox-protection{border-color:#a2a9b1;border-width:2px}html body.mediawiki .mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;box-sizing:border-box;width:238px;font-size:88%;line-height:1.25em}@media screen{html.skin-theme-clientpref-night .mw-parser-output table.ombox{background-color:transparent;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output table.ombox{background-color:transparent;color:inherit}}</style><table class="skin-nightmode-reset-color ombox ombox-content plainlinks" role="presentation" style="display: block; color:#222; border:solid 1px #A8A8A8; padding: .5em 1em; margin:0.5em 0em;"><tbody><tr><td class="mbox-image"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/API_-_The_Noun_Project.svg/30px-API_-_The_Noun_Project.svg.png" decoding="async" width="30" height="30" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/API_-_The_Noun_Project.svg/45px-API_-_The_Noun_Project.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f6/API_-_The_Noun_Project.svg/60px-API_-_The_Noun_Project.svg.png 2x" data-file-width="512" data-file-height="512" /></td><td class="mbox-text">This page is part of the <a href="/wiki/Special:MyLanguage/API:Main_page" title="Special:MyLanguage/API:Main page">MediaWiki Action API</a> documentation.</td></tr></tbody></table> <style data-mw-deduplicate="TemplateStyles:r6605224">.mw-parser-output .tpl-sidebar{background-color:var(--background-color-interactive-subtle,#f8f9fa);border:1px solid var(--border-color-divider,#a2a9b1);color:var(--color-base,#202122);width:22em;padding:.2em;text-align:center;line-height:1.4em;font-size:88%}.mw-parser-output .tpl-sidebar-pagedir-ltr,.mw-parser-output .tpl-sidebar.tpl-sidebar-floatright{float:right;clear:right;margin:.5em 0 1em 1em}.mw-parser-output .tpl-sidebar-pagedir-rtl,.mw-parser-output .tpl-sidebar.tpl-sidebar-floatleft{float:left;clear:left;margin:.5em 1em 1em 0}.mw-parser-output .tpl-sidebar.tpl-sidebar-floatnone{float:none;clear:both;margin:.5em 0 1em 1em}.mw-parser-output .tpl-sidebar>caption{padding-bottom:.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .tpl-sidebar>tbody>tr>th,.mw-parser-output .tpl-sidebar>tbody>tr>td{padding:0}.mw-parser-output .tpl-sidebar .tpl-sidebar-topimage>td{padding:.4em 0}.mw-parser-output .tpl-sidebar-imagecaption{padding-top:.2em;line-height:1.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-pretitle>td{padding-top:.4em;line-height:1.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-topimage+.tpl-sidebar-pretitle>td{padding-top:.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-title>th{padding:.2em .4em .2em;font-size:145%;line-height:1.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-pretitle+.tpl-sidebar-title>th{padding-top:0}.mw-parser-output .tpl-sidebar .tpl-sidebar-image>td{padding:.2em 0 .4em}.mw-parser-output .tpl-sidebar .tpl-sidebar-abovebelow>td{padding:.3em .4em;font-weight:bold}.mw-parser-output .tpl-sidebar .tpl-sidebar-heading>th{padding-top:.2em}.mw-parser-output .tpl-sidebar .tpl-sidebar-image~.tpl-sidebar-heading-first>th{padding-top:.4em}.mw-parser-output .tpl-sidebar .tpl-sidebar-content>td{padding-bottom:.2em}.mw-parser-output .tpl-sidebar :not(.tpl-sidebar-heading)+.tpl-sidebar-content-first>td{padding-top:.2em}.mw-parser-output .tpl-sidebar-navbar>td{font-size:115%}.mw-parser-output .tpl-sidebar-pagedir-ltr .tpl-sidebar-navbar>td{text-align:right}.mw-parser-output .tpl-sidebar-pagedir-rtl .tpl-sidebar-navbar>td{text-align:left}</style><table class="vertical-navbox tpl-sidebar tpl-sidebar-pagedir-ltr nowraplinks noprint" role="navigation" style="width:22em; border-spacing: 0.4em 0; text-align: left; padding: 1.5em; padding: min(1.5em, 2%); margin: 0 0 2em 2em; width: 320px; max-width: 40%;"><tbody><tr class="tpl-sidebar-title"> <th class="" style="font-size: 19px; font-weight: 700; padding: 0;"><a href="/wiki/Special:MyLanguage/API:Main_page" title="Special:MyLanguage/API:Main page">MediaWiki Action API</a><a href="/wiki/API:Main_page" title="API:Main page"> </a></th> </tr><tr class="tpl-sidebar-heading tpl-sidebar-heading-first"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Basics</th> </tr><tr class="tpl-sidebar-content tpl-sidebar-content-first"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Etiquette" title="Special:MyLanguage/API:Etiquette">Etiquette and usage guidelines</a><a href="/wiki/API:Etiquette" title="API:Etiquette"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Query" title="Special:MyLanguage/API:Query">All query modules</a><a href="/wiki/API:Query" title="API:Query"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Properties" title="Special:MyLanguage/API:Properties">All page properties</a><a href="/wiki/API:Properties" title="API:Properties"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Lists" title="Special:MyLanguage/API:Lists">All list modules</a><a href="/wiki/API:Lists" title="API:Lists"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Meta" title="Special:MyLanguage/API:Meta">All meta modules</a><a href="/wiki/API:Meta" title="API:Meta"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Data_formats" title="Special:MyLanguage/API:Data formats">Output formats</a><a href="/wiki/API:Data_formats" title="API:Data formats"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Authentication</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Tokens" title="Special:MyLanguage/API:Tokens">Get tokens for data modifying operations</a><a href="/wiki/API:Tokens" title="API:Tokens"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Login" title="Special:MyLanguage/API:Login">Login</a><a href="/wiki/API:Login" title="API:Login"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Logout" title="Special:MyLanguage/API:Logout">Logout</a><a href="/wiki/API:Logout" title="API:Logout"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Assert" title="Special:MyLanguage/API:Assert">Verifying authentication (assertions)</a><a href="/wiki/API:Assert" title="API:Assert"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Accounts and Users</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Account_creation" title="Special:MyLanguage/API:Account creation">Create an account</a><a href="/wiki/API:Account_creation" title="API:Account creation"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Block" title="Special:MyLanguage/API:Block">Block or unblock a user</a><a href="/wiki/API:Block" title="API:Block"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Userinfo" title="Special:MyLanguage/API:Userinfo">Get info about the current user</a><a href="/wiki/API:Userinfo" title="API:Userinfo"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Watchlist_feed" title="Special:MyLanguage/API:Watchlist feed">Get the current user's watchlist as a feed</a><a href="/wiki/API:Watchlist_feed" title="API:Watchlist feed"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Options" title="Special:MyLanguage/API:Options">Change user options</a><a href="/wiki/API:Options" title="API:Options"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:User_group_membership" title="Special:MyLanguage/API:User group membership">Change user group membership</a><a href="/wiki/API:User_group_membership" title="API:User group membership"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Emailuser" title="Special:MyLanguage/API:Emailuser">Send an email</a><a href="/wiki/API:Emailuser" title="API:Emailuser"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Page Operations</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Edit" title="Special:MyLanguage/API:Edit">Create and edit a page</a><a href="/wiki/API:Edit" title="API:Edit"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Get_the_contents_of_a_page" title="Special:MyLanguage/API:Get the contents of a page">Get the contents of a page</a><a href="/wiki/API:Get_the_contents_of_a_page" title="API:Get the contents of a page"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Upload" title="Special:MyLanguage/API:Upload">Upload a file</a><a href="/wiki/API:Upload" title="API:Upload"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Import" title="Special:MyLanguage/API:Import">Import a page</a><a href="/wiki/API:Import" title="API:Import"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Delete" title="Special:MyLanguage/API:Delete">Delete a page</a><a href="/wiki/API:Delete" title="API:Delete"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Parsing_wikitext" title="Special:MyLanguage/API:Parsing wikitext">Parse content of a page</a><a href="/wiki/API:Parsing_wikitext" title="API:Parsing wikitext"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Watch" title="Special:MyLanguage/API:Watch">Watch or unwatch a page</a><a href="/wiki/API:Watch" title="API:Watch"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Purge" title="Special:MyLanguage/API:Purge">Purge cache for page(s)</a><a href="/wiki/API:Purge" title="API:Purge"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Rollback" title="Special:MyLanguage/API:Rollback">Rollback a page</a><a href="/wiki/API:Rollback" title="API:Rollback"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Move" title="Special:MyLanguage/API:Move">Move a page</a><a href="/wiki/API:Move" title="API:Move"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Patrol" title="Special:MyLanguage/API:Patrol">Patrol a page or revision</a><a href="/wiki/API:Patrol" title="API:Patrol"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Undelete" title="Special:MyLanguage/API:Undelete">Restore revisions of a deleted page</a><a href="/wiki/API:Undelete" title="API:Undelete"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Protect" title="Special:MyLanguage/API:Protect">Change a page's protection level</a><a href="/wiki/API:Protect" title="API:Protect"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:SetPageLanguage" title="Special:MyLanguage/API:SetPageLanguage">Change a page's language</a><a href="/wiki/API:SetPageLanguage" title="API:SetPageLanguage"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Changing_wiki_content" title="Special:MyLanguage/API:Changing wiki content">More...</a><a href="/wiki/API:Changing_wiki_content" title="API:Changing wiki content"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Search</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Opensearch" title="Special:MyLanguage/API:Opensearch">Search wiki pages by title (OpenSearch)</a><a href="/wiki/API:Opensearch" title="API:Opensearch"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Search" title="Special:MyLanguage/API:Search">Advanced search for wiki pages by title or text</a><a href="/wiki/API:Search" title="API:Search"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Geosearch" title="Special:MyLanguage/API:Geosearch">Search wiki pages near a location</a><a href="/wiki/API:Geosearch" title="API:Geosearch"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Languagesearch" title="Special:MyLanguage/API:Languagesearch">Search for a language name</a><a href="/wiki/API:Languagesearch" title="API:Languagesearch"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Prefixsearch" title="Special:MyLanguage/API:Prefixsearch">Perform a prefix search for page titles</a><a href="/wiki/API:Prefixsearch" title="API:Prefixsearch"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Developer Utilities</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Client_code" title="Special:MyLanguage/API:Client code">Access libraries</a><a href="/wiki/API:Client_code" title="API:Client code"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Cross-site_requests" title="Special:MyLanguage/API:Cross-site requests">Cross-site requests</a><a href="/wiki/API:Cross-site_requests" title="API:Cross-site requests"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Extensions" title="Special:MyLanguage/API:Extensions">Creating an API module in an extension</a><a href="/wiki/API:Extensions" title="API:Extensions"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Calling_internally" title="Special:MyLanguage/API:Calling internally">Using the API in MediaWiki and extensions</a><a href="/wiki/API:Calling_internally" title="API:Calling internally"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Restricting_API_usage" title="Special:MyLanguage/API:Restricting API usage">Restricting API usage</a><a href="/wiki/API:Restricting_API_usage" title="API:Restricting API usage"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Localisation" title="Special:MyLanguage/API:Localisation">Localisation</a><a href="/wiki/API:Localisation" title="API:Localisation"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Implementation_Strategy" title="Special:MyLanguage/API:Implementation Strategy">Implementation Strategy</a><a href="/wiki/API:Implementation_Strategy" title="API:Implementation Strategy"> </a></li></ul></td> </tr><tr class="tpl-sidebar-heading"> <th class="" style="font-size: 16px; font-weight: 700; padding-top: 1em;;">Tutorials</th> </tr><tr class="tpl-sidebar-content"> <td class="" style=";"> <ul><li><a href="/wiki/Special:MyLanguage/API:Tutorial" title="Special:MyLanguage/API:Tutorial">Action API Tutorial</a><a href="/wiki/API:Tutorial" title="API:Tutorial"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Article_ideas_generator" title="Special:MyLanguage/API:Article ideas generator">Article ideas generator</a><a href="/wiki/API:Article_ideas_generator" title="API:Article ideas generator"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Nearby_places_viewer" title="Special:MyLanguage/API:Nearby places viewer">Nearby places viewer</a><a class="mw-selflink selflink"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Picture_of_the_day_viewer" title="Special:MyLanguage/API:Picture of the day viewer">Picture of the day viewer</a><a href="/wiki/API:Picture_of_the_day_viewer" title="API:Picture of the day viewer"> </a></li> <li><a href="/wiki/Special:MyLanguage/API:Holidays_viewer" title="Special:MyLanguage/API:Holidays viewer">Holidays viewer</a><a href="/wiki/API:Holidays_viewer" title="API:Holidays viewer"> </a></li></ul></td> </tr><tr class="tpl-sidebar-navbar"> <td style=""><style data-mw-deduplicate="TemplateStyles:r4692751">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar ul{display:inline;white-space:nowrap}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em;width:6em}</style><a href="/wiki/Template:API" title="Template:API">v</a> · <a class="external text" href="https://www.mediawiki.org/wiki/Template_talk:API">d</a> · <a class="external text" href="https://www.mediawiki.org/w/index.php?title=Template:API&action=edit">e</a></td> </tr> </tbody></table> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Overview">Overview</h2></div> In this tutorial, you will learn how to search for wiki pages near your location using the <a href="/wiki/Special:MyLanguage/API:Main_page" title="Special:MyLanguage/API:Main page">MediaWiki Action API</a>. <div style="text-align: center;"> <a rel="nofollow" class="external text" href="https://github.com/wikimedia/mediawiki-api-demos/tree/master/apps/nearby-places-viewer">Download the code from GitHub</a> <a class="external text" href="https://nearby-places-viewer.toolforge.org/">Browse the app on Toolforge</a> </div> This tutorial will teach you how to do this using: <ul><li><a rel="nofollow" class="external text" href="https://www.python.org/">Python</a> and <a rel="nofollow" class="external text" href="https://flask.palletsprojects.com/">Flask</a> framework</li> <li><a href="https://developer.mozilla.org/docs/Web/JavaScript" class="extiw" title="devmo:Web/JavaScript">JavaScript</a>, <a rel="nofollow" class="external text" href="https://jquery.com/">jQuery</a> and <a rel="nofollow" class="external text" href="https://getbootstrap.com/">Bootstrap</a> framework. The latter are <a class="external text" href="https://phabricator.wikimedia.org/phame/post/view/65/toolforge_provides_proxied_mirrors_of_cdnjs_and_now_fontcdn_for_your_usage_and_user-privacy/">loaded from Wikimedia Toolforge for privacy reasons</a>.</li> <li><a href="/wiki/Special:MyLanguage/API:Main_page" title="Special:MyLanguage/API:Main page">MediaWiki Action API</a>'s <a href="/wiki/Special:MyLanguage/API:Geosearch" title="Special:MyLanguage/API:Geosearch">Geosearch</a><a href="/wiki/API:Geosearch" title="API:Geosearch"> </a> module</li> <li><a href="https://developer.mozilla.org/docs/Web/API/Geolocation_API" class="extiw" title="devmo:Web/API/Geolocation API">Geolocation API</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="A_step-by-step_process_for_building_this_application">A step-by-step process for building this application</h2></div> <div class="mw-heading mw-heading3"><h3 id="Step_1:_Set_up_Python_and_Flask_development_environment">Step 1: Set up Python and Flask development environment</h3></div> To set up the Python development environment for a Flask application, you will need to install Python, create a virtual environment, and install Flask. <style data-mw-deduplicate="TemplateStyles:r6651107">.mw-parser-output .note{background-position:left 7px top 50%;padding:0.5em 0.5em 0.5em 40px;margin:0.5em 0;overflow:hidden;background-color:#f8f9fa;color:#333;background-repeat:no-repeat;border:1px solid #ddd}.mw-parser-output .note-inline{display:inline-block;vertical-align:middle}.mw-parser-output .note-info{background-color:#eaf3ff;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/e/ec/OOjs_UI_icon_information-progressive.svg");background-size:25px;border-color:#a3caff;padding-left:40px;min-height:25px}.mw-parser-output .note-reminder{background-color:#fff9ea;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg");background-size:25px;border-color:#fc3;min-height:25px}.mw-parser-output .note-warn{background-color:#fff9ea;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg");background-size:25px;border-color:#fc3;min-height:25px}.mw-parser-output .note-error{background-color:#fee7e6;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg");background-size:25px;border-color:#c33;min-height:25px}@media screen{html.skin-theme-clientpref-night .mw-parser-output .note{background-color:transparent;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .note{background-color:transparent;color:inherit}}</style><div role="note" class="note note-info">This application uses Python3, the recommended version for new Python projects. <a href="//wiki.python.org/moin/Python2orPython3" class="extiw" title="pythoninfo:Python2orPython3">Learn more about the differences between Python2 and Python3 here</a>. To install Python3 on your local machine, follow step-by-step instructions in these <a rel="nofollow" class="external text" href="https://docs.python-guide.org/starting/installation/#python-3-installation-guides">installation guides</a>.</div> Here is how to set up the development environment for building the application: <table> <tbody><tr> <td><div class="mw-highlight mw-highlight-lang-shell-session mw-content-ltr" dir="ltr"><pre>$ mkdir nearby-places-viewer $ cd nearby-places-viewer/ This will create a new directory and change into it $ python3 --version #Python 3.6.5 This command checks your Python version $ python3 -m venv venv This command will create a virtual environment named 'venv' $ source venv/bin/activate This will activate the virtual environment $ pip install Flask This command will install the Flask package with all its dependencies </pre></div> </td></tr></tbody></table> <div class="mw-heading mw-heading3"><h3 id="Step_2:_Create_a_simple_Flask_application">Step 2: Create a simple Flask application</h3></div> <div class="mw-heading mw-heading4"><h4 id="Render_a_simple_static_page">Render a simple static page</h4></div> Place the following code in <code>$HOME/nearby-places-viewer/nearby.py</code> <table> <caption> </caption> <tbody><tr> <td><div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>#!/usr/bin/python3 """ nearby.py MediaWiki Action API Code Samples Nearby places viewer app: Demo of geo search for wiki pages near a location using the Geolocation API and MediaWiki Action API's Geosearch module. MIT license """ from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): """ Displays the index page accessible at '/' """ return render_template('places.html') if __name__ == '__main__': app.run() </pre></div> </td></tr></tbody></table> Drop this one line of code <code><h1>Nearby places viewer</h1></code> in a HTML file inside the <code>templates</code> folder: <code>$HOME/nearby-places-viewer/templates/places.html</code> Note: In this simple application, we are using <code>render_template</code> method which renders the template named <code>places.html</code> from the <code>templates</code> directory. Next, run your Flask app with the command <code>python nearby.py</code> and open <code><a rel="nofollow" class="external free" href="http://127.0.0.1:5000/">http://127.0.0.1:5000/</a></code> to view your app in the browser. You should be able to see "Nearby places viewer" in your browser window. <div class="mw-heading mw-heading4"><h4 id="Style_your_app">Style your app</h4></div> Let's do some app styling. Add a button element for accepting search input in the HTML file and link tags to load an external and internal stylesheet. External stylesheet, in this case, is the URL of a CSS file for the font <code>Amatic</code>. Replace the existing code in <code>$HOME/nearby-places-viewer/templates/places.html</code> with the following: <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><link rel="stylesheet" href="//tools-static.wmflabs.org/fontcdn/css?family=Amatic+SC:700"> <link rel="stylesheet" href="/static/style.css"> <h1>Nearby places viewer</h1> <button>Click here to search</button> </pre></div> Place the following code in <code>$HOME/nearby-places-viewer/static/style.css</code> <table> <caption> </caption> <tbody><tr> <th style="width: 80%"> </th> <td> </td></tr> <tr> <td><div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>h1 { font-family: 'Amatic SC', cursive; font-size: 2.5em; font-weight: normal; color: black; } button { font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; color: white; border-radius: 4px; background-color: #7c7ce0; margin-bottom: 20px; } </pre></div> </td> <td><figure typeof="mw:File/Thumb"><a href="/wiki/File:Nearby_places_viewer_demo_app_screenshot_(1).png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/3/37/Nearby_places_viewer_demo_app_screenshot_%281%29.png/217px-Nearby_places_viewer_demo_app_screenshot_%281%29.png" decoding="async" width="217" height="202" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/37/Nearby_places_viewer_demo_app_screenshot_%281%29.png/326px-Nearby_places_viewer_demo_app_screenshot_%281%29.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/37/Nearby_places_viewer_demo_app_screenshot_%281%29.png/434px-Nearby_places_viewer_demo_app_screenshot_%281%29.png 2x" data-file-width="854" data-file-height="794" /></a><figcaption>Nearby places viewer demo app screenshot (1)</figcaption></figure> </td></tr></tbody></table> <div class="mw-heading mw-heading4"><h4 id="Application_layout">Application layout</h4></div> <pre>$HOME/nearby-places-viewer ├── templates/ │ └── places.html ├── static/ │ └── static.css ├── nearby.py └── venv/ </pre> <div class="mw-heading mw-heading3"><h3 id="Step_3:_Obtain_coordinates_of_your_current_location">Step 3: Obtain coordinates of your current location</h3></div> To search for wiki pages nearby, you first need to obtain coordinates of your current location. To do so, you can use the <a href="https://developer.mozilla.org/docs/Web/API/Geolocation_API" class="extiw" title="devmo:Web/API/Geolocation API">Geolocation API</a> along with some JavaScript code. When you click the Click here to search button, the app makes a call to the Geolocation API and retrieves the current position of your device via the API's <code>Navigator.geolocation</code> object. The API's response in return is a <code>Position</code> object from which you can obtain the latitude and longitude. Note: When your app makes a call to the API you will be notified and asked to grant permission to your browser to access your location. Place the following code in <code>$HOME/nearby-places-viewer/static/places.js</code> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$( document ).ready(function() { var x = document.getElementById( "places-list" ); $( 'button' ).click(function() { getLocation(); }); function getLocation() { x.innerHTML = "Searching your location.."; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(fetchPlaces); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function fetchPlaces(position) { x.innerHTML = position.coords.latitude + "|" + position.coords.longitude; } }); </pre></div> Link the custom JavaScript <code>/static/places.js</code> and <code>jQuery</code> from the <code>HTML</code> file: <code>$HOME/nearby-places-viewer/templates/places.html</code> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre> <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="/static/places.js"></script>  <div id="places-list"></div> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Step_4:_Send_location_data_to_the_server_with_AJAX">Step 4: Send location data to the server with AJAX</h3></div> This app uses jQuery's AJAX method to send the location data obtained in Step 3 to the server and POST it without page refresh to a Python Flask route <code>/</code> in <code>$HOME/nearby-places-viewer/nearby.py</code>. As a next step, let's add an AJAX call to the <code>fetchPlaces</code> function in <code>$HOME/nearby-places-viewer/static/places.js</code>. Note: At this point, if you try to run your app, it is likely that you will see an error in the browser window as we have not added support to the route <code>/</code> to handle POST requests. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>function fetchPlaces(position) { var data = { "latitude": position.coords.latitude, "longitude": position.coords.longitude }; $.ajax({ url: "/", type: "POST", data: JSON.stringify(data), contentType: "application/json", dataType: "json", success: function (response) { x.innerHTML = "Success!"; }, error: function () { x.innerHTML = "An error occurred while fetching places!"; } }); } </pre></div> <div class="mw-heading mw-heading3"><h3 id="Step_5:_Fetch_nearby_places_via_MediaWiki_Action_API">Step 5: Fetch nearby places via MediaWiki Action API</h3></div> First, extend the Python Flask route <code>/</code> in <code>$HOME/nearby-places-viewer/nearby.py</code> to handle POST requests. You can do so by adding both GET and POST in the <code>methods</code> argument list in the route decorator. Next, you can obtain location data available in <code>JSON</code> format from the <code>request</code> object and pass it to <code>fetch_places_nearby()</code> function for further processing. <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>@app.route('/', methods=['GET', 'POST']) def index(): """ Displays the index page accessible at '/' """ if request.method == "POST": data = request.get_json() latitude = data['latitude'] longitude = data['longitude'] results = fetch_places_nearby(latitude, longitude) return jsonify(results=results) return render_template('places.html') </pre></div> The code in the <code>fetch_places_nearby()</code> function makes a <code>GET</code> request to the Action API to search for wiki pages near a location. API call consists of an endpoint <code>https://en.wikipedia.org/w/api.php</code> and query string parameters. Some of the key parameters are: <ul><li><code>action=query</code> main module to query information</li> <li><code>generator=geosearch</code> query module's submodule <code>list</code> used as a <a href="/wiki/Special:MyLanguage/API:Query#Generators" title="Special:MyLanguage/API:Query">generator module</a> to get search results for a set of pages</li> <li><code>prop=coordinates|pageimages|description|info</code> tells which properties to return for pages</li></ul> Note: For more information on the geosearch module visit <a href="/wiki/Special:MyLanguage/API:Geosearch" title="Special:MyLanguage/API:Geosearch">API:Geosearch</a><a href="/wiki/API:Geosearch" title="API:Geosearch"> </a>. <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>def fetch_places_nearby(lat, lon): params = { "action": "query", "prop": "coordinates|pageimages|description|info", "inprop": "url", "pithumbsize": 144, "generator": "geosearch", "ggsradius": 10000, "ggslimit": 10, "ggscoord": str(lat) + "|" + str(lon), "format": "json", } res = SESSION.get(url=API_ENDPOINT, params=params) data = res.json() places = data['query'] and data['query']['pages'] # TODO: further process 'places' list return places </pre></div> View complete Python and Flask code with import statements and processed <code>places</code> list. This app uses <code>Haversine</code> package available in Python to calculate distance between two geographic coordinates. <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/nearby-places-viewer/nearby.py</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-python3 mw-content-ltr" dir="ltr"><pre>#!/usr/bin/python3 """ nearby.py MediaWiki Action API Code Samples Nearby places viewer app: Demo of geo search for wiki pages near a location using the Geolocation API and MediaWiki Action API's Geosearch module. MIT license """ from flask import Flask, request, render_template, jsonify import requests from haversine import haversine APP = Flask(__name__) SESSION = requests.Session() API_ENDPOINT = 'https://en.wikipedia.org/w/api.php' @APP.route('/', methods=['GET', 'POST']) def index(): """ Displays the index page accessible at '/' """ if request.method == "POST": data = request.get_json() latitude = data['latitude'] longitude = data['longitude'] results = fetch_places_nearby(latitude, longitude) return jsonify(results=results) return render_template('places.html') def fetch_places_nearby(lat, lon): """ Fetches nearby places via MediaWiki Action API's Geosearch module """ params = { "action": "query", "prop": "coordinates|pageimages|description|info", "inprop": "url", "pithumbsize": 144, "generator": "geosearch", "ggsradius": 10000, "ggslimit": 10, "ggscoord": str(lat) + "|" + str(lon), "format": "json", } res = SESSION.get(url=API_ENDPOINT, params=params) data = res.json() places = data['query'] and data['query']['pages'] results = [] for k in places: title = places[k]['title'] description = places[k]['description'] if "description" in places[k] else '' thumbnail = places[k]['thumbnail']['source'] if "thumbnail" in places[k] else '' article_url = places[k]['fullurl'] cur_loc = (lat, lon) place_loc = (places[k]['coordinates'][0]['lat'], places[k]['coordinates'][0]['lon']) distance = round(haversine(cur_loc, place_loc, unit='mi'), 2) results.append({ 'title': title, 'description': description, 'thumbnail': thumbnail, 'articleUrl': article_url, 'distance': distance }) return results if __name__ == '__main__': APP.run(debug=True) </pre></div> </td></tr></tbody></table></div> <div class="mw-heading mw-heading3"><h3 id="Step_6:_Create_a_user_interface_for_list_of_places_from_JSON_response">Step 6: Create a user interface for list of places from JSON response</h3></div> Handle the returned JSON data from the server in AJAX's <code>success</code> callback and use HTML DOM <code>innerHTML</code> property to alter the <code>div</code> contents. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>success: function (response) { var places = response["results"], no_thumb = ".."; x.innerHTML = ""; for (var p in places) { var thumbnail = places[p].thumbnail || no_thumb; x.innerHTML += "<div class=\"item\"><div class=\"col-xs-8 no-padding\"><h5><a href=\"" + places[p]["articleUrl"] + "\" target=\"_blank\">" + places[p]["title"] + "</a></h5>" + places[p]["description"] + "📍" + places[p]["distance"] + " miles</div><div class=\"col-xs-4 no-padding\"><img src=\"" + thumbnail + " \"></div></div>"; } } </pre></div> View complete JavaScript code with AJAX success callback. <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/nearby-places-viewer/static/places.js</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$( document ).ready(function() { var x = document.getElementById( "places-list" ); $( ".btn-search" ).click(function() { getLocation(); }); function getLocation() { x.innerHTML = "Searching your location.."; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(fetchPlaces); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function fetchPlaces(position) { var data = { "latitude": position.coords.latitude, "longitude": position.coords.longitude }; $.ajax({ url: "/", type: "POST", data: JSON.stringify(data), contentType: "application/json", dataType: "json", success: function (response) { var places = response["results"], no_thumb = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Gnome-image-missing.svg/200px-Gnome-image-missing.svg.png"; x.innerHTML = ""; for (var p in places) { var thumbnail = places[p].thumbnail || no_thumb; x.innerHTML += "<div class=\"item\"><div class=\"col-xs-8 no-padding\"><h5><a href=\"" + places[p]["articleUrl"] + "\" target=\"_blank\">" + places[p]["title"] + "</a></h5>" + places[p]["description"] + "📍" + places[p]["distance"] + " miles</div><div class=\"col-xs-4 no-padding\"><img src=\"" + thumbnail + " \"></div></div>"; } }, error: function () { x.innerHTML = "An error occurred while fetching places!"; } }); } }); </pre></div> </td></tr></tbody></table></div> <div class="mw-heading mw-heading3"><h3 id="Step_7:_Style_changes_with_Bootstrap">Step 7: Style changes with Bootstrap</h3></div> You might have noticed that the code snippet in Step 6 uses Bootstrap class names. Yes, we are integrating the Bootstrap framework in this step to add a responsive layout design to the Places UI. To do so, let's make some more tweaks to CSS and HTML files. View complete CSS and HTML code. <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/nearby-places-viewer/static/style.css</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>.places-container .no-padding { padding: 0; } .places-container .info { text-align: center; } .places-container .viewer-heading { font-family: 'Amatic SC', cursive; font-size: 2.5em; font-weight: normal; color: black; } .places-container .btn-search { font-size: 16px; padding: 10px 25px; cursor: pointer; text-decoration: none; color: white; border-radius: 4px; background-color: #7c7ce0; } .places-container .list { margin-top: 20px; } .places-container .item { min-height: 100px; } .places-container .item p, span { font-size: 12px; margin: 2px; } .places-container .item span { color: gray; } .places-container .item img { float: right; width: 80px; height: 80px; border-radius: 5px; object-fit: cover; } .places-container .item a { color: #7c7ce0; } </pre></div> </td></tr></tbody></table></div> <div style="display:block;margin-left:0;"><table class="mw-collapsible mw-collapsed" style="margin-top:.2em; border:1px solid silver;text-align:left; width: 100%;"><tbody><tr><th style="font-size:112%;background:#F8FCFF;color:black;text-align:center">$HOME/nearby-places-viewer/templates/places.html</th></tr><tr><td style="font-size:112%;background:white;border:solid 1px silver;padding:8px"> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><title>Nearby places viewer</title> <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="/static/places.js"></script> <link rel="stylesheet" href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="//tools-static.wmflabs.org/fontcdn/css?family=Amatic+SC:700"> <link rel="stylesheet" href="/static/style.css"> <div class="container places-container col-lg-4 col-xs-12"> <div class="col-xs-12 no-padding info"> <h1 class="viewer-heading">Nearby places viewer</h1> <button class="btn-search">Click here to search</button> </div> <div class="col-xs-12 no-padding list" id="places-list"> </div> </div> </pre></div> </td></tr></tbody></table></div> <figure typeof="mw:File/Thumb"><a href="/wiki/File:Nearby_places_viewer_demo_app_screenshot_(2).png" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Nearby_places_viewer_demo_app_screenshot_%282%29.png/242px-Nearby_places_viewer_demo_app_screenshot_%282%29.png" decoding="async" width="242" height="360" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Nearby_places_viewer_demo_app_screenshot_%282%29.png/363px-Nearby_places_viewer_demo_app_screenshot_%282%29.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Nearby_places_viewer_demo_app_screenshot_%282%29.png/484px-Nearby_places_viewer_demo_app_screenshot_%282%29.png 2x" data-file-width="840" data-file-height="1250" /></a><figcaption>Nearby places viewer demo app screenshot (2)</figcaption></figure> <div class="mw-heading mw-heading2"><h2 id="Next_steps">Next steps</h2></div> <ul><li>Contribute a demo app that you have developed using the MediaWiki API to this <a rel="nofollow" class="external text" href="https://github.com/wikimedia/MediaWiki-Action-API-Code-Samples">code samples repository</a>.</li></ul> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2></div> <ul><li><a href="/wiki/Special:MyLanguage/API:Geosearch" title="Special:MyLanguage/API:Geosearch">API:Geosearch</a><a href="/wiki/API:Geosearch" title="API:Geosearch"> </a></li> <li><a rel="nofollow" class="external text" href="https://flask.palletsprojects.com/">Flask tutorials</a></li> <li><a rel="nofollow" class="external text" href="https://github.com/prtksxna/pebble-nearby">Nearby</a> is an app for the <a href="https://en.wikipedia.org/wiki/Pebble_(watch)" class="extiw" title="en:Pebble (watch)">Pebble smart watch</a> that fetches Wikipedia articles near you.</li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=API:Nearby_places_viewer&oldid=6733925">https://www.mediawiki.org/w/index.php?title=API:Nearby_places_viewer&oldid=6733925</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/wiki/Category:MediaWiki_action_API" title="Category:MediaWiki action API">MediaWiki action API</a></li><li><a href="/wiki/Category:Tutorials" title="Category:Tutorials">Tutorials</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 1 September 2024, at 00:50.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=API:Nearby_places_viewer&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.log.warn("This page is using the deprecated ResourceLoader module \"mediawiki.ui.button\".\n[1.41] Please use Codex. See migration guidelines: https://www.mediawiki.org/wiki/Codex/Migrating_from_MediaWiki_UI");mw.config.set({"wgHostname":"mw-web.codfw.main-6df7948d6c-cpmzp","wgBackendResponseTime":125,"wgPageParseReport":{"limitreport":{"cputime":"0.456","walltime":"1.013","ppvisitednodes":{"value":3884,"limit":1000000},"postexpandincludesize":{"value":50087,"limit":2097152},"templateargumentsize":{"value":22972,"limit":2097152},"expansiondepth":{"value":15,"limit":100},"expensivefunctioncount":{"value":28,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":65041,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 696.779 1 -total"," 32.84% 228.843 1 Template:API"," 25.20% 175.572 1 Template:Sidebar"," 20.39% 142.083 53 Template:Ll"," 13.69% 95.402 62 Template:Pagelang"," 13.31% 92.769 106 Template:Translatable"," 6.61% 46.047 1 Template:Mbox"," 3.01% 20.958 11 Template:Dir"," 2.34% 16.335 4 Template:Collapse_top"," 1.88% 13.134 1 Template:Navbar"]},"scribunto":{"limitreport-timeusage":{"value":"0.081","limit":"10.000"},"limitreport-memusage":{"value":1399988,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-59856bd7d8-vz9wq","timestamp":"20241119213308","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>