Point Posted May 1, 2021 Share Posted May 1, 2021 Hello, Does anyone have a sample code to find a location using a leaflet/osm map using unimap? thanks in advance. Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted May 2, 2021 Share Posted May 2, 2021 12 hours ago, Popo said: Hello, Does anyone have a sample code to find a location using a leaflet/osm map using unimap? thanks in advance. Hello Do you want to achieve reverse geocoding? Quote Link to comment Share on other sites More sharing options...
Point Posted May 2, 2021 Author Share Posted May 2, 2021 Hi hayri Aslan, thanks for reply 10 hours ago, Hayri ASLAN said: Hello Do you want to achieve reverse geocoding? something like this : https://github.com/smeijer/leaflet-geosearch is it possible to add this feature (search box control) to unimap in properties MapControlOptions? thanks you. Quote Link to comment Share on other sites More sharing options...
Point Posted May 2, 2021 Author Share Posted May 2, 2021 where i have to put this code in unigui import L from 'leaflet'; import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'; const provider = new OpenStreetMapProvider(); const searchControl = new GeoSearchControl({ provider: provider, }); const map = new L.Map('map'); map.addControl(searchControl); Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted May 2, 2021 Share Posted May 2, 2021 Hello I'll check this. Quote Link to comment Share on other sites More sharing options...
Wicket Posted July 6, 2021 Share Posted July 6, 2021 Hi, Has anyone made any progress on this? Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted July 6, 2021 Share Posted July 6, 2021 Hello 1. Download below file and add into files folder. https://unpkg.com/leaflet-geosearch@3.3.2/dist/bundle.min.js 2. add below code to customfiles files/bundle.min.js 3. add an edit to the form and to search an address run below code procedure TMainForm.UniButton18Click(Sender: TObject); begin with UniMap1, JSInterface do begin JSCode('const provider = new window.GeoSearch.OpenStreetMapProvider();'); JSCallGlobal('var query_promise = provider.search',[JSObject(['query', uniedit4.Text])]); JSCallGlobal('query_promise.then', [JSFunction('e','ajaxRequest('+JSName+', "OnAddressFound", {address: JSON.stringify(e)});')]); end; end; 4. To get the result, add below code to unimap.onAjaxEvent if EventName='OnAddressFound' then begin addressJson:= Params['address'].AsString; end now you will get a JSONArray with found results. You need to parse it. Check below example https://jsfiddle.net/Alechan/L6s4nfwg/ Example addressJSON [ { "x":35.3258349, "y":36.9936175, "label":"Adana, Seyhan, Adana, Mediterranean Region, 01010, Turkey", "bounds":[ [ 36.8336175, 35.1658349 ], [ 37.1536175, 35.4858349 ] ], "raw":{ "place_id":128287, "licence":"Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright", "osm_type":"node", "osm_id":26480399, "boundingbox":[ "36.8336175", "37.1536175", "35.1658349", "35.4858349" ], "lat":"36.9936175", "lon":"35.3258349", "display_name":"Adana, Seyhan, Adana, Mediterranean Region, 01010, Turkey", "class":"place", "type":"city", "importance":0.7673464411826116, "icon":"https://nominatim.openstreetmap.org/ui/mapicons//poi_place_city.p.20.png" } }, { "x":35.4984094, "y":37.1438001, "label":"Adana, Mediterranean Region, Turkey", "bounds":[ [ 36.2630414, 34.7392967 ], [ 38.4046019, 36.4095784 ] ], "raw":{ "place_id":257827537, "licence":"Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright", "osm_type":"relation", "osm_id":167216, "boundingbox":[ "36.2630414", "38.4046019", "34.7392967", "36.4095784" ], "lat":"37.1438001", "lon":"35.4984094", "display_name":"Adana, Mediterranean Region, Turkey", "class":"boundary", "type":"administrative", "importance":0.7673464411826116, "icon":"https://nominatim.openstreetmap.org/ui/mapicons//poi_boundary_administrative.p.20.png" } }, { "x":35.33124175868778, "y":37.02213715, "label":"Adana, Kışla Mahallesi, Yüreğir, Adana, Mediterranean Region, Turkey", "bounds":[ [ 37.0216189, 35.3304464 ], [ 37.0227239, 35.3321308 ] ], "raw":{ "place_id":237840251, "licence":"Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright", "osm_type":"way", "osm_id":754261366, "boundingbox":[ "37.0216189", "37.0227239", "35.3304464", "35.3321308" ], "lat":"37.02213715", "lon":"35.33124175868778", "display_name":"Adana, Kışla Mahallesi, Yüreğir, Adana, Mediterranean Region, Turkey", "class":"leisure", "type":"park", "importance":0.35000000000000003 } }, { "x":35.31912610457783, "y":37.0036959, "label":"Adana, Atatürk Caddesi, Adana, Seyhan, Adana, Mediterranean Region, Turkey", "bounds":[ [ 37.0035359, 35.3188148 ], [ 37.0038454, 35.3194402 ] ], "raw":{ "place_id":317402933, "licence":"Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright", "osm_type":"way", "osm_id":153300717, "boundingbox":[ "37.0035359", "37.0038454", "35.3188148", "35.3194402" ], "lat":"37.0036959", "lon":"35.31912610457783", "display_name":"Adana, Atatürk Caddesi, Adana, Seyhan, Adana, Mediterranean Region, Turkey", "class":"railway", "type":"station", "importance":0.201, "icon":"https://nominatim.openstreetmap.org/ui/mapicons//transport_train_station2.p.20.png" } } ] Quote Link to comment Share on other sites More sharing options...
LCSTech Posted April 9, 2022 Share Posted April 9, 2022 On 7/6/2021 at 6:26 PM, Hayri ASLAN said: Hello 1. Download below file and add into files folder. https://unpkg.com/leaflet-geosearch@3.3.2/dist/bundle.min.js 2. add below code to customfiles files/bundle.min.js 3. add an edit to the form and to search an address run below code procedure TMainForm.UniButton18Click(Sender: TObject); begin with UniMap1, JSInterface do begin JSCode('const provider = new window.GeoSearch.OpenStreetMapProvider();'); JSCallGlobal('var query_promise = provider.search',[JSObject(['query', uniedit4.Text])]); JSCallGlobal('query_promise.then', [JSFunction('e','ajaxRequest('+JSName+', "OnAddressFound", {address: JSON.stringify(e)});')]); end; end; 4. To get the result, add below code to unimap.onAjaxEvent if EventName='OnAddressFound' then begin addressJson:= Params['address'].AsString; end now you will get a JSONArray with found results. You need to parse it. Check below example https://jsfiddle.net/Alechan/L6s4nfwg/ Example addressJSON [ { "x":35.3258349, "y":36.9936175, "label":"Adana, Seyhan, Adana, Mediterranean Region, 01010, Turkey", "bounds":[ [ 36.8336175, 35.1658349 ], [ 37.1536175, 35.4858349 ] ], "raw":{ "place_id":128287, "licence":"Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright", "osm_type":"node", "osm_id":26480399, "boundingbox":[ "36.8336175", "37.1536175", "35.1658349", "35.4858349" ], "lat":"36.9936175", "lon":"35.3258349", "display_name":"Adana, Seyhan, Adana, Mediterranean Region, 01010, Turkey", "class":"place", "type":"city", "importance":0.7673464411826116, "icon":"https://nominatim.openstreetmap.org/ui/mapicons//poi_place_city.p.20.png" } }, { "x":35.4984094, "y":37.1438001, "label":"Adana, Mediterranean Region, Turkey", "bounds":[ [ 36.2630414, 34.7392967 ], [ 38.4046019, 36.4095784 ] ], "raw":{ "place_id":257827537, "licence":"Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright", "osm_type":"relation", "osm_id":167216, "boundingbox":[ "36.2630414", "38.4046019", "34.7392967", "36.4095784" ], "lat":"37.1438001", "lon":"35.4984094", "display_name":"Adana, Mediterranean Region, Turkey", "class":"boundary", "type":"administrative", "importance":0.7673464411826116, "icon":"https://nominatim.openstreetmap.org/ui/mapicons//poi_boundary_administrative.p.20.png" } }, { "x":35.33124175868778, "y":37.02213715, "label":"Adana, Kışla Mahallesi, Yüreğir, Adana, Mediterranean Region, Turkey", "bounds":[ [ 37.0216189, 35.3304464 ], [ 37.0227239, 35.3321308 ] ], "raw":{ "place_id":237840251, "licence":"Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright", "osm_type":"way", "osm_id":754261366, "boundingbox":[ "37.0216189", "37.0227239", "35.3304464", "35.3321308" ], "lat":"37.02213715", "lon":"35.33124175868778", "display_name":"Adana, Kışla Mahallesi, Yüreğir, Adana, Mediterranean Region, Turkey", "class":"leisure", "type":"park", "importance":0.35000000000000003 } }, { "x":35.31912610457783, "y":37.0036959, "label":"Adana, Atatürk Caddesi, Adana, Seyhan, Adana, Mediterranean Region, Turkey", "bounds":[ [ 37.0035359, 35.3188148 ], [ 37.0038454, 35.3194402 ] ], "raw":{ "place_id":317402933, "licence":"Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright", "osm_type":"way", "osm_id":153300717, "boundingbox":[ "37.0035359", "37.0038454", "35.3188148", "35.3194402" ], "lat":"37.0036959", "lon":"35.31912610457783", "display_name":"Adana, Atatürk Caddesi, Adana, Seyhan, Adana, Mediterranean Region, Turkey", "class":"railway", "type":"station", "importance":0.201, "icon":"https://nominatim.openstreetmap.org/ui/mapicons//transport_train_station2.p.20.png" } } ] how to use google provider below with unimap? import { GoogleProvider } from 'leaflet-geosearch'; const provider = new GoogleProvider({ params: { key: '__YOUR_GOOGLE_KEY__', }, }); // add to leaflet import { GeoSearchControl } from 'leaflet-geosearch'; map.addControl( new GeoSearchControl({ provider, }), ); Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted April 9, 2022 Share Posted April 9, 2022 4 hours ago, LCSTech said: how to use google provider below with unimap? import { GoogleProvider } from 'leaflet-geosearch'; const provider = new GoogleProvider({ params: { key: '__YOUR_GOOGLE_KEY__', }, }); // add to leaflet import { GeoSearchControl } from 'leaflet-geosearch'; map.addControl( new GeoSearchControl({ provider, }), ); Hello You can use below code. JSCode('const provider = new window.GeoSearch.GoogleProvider({params: {key: "apikey"}});'); Quote Link to comment Share on other sites More sharing options...
LCSTech Posted April 9, 2022 Share Posted April 9, 2022 5 hours ago, Hayri ASLAN said: Hello You can use below code. JSCode('const provider = new window.GeoSearch.GoogleProvider({params: {key: "apikey"}});'); thankyou ..its work Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.