2. Save your edits and refresh the browser. The webpage should still appear empty because you have not added any code to interact with these references.
2. Save your edits and refresh the browser. The webpage should still appear empty because you have not added any code to interact with these references.
@ -99,49 +99,47 @@ To display a Leaflet map on a page, you need a `<div>` element, which is a conta
1. At the bottom of the `<head>` section, after the references you added in the earlier steps, add a `<style>` tag and the following attributes to set the size of the map on your webpage. A Leaflet map will not display unless you include a width.
1. At the bottom of the `<head>` section, after the references you added in the earlier steps, add a `<style>` tag and the following attributes to set the size of the map on your webpage. A Leaflet map will not display unless you include a width.
```html
```html
<style>
<style>
#map {
#map {
height: 100%;
height: 100%;
width: 100%;
width: 100%;
position: absolute;
position: absolute;
}
}
html,body{margin: 0; padding: 0}
html,body{margin: 0; padding: 0}
</style>
</style>
```
```
2. At the top of the `<body>` section, add the `<div>`.
2. At the top of the `<body>` section, add the `<div>`.
```html
```html
<divid='map'></div>
<divid='map'></div>
```
```
3. Directly after the `<div>`, add this JavaScript code within a `<script>` tag to set the API key for the map. Use your own API key substituted for the placeholder text of `your-mapzen-api-key`.
```js
3. Directly after the `<div>`, add this JavaScript code within a `<script>` tag to set the API key for the map.
<script>
L.Mapzen.apiKey = "your-mapzen-api-key"; // paste your actual API key here
</script>
```
The `your-mapzen-api-key` text is the Mapzen API key; paste your own API key inside the single quotes. You can get an API key by following the steps in the Mapzen [developer overview](https://mapzen.com/documentation/overview/).
```js
<script>
L.Mapzen.apiKey = "your-mapzen-api-key";
</script>
```
4. Inside the same `<script>` tag, and after the code you just added for the API key, initialize a map.
4. Inside the same `<script>` tag, and after the code you just added for the API key, initialize a map.
```html
```html
<script>
<script>
L.Mapzen.apiKey = "your-mapzen-api-key";
L.Mapzen.apiKey = "your-mapzen-api-key";
var map = L.Mapzen.map("map", {
var map = L.Mapzen.map("map", {
center: [47.61033,-122.31801],
center: [47.61033,-122.31801],
zoom: 16,
zoom: 16,
});
});
</script>
</script>
```
```
`L.xxxxx` is a convention used with the Leaflet API. The `center: [47.61033,-122.31801]` parameter sets the center point of the map, in decimal degrees, at the location of a building at Seattle University.
`L.xxxxx` is a convention used with the Leaflet API. The `center: [47.61033,-122.31801]` parameter sets the center point of the map, in decimal degrees, at the location of a building at Seattle University.
The next line sets the `zoom` level, which is like a map scale or resolution, where a smaller value shows a larger area in less detail, and a larger zoom level value depicts smaller area in great detail.
The next line sets the `zoom` level, which is like a map scale or resolution, where a smaller value shows a larger area in less detail, and a larger zoom level value depicts smaller area in great detail.
4. Save your edits and refresh the browser.
4. Save your edits and refresh the browser.
@ -192,14 +190,14 @@ So far, you have referenced the necessary files, initialized Leaflet with a map
1. Inside the same `<script>` tag, and after the code you just added for the map, initialize a search box and add it to the map with the following code.
1. Inside the same `<script>` tag, and after the code you just added for the map, initialize a search box and add it to the map with the following code.
```js
```js
var geocoder = L.Mapzen.geocoder();
var geocoder = L.Mapzen.geocoder();
geocoder.addTo(map);
geocoder.addTo(map);
```
```
2. Save your edits and refresh the browser. You should see search button in the left corner. If you want to expand the button to a box, you can change this behavior in the geocoder options.
2. Save your edits and refresh the browser. You should see search button in the left corner. If you want to expand the button to a box, you can change this behavior in the geocoder options.
Your `<body>` section should look like this:
Your `<body>` section should look like this:
@ -227,6 +225,7 @@ Now, you will test your search box by finding a few locations. As you type, the
2. In the results list, find the entry for `Seattle University` and click it to zoom and add a point to the map at that location. (The point is only on your map, and does not update OpenStreetMap.)
2. In the results list, find the entry for `Seattle University` and click it to zoom and add a point to the map at that location. (The point is only on your map, and does not update OpenStreetMap.)
3. Search for other addresses or places to experiment with the search function and get an idea of the results it returns. For example, you might try looking for a point of interest in Seattle, your work address, or a city outside the United States.
3. Search for other addresses or places to experiment with the search function and get an idea of the results it returns. For example, you might try looking for a point of interest in Seattle, your work address, or a city outside the United States.
## Customize the geocoder
## Customize the geocoder
@ -243,19 +242,19 @@ Although you will not be using it in this tutorial, [\reverse](https://mapzen.co
1. Add a variable to allow you to set options for the geocoder. Inside the script tags, and above the geocoder line, add this block.
1. Add a variable to allow you to set options for the geocoder. Inside the script tags, and above the geocoder line, add this block.
```js
```js
var geocoderOptions = {
var geocoderOptions = {
autocomplete: false
autocomplete: false
};
};
```
```
You are setting `autocomplete: false` to specify that the Search box should not suggest potential text matches as you type. Autocomplete is enabled by default, so adding this means that you will turn it off.
You are setting `autocomplete: false` to specify that the Search box should not suggest potential text matches as you type. Autocomplete is enabled by default, so adding this means that you will turn it off.
2. Modify the existing geocoder code to pass in the `geocoderOptions` you set.
2. Modify the existing geocoder code to pass in the `geocoderOptions` you set.
```js
```js
var geocoder = L.Mapzen.geocoder(geocoderOptions);
var geocoder = L.Mapzen.geocoder(geocoderOptions);
```
```
3. Save your edits and refresh the browser.
3. Save your edits and refresh the browser.
4. Type `901 12th Avenue` in the Search box and press Enter. Notice now that the matching search results are not listed until you press the Enter key.
4. Type `901 12th Avenue` in the Search box and press Enter. Notice now that the matching search results are not listed until you press the Enter key.
@ -292,14 +291,14 @@ As you were searching, you might have noticed results that looked similar. Mapze
1. Within the `geocoderOptions` block, add the `params:` list and a parameter for `sources:`. Be sure to add a `,` at the end of the `autocomplete: false` line.
1. Within the `geocoderOptions` block, add the `params:` list and a parameter for `sources:`. Be sure to add a `,` at the end of the `autocomplete: false` line.
```js
```js
var geocoderOptions = {
var geocoderOptions = {
autocomplete: false,
autocomplete: false,
params: {
params: {
sources: 'osm'
sources: 'osm'
}
}
};
};
```
```
2. Save your edits and refresh the browser.
2. Save your edits and refresh the browser.
3. Search for `901 12th Avenue` again. Try searching city names, such as `Vancouver`, as you continue to experiment with the geocoder.
3. Search for `901 12th Avenue` again. Try searching city names, such as `Vancouver`, as you continue to experiment with the geocoder.
@ -312,15 +311,15 @@ Mapzen.js automatically provides a [focus point](https://mapzen.com/documentatio
1. Within the `geocoderOptions` block, add add a `,` at the end of the `sources: 'osm'` line and then a parameter for `'boundary.country': 'USA'` on the next line. You need to enclose with single quotation marks any parameter names that use the dot notation (such as `boundary.country`) to make sure JavaScript can parse the text correctly.
1. Within the `geocoderOptions` block, add add a `,` at the end of the `sources: 'osm'` line and then a parameter for `'boundary.country': 'USA'` on the next line. You need to enclose with single quotation marks any parameter names that use the dot notation (such as `boundary.country`) to make sure JavaScript can parse the text correctly.
```js
```js
var geocoderOptions = {
var geocoderOptions = {
autocomplete: false,
autocomplete: false,
params: {
params: {
sources: 'osm',
sources: 'osm',
'boundary.country': 'USA'
'boundary.country': 'USA'
}
}
};
};
```
```
3. Save your edits and refresh the browser.
3. Save your edits and refresh the browser.
4. Search again for city names in the Search box. Notice that you only see results from within the United States. For example, `Vancouver` in Canada is no longer listed, but you can find the city in Washington.
4. Search again for city names in the Search box. Notice that you only see results from within the United States. For example, `Vancouver` in Canada is no longer listed, but you can find the city in Washington.
@ -336,16 +335,16 @@ You can review the [Mapzen Search documentation](https://mapzen.com/documentatio
1. Within the `geocoderOptions` block, add add a `,` at the end of the `'boundary.country: 'USA'` line and then a parameter for `layers: 'address,venue'` on the next line.
1. Within the `geocoderOptions` block, add add a `,` at the end of the `'boundary.country: 'USA'` line and then a parameter for `layers: 'address,venue'` on the next line.
```js
```js
var geocoderOptions = {
var geocoderOptions = {
autocomplete: false,
autocomplete: false,
params: {
params: {
sources: 'osm',
sources: 'osm',
'boundary.country': 'USA',
'boundary.country': 'USA',
layers: 'address,venue'
layers: 'address,venue'
}
}
};
};
```
```
2. Save your edits and refresh the browser.
2. Save your edits and refresh the browser.
3. Search for `102 Pike Street, Seattle, WA 98101` (the first Starbucks) and press Enter. Some other places you can try include `Starbucks`, `400 Broad Street` (the address of the Space Needle), `Space Needle`, and `University of Washington`.
3. Search for `102 Pike Street, Seattle, WA 98101` (the first Starbucks) and press Enter. Some other places you can try include `Starbucks`, `400 Broad Street` (the address of the Space Needle), `Space Needle`, and `University of Washington`.
@ -359,7 +358,7 @@ Because the geocoder is still under development and considered experimental, if
## Completed HTML for this tutorial
## Completed HTML for this tutorial
You can refer to this HTML if you want to review your work or troubleshoot an error. You will need to substitute your own API key for the placeholder text in the source code.
You can refer to this HTML if you want to review your work or troubleshoot an error.
Rhonda Glennon
8 years ago
committed by
GitHub