diff --git a/add-search-to-a-map.md b/add-search-to-a-map.md index ed4286f..6ee6348 100644 --- a/add-search-to-a-map.md +++ b/add-search-to-a-map.md @@ -8,9 +8,7 @@ Through a process known as [geocoding](https://en.wikipedia.org/wiki/Geocoding), In this tutorial, you will learn how to make a map with a search box that allows you to enter addresses and place names and locate them on a map. To complete the tutorial, you should have some familiarity with HTML and JavaScript, although all the source code is provided. You can use any text editor and operating system, but must keep an Internet connection while you are working. -You also need a Mapzen API key, which you can get by following the steps in the Mapzen [developer overview](https://mapzen.com/documentation/overview/). - -To get started making your map, you will need to use a text editor to update the HTML. See some of Mapzen's [suggested text editors](https://mapzen.com/documentation/guides/install-text-editor/) in the developer guide documentation. +You also need a Geocode API key, which you can get by following the steps in the Geocode [developer overview](https://geocode.earth/docs/guides/quickstart/). ## Create an HTML page @@ -64,13 +62,18 @@ A cascading style sheet (CSS) is used to style a webpage, including layout and f The [Leaflet JavaScript library](http://leafletjs.com/) provides tools for building an interactive map for web and mobile devices. Leaflet is extensible, and developers have built additional tools for Leaflet maps. -The [Mapzen.js library](https://www.mapzen.com/documentation/mapzen-js/) simplifies the process of using Mapzen's maps within Leaflet. Mapzen.js contains all the Leaflet functionality, as well as additional tools for working with Mapzen maps and search. +The [Pelias Leaflet Plugin](://github.com/pelias/leaflet-plugin) simplifies the process of using Geocode's maps within Leaflet. It contains all the Leaflet functionality, as well as additional tools for working with the Geocode maps and search. -1. In `index.html`, at the bottom of the `` section, add references to the Mapzen.js CSS and JavaScript files. +1. In `index.html`, at the bottom of the `` section, add references to leaflet and the Geocode.js CSS and JavaScript files. ```html - - + + + + + + + ``` 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. @@ -83,15 +86,20 @@ After adding these, your index.html file should look something like this. My Geocoding Map - - + + + + + + + ``` -Note that you are linking to a website that is serving the Mapzen.js CSS and JavaScript, but you can also [view, download, and contribute to the source code](https://github.com/mapzen/mapzen.js) if you want to access the contents of the library. +Note that you are linking to a website that is serving the CSS and JavaScript, but you can also [view, download, and contribute to the source code](https://github.com/pelias/leaflet-plugin) if you want to access the contents of the library. ## Add a map to the page @@ -116,11 +124,14 @@ To display a Leaflet map on a page, you need a `
` element, which is a conta
``` -3. Directly after the `
`, add this JavaScript code within a ` ``` @@ -128,16 +139,12 @@ To display a Leaflet map on a page, you need a `
` element, which is a conta ```html ``` - `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 `setView: [40.7259, -73.9805]` parameter sets the view point of the map, in decimal degrees (WGS84), at the center of New York City. 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. @@ -151,8 +158,13 @@ Your index.html should look something like this: - - + + + + + + +