Skip to content

Wikipedia Search Control

This guide shows you how to use Wikipedia control together with free text search control on an interactive map with various options.

The finished example will look like this:

See the example fullscreen

Start searching for a location using the search box to see how the Wikipedia and Free Text Search Controls work.

For the images carousel we have used the Bootstrap front-end toolkit.

When to use

  • To render a searchable interactive map.

What is needed

  • Magic Lane API key token

  • Web server (an example is provided)

Setup

Get your Magic Lane API key token: if you do not have a token, see the Getting Started guide.

This project needs a web server. If you do not have access to a web server, you can easily install a local web server, see the Installing a Local Web Server guide. In this project we use a local web server.

Adding Map Control and Free Text Search Control

The finished example using search control will look like this:

If the search result is a region, its contour/perimeter is rendered on the map in green.

The map supports pan and zoom, and is fully 3D, so holding down the shift key and panning will simultaneously rotate and tilt the map.

To see how to add free text search control check out the guide Free Text Search.

Adding Wikipedia Control

The finished example using Wikipedia control options will look like this:

Start searching for a location using the search box to see how the Wikipedia and Free Text Search Controls work.

How it works

 1 // Start by setting your token from https://developer.magiclane.com/api/projects
 2 if (gem.core.App.token === undefined) gem.core.App.token = '';
 3
 4 let defaultAppScreen = gem.core.App.initAppScreen({
 5     container: 'map-canvas',
 6     center: [48.8562, 2.3516, 100000] // latitude , longitude, altitude
 7 });
 8
 9 let wikiItemSelected = function (parentDiv, wikiContainer) {
10     const divCard = document.createElement('div');
11     divCard.classList.add('card', 'description');
12     if (wikiContainer.getWikiImagesUrl().size()) {
13         const imgTop = document.createElement('img');
14         imgTop.className = 'card-img-top';
15         imgTop.src = wikiContainer.getWikiImagesUrl().get(0);
16         divCard.appendChild(imgTop);
17     }
18     const cardBody = document.createElement('div');
19     cardBody.className = "card-body";
20     cardBody.innerHTML = '<h5 class="card-title">' + wikiContainer.getWikipediaPageTitle() + '</h5>' +
21         '<p class="card-text">' + wikiContainer.getWikiPageDescription() + '</p>';
22     divCard.appendChild(cardBody);
23     parentDiv.appendChild(divCard);
24
25     // images carousel
26     if (wikiContainer.getWikiImagesUrl().size() > 1) {
27         const carouselExampleControls = document.createElement('div');
28         carouselExampleControls.id = 'carouselExampleControls';
29         carouselExampleControls.className = 'carousel slide';
30         carouselExampleControls.setAttribute('data-ride', 'carousel');
31
32         let whatToAdd = '<div class="carousel-title"><h5 class="card-title">More Photos</h5></div>';
33         whatToAdd += '<div class="carousel-inner">';
34         whatToAdd += '<div class="carousel-item active"><div class="card">';
35         whatToAdd += '<img src="' + wikiContainer.getWikiImagesUrl().get(1) +
36             '" loading="lazy">';
37         whatToAdd +=
38             '<div class="card-body"><h6 class="card-title">' + wikiContainer.getWikiImagesTitles().get(1) +
39             '</h6><p class="card-text">' + wikiContainer.getWikiImagesDescription().get(1) + '</p></div>';
40         whatToAdd += '</div></div>';
41         for (let i = 2; i < wikiContainer.getWikiImagesUrl().size(); i++) {
42             whatToAdd += '<div class="carousel-item"><div class="card">';
43             whatToAdd += '<img src="' + wikiContainer.getWikiImagesUrl().get(i) +
44                 '" loading="lazy">';
45             whatToAdd +=
46                 '<div class="card-body"><h6 class="card-title">' + wikiContainer.getWikiImagesTitles().get(i) +
47                 '</h6><p class="card-text">' + wikiContainer.getWikiImagesDescription().get(i) + '</p></div>';
48             whatToAdd += '</div></div>';
49         }
50         whatToAdd += '</div>';
51         whatToAdd +=
52             '<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>';
53         carouselExampleControls.innerHTML = whatToAdd;
54         parentDiv.appendChild(carouselExampleControls);
55     }
56 };
57
58 let wikipediaControl = new gem.control.WikipediaControl({
59     container: 'wiki-info-container',
60     populateItemFunction: wikiItemSelected
61 });
62 defaultAppScreen.addControl(wikipediaControl);
63
64 let searchControl = new gem.control.SearchControl({
65     highlightOptions: {
66         contourColor: { r: 0, g: 255, b: 0, a: 0 }
67     },
68     searchPreferences: {
69         exactMatch: true,
70         maximumMatches: 3,
71         addressSearch: false,
72         mapPoisSearch: false,
73         setCursorReferencePoint: true
74     },
75     searchResults: {
76         initialPlaceSearch: 'Paris'
77     },
78     selectionListener: [wikipediaControl]
79 });
80 defaultAppScreen.addControl(searchControl);
The map control is initialized using gem.core.App.initAppScreen. The map is rendered in the div container with the id map-canvas. The map is centered on Paris, France using coordinate latitude, longitude and altitude.

The control class gem.control.SearchControl is used to add free text search control for the map.

The control class gem.control.WikipediaControl is used to get Wikipedia information for a search location. In order to connect the Wikipedia control, the option selectionListener: [wikipediaControl] from the class gem.control.SearchControl is used.
The function wikiItemSelected is used to populate the Wikipedia information container wiki-info-container.
  1 <!DOCTYPE html>
  2 <html lang="en-us">
  3   <head>
  4     <meta charset="utf-8" />
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no" />
  6     <title>Free Text Search with Wikipedia Controls - MagicLane Maps SDK for JavaScript</title>
  7     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  8       integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  9     <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
 10
 11     <style>
 12      .wiki-info-container {
 13       visibility: hidden;
 14       overflow-x: hidden;
 15       overflow-y: auto;
 16       font-size: 0.75rem;
 17       position: absolute;
 18       width: 30%;
 19       max-height: 100%;
 20       max-width: 300px;
 21       left: 1vw;
 22       z-index: 9;
 23       background-color: white;
 24       box-shadow: 0 2px 4px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 2%);
 25     }
 26
 27     .card {
 28       width: 100%;
 29     }
 30
 31     .card-img-top {
 32       max-height: 30vh;
 33       object-fit: cover;
 34     }
 35
 36     .card-body {
 37       max-height: 19.5vh;
 38       overflow: auto;
 39     }
 40
 41     .card img {
 42       max-height: 30vh;
 43       object-fit: cover;
 44     }
 45
 46     .carousel-control-prev-icon,
 47     .carousel-control-next-icon {
 48       height: 100px;
 49       width: 100px;
 50       background-size: 100%, 100%;
 51       background-image: none;
 52     }
 53
 54     .carousel-control-next-icon:after {
 55       content: '>';
 56       font-size: 55px;
 57       color: lime;
 58     }
 59
 60     .carousel-control-prev-icon:after {
 61       content: '<';
 62       font-size: 55px;
 63       color: lime;
 64     }
 65
 66     .carousel-title {
 67       margin-left: 1.65rem;
 68       margin-top: 0.75rem;
 69     }
 70
 71     .carousel-inner {
 72       max-height: 40vh;
 73     }
 74
 75     ::-webkit-scrollbar {
 76       width: 4px;
 77     }
 78
 79     ::-webkit-scrollbar-track {
 80       box-shadow: inset 0 0 5px grey;
 81       border-radius: 10px;
 82     }
 83
 84     ::-webkit-scrollbar-thumb {
 85       background: green;
 86       border-radius: 10px;
 87     }
 88
 89     ::-webkit-scrollbar-thumb:hover {
 90       background: green;
 91     }
 92
 93     [class^="gem-"] *, ::after, ::before {
 94       box-sizing: initial;
 95       line-height: initial;
 96     }
 97     </style>
 98   </head>
 99
100   <body>
101     <div id="search-with-wiki" style="width: 100%; height: 100%">
102       <div id="map-canvas" style="width: 100%; left: 0%; height: 100%; position: absolute; overflow: hidden">
103       <div id="wiki-info-container" class="wiki-info-container"></div>
104     </div>
105
106     <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
107     <script type="text/javascript" src="token.js"></script>
108     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
109       integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
110     </script>
111     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
112       integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
113     </script>
114     <script type="text/javascript" src="wikipediaControls.js"></script>
115   </body>
116 </html>

Files

The finished example consists of the project directory containing these files:

  • JavaScript code (.js file extension)

  • HTML code (.html file extension)

To run the example, the HTML file is loaded in a browser.

Source code for Wikipedia search control:
JavaScript
HTML

right-click on the links and select Save As.

JavaScript Examples

Maps SDK for JavaScript Examples can be downloaded or cloned with Git