Add search control to LEL's basic usage

[crisner]

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

• 🙋 Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

• 📝 Update the file AllLayers.js in the leaflet-environmental-layers repository.

See this page for some help in taking your first steps!

The search control is added only to the demo page. It needs to be added so that it can be used when LEL is instantiated elsewhere.

Step 1:

Add the following:

      // Collapsible search control
      new L.Control.GPlaceAutocomplete({
        position: 'topleft',
        collapsed_mode: true,
        callback: function(place){
          var loc = place.geometry.location;
          map.setView( [loc.lat(), loc.lng()], 18);
        }
      }).addTo(map);

here above L213:

leaflet-environmental-layers/src/AllLayers.js

Lines 212 to 219 in 4109b58

	for (let layer of this.options.layers.include) {
	if (!this.options.addLayersToMap) {
	return;
	}
	map.addLayer(this.overlayMaps[layer]);
	}

Step 2:

Add the following:

<script src="../node_modules/leaflet-google-places-autocomplete/src/js/leaflet-gplaces-autocomplete.js"></script>
<link rel="stylesheet" href="../node_modules/leaflet-google-places-autocomplete/src/css/leaflet-gplaces-autocomplete.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOLUQngEmJv0_zcG1xkGq-CXIPpLQY8iQ&libraries=places"></script>

to the head in the following files:

leaflet-environmental-layers/example/unearthing-pvd.html

Line 43 in 4109b58

<link rel="stylesheet" href="styles.css">

leaflet-environmental-layers/example/oneLinerCodeExample.html

Line 50 in 4109b58

<link rel="stylesheet" href="styles.css">

• 💾 Commit your changes

• 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can also edit files directly in your browser and open a pull request from there.

• 🏁 Done Ask in comments for a review :)

Please keep us updated

💬⏰ - We encourage contributors to be respectful to the community and provide an update within a week of claiming a first-timers-only issue. We're happy to keep it assigned to you as long as you need if you update us with a request for more time or help, but if we don't see any activity a week after you claim it we may reassign it to give someone else a chance. Thank you in advance!

If this happens to you, don't sweat it! Grab another open issue.

Is someone else already working on this?

🔗- We encourage contributors to link to the original issue in their pull request so all users can easily see if someone's already started on it.

👥- If someone seems stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

🤔❓ Questions?

Leave a comment below!

[neelesh17]

Can I work on this issue?

[crisner]

Sure @neelesh17! Please, go ahead.

[robin-natale]

I’ll be happy to take this FTO on board!! Can i be assigned? Also would it be possible to have some guidance on how to do first steps ?

[crisner]

Yes! You could start by forking this repository and cloning it to your machine. Create a branch from master and make the changes shown here. Do run npm install and then grunt build and check out the example pages. You will need to have grunt cli installed globally to run grunt commands. Good luck!

[robin-natale]

@crisner I am not sure if I did managed it properly but I have created a PR now. Let me know if that worked or I just made a bit of a mess. I am pretty new to GitHub and it's all a bit unfamiliar at the moment!

[crisner]

No issues @robin-natale. Thank you for working on this! I'll take a look at your PR. 😃

[robin-natale]

@crisner Thanks to you for all the direction given :) Give me a shout in case of any further help needed 👍

[crisner]

@robin-natale, we have a lot of issues that need help. You could dive into the code and once you feel you are ready, feel free to claim an issue to work on. You can start working on them once you get the green light. 😄

[robin-natale]

@crisner Sounds great to dive in on some other issues and into code. My only problem is that I still find some troubles into merging and creating PR from different branches. Where would it be the best place to ask for some advice and clarifications on this? many thanks 😄

[crisner]

@robin-natale, I had made a comment about the same here #391 (comment) 😃