Skip to content

1.6 Map viewer with queries to the ICGC Geocoder

The viewer https://eines.icgc.cat/geocodificador_visor/ is an example of using the ICGC geocoder, with requests for direct and reverse geocoding.

Direct geocoding

It contains a search engine for addresses and place names: as the user types the text to be searched, requests are sent to the direct geocoding service, until the desired item and its location on the map are found.

Submitted requests use the autocomplete operation with the text parameter containing the text entered by the user.

An example of these requests is https://eines.icgc.cat/geocodificador/autocompletar?text=nou%203&layers=topo1%2Ctopo2%2Caddress&size=5

Reverse geocoding

By clicking on the map, a reverse geocoding request is made, obtaining the postal address and place name closest to the indicated point within a radius of 500 meters.

The sent requests use the reverse operation with the lon and lat parameters containing the point marked by the user.

An example of these requests is https://eines.icgc.cat/geocodificador/invers?lat=41.81623479875584&lon=2.4224853515625004&size=1&boundary.circle.radius=0.5&layers=topo2, address

Prioritization of results

If the Prioritize results near the center of the map box is checked, the results closest to the center of the map are displayed first in the list of results.

The center point of the map is indicated in the focus.point.lat and focus.point.lon parameters.

An example of a request is https://eines.icgc.cat/geocodificador/autocompletar?text=biblioteca&focus.point.lat=41.97952806717199&focus.point.lon=2.8178000450134277&layers=topo1%2Ctopo2%2Caddress&size=5

The searched elements belong to one of the following layers (indicated in the layers parameter):

  • topo1: toponyms referring to population groups (municipalities, capitals of municipalities, population entities, disseminated and neighborhoods), showing first the toponyms that are name or capital of municipality. They appear in the list of results with the prefix (population).

  • topo2: rest of toponyms. They appear in the list of results with the prefix (place name).

  • address: portals. They appear in the list of results with the prefix (portal).

Maximum number of results

The size parameter has been set to 5, to display at most 5 elements from each layer.

Query of the type of toponyms

When placing the cursor over a topo1 or topo2 element, toponym type is displayed (addendum.type field):

Download

It can be downloaded from: https://github.com/OpenICGC/leaflet-geocodericgc-plugin

Implementation

It has been implemented with the Leaflet library, using the leaflet-geocoder-mapzen plugin.

leaflet-geocoder-mapzen plugin is used https://www.npmjs.com/package/leaflet-geocoder-mapzen {target="_blank"}, which has been modified to manage the size and focus parameters, the prefix and tooltip of each result (addendum.type field in the case of toponyms) and the zoom level of the map (addendum.zoom field in the case of toponyms)

<!--Upload Leaflet code from the cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>

<!-- Download Mapzen Geocoding Leaflet plugin -->
<script src="js/leaflet-geocoder.js"></script>

// Create the map
var map = L.map('map', {
        center: [41.431, 1.8580],
        zoom: 8,
        minZoom: 2,
        maxZoom: 18,
        scrollWheelZoom: true,
        zoomControl: false
      });

var geocodingOptions = {
        url: 'https://eines.icgc.cat/geocodificador',
        expanded: true,
        autocomplete: true,
        layers: "topo1,topo2,address",
        size: 5,
        focus: false,
        panToPoint: true
      };
      geoc
L.control.geocoder(geocodingOptions).addTo(map);

Code to embed the viewer

To embed the viewer on your website, copy and paste the following text: 

<iframe width="100%" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://eines.icgc.cat/geocodificador_visor/" > </iframe>

PWA functionality

The Leaflet viewer https://eines.icgc.cat/geocodificador_visor/ is a progressive web application (PWA) that presents the possibility to be downloaded and launched from the main screen or application menu of any device with a web browser.

To install the app, in Chrome:

Windows

Android