Skip to main content
GuidesAPI ReferenceExamples

Wikipedia Search Control

Estimated reading time: 5 minutes

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.

info

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:

See the example fullscreen

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:

See the example fullscreen

How it works​

// Start by setting your token from https://developer.magiclane.com/api/projects
if (gem.core.App.token === undefined) gem.core.App.token = '';

let defaultAppScreen = gem.core.App.initAppScreen({
    container: 'map-canvas',
    center: [48.8562, 2.3516, 100000] // latitude , longitude, altitude
});

let wikiItemSelected = function (parentDiv, wikiContainer) {
    const divCard = document.createElement('div');
    divCard.classList.add('card', 'description');
    if (wikiContainer.getWikiImagesUrl().size()) {
        const imgTop = document.createElement('img');
        imgTop.className = 'card-img-top';
        imgTop.src = wikiContainer.getWikiImagesUrl().get(0);
        divCard.appendChild(imgTop);
    }
    const cardBody = document.createElement('div');
    cardBody.className = "card-body";
    cardBody.innerHTML = '<h5 class="card-title">' + wikiContainer.getWikipediaPageTitle() + '</h5>' +
        '<p class="card-text">' + wikiContainer.getWikiPageDescription() + '</p>';
    divCard.appendChild(cardBody);
    parentDiv.appendChild(divCard);

    // images carousel
    if (wikiContainer.getWikiImagesUrl().size() > 1) {
        const carouselExampleControls = document.createElement('div');
        carouselExampleControls.id = 'carouselExampleControls';
        carouselExampleControls.className = 'carousel slide';
        carouselExampleControls.setAttribute('data-ride', 'carousel');

        let whatToAdd = '<div class="carousel-title"><h5 class="card-title">More Photos</h5></div>';
        whatToAdd += '<div class="carousel-inner">';
        whatToAdd += '<div class="carousel-item active"><div class="card">';
        whatToAdd += '<img src="' + wikiContainer.getWikiImagesUrl().get(1) +
            '" loading="lazy">';
        whatToAdd +=
            '<div class="card-body"><h6 class="card-title">' + wikiContainer.getWikiImagesTitles().get(1) +
            '</h6><p class="card-text">' + wikiContainer.getWikiImagesDescription().get(1) + '</p></div>';
        whatToAdd += '</div></div>';
        for (let i = 2; i < wikiContainer.getWikiImagesUrl().size(); i++) {
            whatToAdd += '<div class="carousel-item"><div class="card">';
            whatToAdd += '<img src="' + wikiContainer.getWikiImagesUrl().get(i) +
                '" loading="lazy">';
            whatToAdd +=
                '<div class="card-body"><h6 class="card-title">' + wikiContainer.getWikiImagesTitles().get(i) +
                '</h6><p class="card-text">' + wikiContainer.getWikiImagesDescription().get(i) + '</p></div>';
            whatToAdd += '</div></div>';
        }
        whatToAdd += '</div>';
        whatToAdd +=
            '<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>';
        carouselExampleControls.innerHTML = whatToAdd;
        parentDiv.appendChild(carouselExampleControls);
    }
};

let wikipediaControl = new gem.control.WikipediaControl({
    container: 'wiki-info-container',
    populateItemFunction: wikiItemSelected
});
defaultAppScreen.addControl(wikipediaControl);

let searchControl = new gem.control.SearchControl({
    highlightOptions: {
        contourColor: { r: 0, g: 255, b: 0, a: 0 }
    },
    searchPreferences: {
        exactMatch: true,
        maximumMatches: 3,
        addressSearch: false,
        mapPoisSearch: false,
        setCursorReferencePoint: true
    },
    searchResults: {
        initialPlaceSearch: 'Paris'
    },
    selectionListener: [wikipediaControl]
});
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.

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:

Right-click on the links and select Save As.

JavaScript Examples​

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