1.11 Other ICGC Geocoder integration examples

The viewer https://eines.icgc.cat/geocodificador_visor/ integrates the ICGC geocoding API service using the Leaflet library.

Below are other viewer examples of how to integrate the service into your applications with different technologies:

Simple example viewer - Mapbox

Uses node and jQuery. Easy to download and customize.

It can be downloaded from: https://github.com/OpenICGC/visor_demo_geocoder .

And to see the example of how it works: (https://openicgc.github.io/visor_demo_geocoder/#13.61/41.69589/1.88979).

Integration with ESRI

Widget that allows integration with ESRI.

Widget code: https://github.com/OpenICGC/esri-geocodericgc-plugin.

Example of use: https://openicgc.github.io/esri-geocodericgc-plugin/.

//Widget  
<script type="text/javascript" src="js/cercadorPelias.js"></script>
//Librerias ESRI
<div id="viewDiv"></div>
<script src="https://js.arcgis.com/4.14/"></script>
require([       
       "esri/Graphic",    //Per funcions relacionades amb cercador
       "esri/request",    //Per funcions relacionades amb cercador
       "esri/views/MapView",
       "esri/widgets/Search",   //Per funcions relacionades amb cercador
       "esri/widgets/Search/SearchSource",  //Per funcions relacionades amb cercador
       "esri/geometry/geometryEngine",  //Per funcions relacionades amb cercador
       "esri/geometry/Point",  //Per funcions relacionades amb cercador
       "esri/WebMap",
       "esri/layers/Layer",
       "esri/layers/MapImageLayer",
       "esri/portal/Portal",
       "esri/widgets/BasemapToggle"
     ], function(       
       Graphic,
       esriRequest,
       MapView,
       Search,
       SearchSource,
       geometryEngine,
       Point,
       WebMap,
           Layer,
       MapImageLayer,
       Portal,
       BasemapToggle
     )...
....
var searchWidget = new Search({
   view: view,
   //Geocodificador 
   sources: [customSearchSource(Graphic,esriRequest,MapView,Search,SearchSource,geometryEngine,Point)],

   includeDefaultSources: false
});
// Add the search widget to the top left corner of the view       
view.ui.add(searchWidget, {
   position: "top-right"
});

Integration with OpenLayers

A control is created that allows integration with OpenLayers.

Widget code: https://github.com/OpenICGC/openlayers-geocodericgc-plugin.

Usage example: https://openicgc.github.io/openlayers-geocodericgc-plugin/

//Scripts i css 
<link href="css/ol-geocodericgc.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>
<script src="js/ol-geocodericgc.js"></script>

//Instanciación del control
var geocodericgc = new GeocoderICGC('icgc', { 
 placeholder: 'Search for ...',
 targetType: 'text-input',
 limit: 5
});
map.addControl(geocodericgc);

//Capturar respuesta del geocodificador
geocodericgc.on('addresschosen', function(evt){
 var feature = evt.feature,
     coord = evt.coordinate,
     address = evt.address;
 // some popup solution
 content.innerHTML = '<p>'+ address.formatted +'</p>';
 overlay.setPosition(coord);
});