1.11 Otros ejemplos de integración del Geocodificador ICGC

El visor https://eines.icgc.cat/geocodificador_visor/ integra el servicio API de geocodificación ICGC utilizando la librería Leaflet.

A continuación se muestran otros ejemplos de visores de cómo integrar el servicio en sus aplicaciones con diferentes tecnologías:

Visor simple de ejemplo - Mapbox

Utiliza node y jQuery. Fácil de descargar y personalizar.

Se puede descargar de: https://github.com/OpenICGC/visor_demo_geocoder .

Y para ver el ejemplo de cómo funciona: (https://openicgc.github.io/visor_demo_geocoder/#13.61/41.69589/1.88979) .

Integración con ESRI

Widget que permite la integración con ESRI.

Código del widget: https://github.com/OpenICGC/esri-geocodericgc-plugin.

Ejemplo de uso: 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"
});

Integración con OpenLayers

Se crea un control que permite la integración con OpenLayers.

Código del widget: https://github.com/OpenICGC/openlayers-geocodericgc-plugin.

Ejemplo de uso: 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);
});