Completely new coding to me. Plz help

[suyogya138]

I have been using traditional <script> to load geoSearch but it is not working now. I have installed it using npm and don't know what to do. The example in docs is unknown to me. Please helpppppppp. When using <script> and reffering to bundle, css and openstreetmap provider from node module i get following error

jQuery.Deferred exception: L.GeoSearch is undefined
ReferenceError: exports is not defined[Learn More] openStreetMapProvider.js

Im not much used to coding but the <script> used to work then....not now

[smeijer]

If you're not a npm user, you can still use unpkg.com, it is mentioned in the docs under "Installation", but let me explain a bit more. I guess this syntax is more familiar to you:

<link  href="https://unpkg.com/leaflet-geosearch@latest/assets/css/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet-geosearch@latest/dist/bundle.min.js"></script>

// instead of import {} from 'leaflet-geosearch', use the `window` global
var GeoSearchControl = window.GeoSearch.GeoSearchControl;
var OpenStreetMapProvider = window.GeoSearch.OpenStreetMapProvider;

// remaining is the same as in the docs, accept for the var instead of const declarations
var provider = new OpenStreetMapProvider();

var searchControl = new GeoSearchControl({
  provider: provider,
});

var map = new L.Map('map');
map.addControl(searchControl);

[suyogya138]

your solution worked so fine. Thank you for that but can you refer me to some documents from where i can implement npm on my application......

Why does the search bar appears like this????

[smeijer]

I'm not sure; it's working in the demo: http://smeijer.github.io/leaflet-geosearch/#google

Can you check what's going wrong here?

• Did you include the stylesheet?
• Is the geosearch stylesheet loaded as last?
• Perhaps one of your own styles is overriding the geosearch defaults?

[suyogya138]

yes, i included style.css
i had moved my leaflet style to 2nd after leaflet.css
my leaflet version is 1.0.3
but there is no associated search button images in unpkg site when i visited and for all other plugins i am using image folders..

[smeijer]

The library doesn't use images. What browser are you using? Do you have a demo somewhere online that I can take a look?

[suyogya138]

I have uploaded demo in given site..............
http://disaster.suyogyadahal.info.np/

im using Mozilla Firefox

[smeijer]

That demo doesn't include the required stylesheet. It seems that you've copied the styles from the docs folder.

<link  href="https://unpkg.com/leaflet-geosearch@latest/assets/css/leaflet.css" rel="stylesheet" />

Loading this stylesheet into your head, immediately fixes the problem.

I do hover see a problem for when you decide to use the control on the right side of the map. Because the searchbar will run off screen. For now, please add the correct stylesheet, and position the search control to the left side of the screen; or override the styles to fix this problem.

I'll open a issue for the alignment.

[smeijer]

To fix the styling issue when aligning on the right; add this to your general styles:

.leaflet-right .leaflet-control-geosearch form {
  right: 28px;
  left: initial;
  border-radius: 4px 0 0 4px;
  border-left: inherit;
  border-right: none;
}

It will be added to the next version of leaflet-geosearch.

[suyogya138]

Now i have got another problem that when i use bar style for style, the bar is shown when tile is not loaded but the search bar is overlapped by tiles when map tile loads

[smeijer]

Can you please show a demo somewhere again?

[suyogya138]

my host is currently down, so i would like to send you my code in .txt format

I have simply changed style

var searchControl = new GeoSearchControl({
provider: provider,
style: 'bar',
showMarker: false,
retainZoomLevel: false,
position: 'topright',
animateZoom: true
});

sorry for inconvenience

index.txt

[smeijer]

I have deployed a small update to fix the "bar" issue, where the bar was displayed behind the tiles.

Please check this demo: http://codepen.io/smeijer/pen/GrQrMY

[suyogya138]

Big Thanks........... for your timely and accurate solutions......Now I think that this issue can be closed if you wish

[smeijer]

No problem. Please let me know if you find any other difficulties.

[jfajardo]

I solved it with
https://unpkg.com/[email protected]/assets/css/leaflet.css

[prawee]

i fixed by import css from node_modules

[SoranDK]

If you're not a npm user, you can still use unpkg.com, it is mentioned in the docs under "Installation", but let me explain a bit more. I guess this syntax is more familiar to you:

<link  href="https://unpkg.com/leaflet-geosearch@latest/assets/css/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet-geosearch@latest/dist/bundle.min.js"></script>

// instead of import {} from 'leaflet-geosearch', use the `window` global
var GeoSearchControl = window.GeoSearch.GeoSearchControl;
var OpenStreetMapProvider = window.GeoSearch.OpenStreetMapProvider;

// remaining is the same as in the docs, accept for the var instead of const declarations
var provider = new OpenStreetMapProvider();

var searchControl = new GeoSearchControl({
  provider: provider,
});

var map = new L.Map('map');
map.addControl(searchControl);

This really helped me after struggling for 2 days to get it running... I don't have npm access either.

The above solution should really replace the one currently here: https://smeijer.github.io/leaflet-geosearch/#using-a-cdn as that one says to still use import when using CDN and that is what I have tried 2 days without luck ;-)