1.11 Altres exemples d'integració del Geocodificador ICGC

El visor https://eines.icgc.cat/geocodificador_visor/ integra el servei API de geocodificació ICGC utilitzant la llibreria Leaflet.

A continuació es mostren altres exemples de visors de com integrar el servei a les vostres aplicacions amb diferents tecnologies:

Visor simple d'exemple - Mapbox

Creat amb node i jQuery. Fàcil de descarregar i personalitzar.

Es pot descarregar de: https://github.com/OpenICGC/visor_demo_geocoder .

I per veure l'exemple de com funciona: https://openicgc.github.io/visor_demo_geocoder/#13.61/41.69589/1.88979.

Integració amb ESRI

Widget que permet integrar-ho amb ESRI.

Codi del giny: https://github.com/OpenICGC/esri-geocodericgc-plugin.

Exemple d'ús: https://openicgc.github.io/esri-geocodericgc-plugin/.

//Widget cerca Pelias
<script type="text/javascript" src="js/cercadorPelias.js"></script>
//Llibreries 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 PELIAS
   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ó amb OpenLayers

Es crea un control que permet integrar-ho amb OpenLayers.

Codi del giny: https://github.com/OpenICGC/openlayers-geocodericgc-plugin.

Exemple d'ús: https://openicgc.github.io/openlayers-geocodericgc-plugin/

//Scripts i css que cal carregar
<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ó del control
var geocodericgc = new GeocoderICGC('icgc', { 
 placeholder: 'Search for ...',
 targetType: 'text-input',
 limit: 5
});
map.addControl(geocodericgc);
//Capturar el que retorna el 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);
});