pelias
/
documentation
mirror of https://github.com/pelias/documentation.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

update url to icons on cdnjs

pull/85/head
rmglennon 9 years ago
parent
5e44d2a988
commit
101c416143
1 changed files with 25 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      add-search-to-a-map.md

45
add-search-to-a-map.md
Unescape View File

@ -192,10 +192,13 @@ So far, you have referenced the necessary files, initialized Leaflet with a map
2. Inside the same `<script>` tag, start a new line after the `}).addTo(map);` line. Initialize a search box with the following code and your own API key substituted for the placeholder text of `search-xxxxxx`. 2. Inside the same `<script>` tag, start a new line after the `}).addTo(map);` line. Initialize a search box with the following code and your own API key substituted for the placeholder text of `search-xxxxxx`.
```js ```js
var geocoder = L.control.geocoder('search-xxxxxx').addTo(map); L.control.geocoder('search-xxxxxx', {
pointIcon: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/images/point_icon.png',
polygonIcon: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/images/polygon_icon.png'
}).addTo(map);
``` ```
The `search-xxxxxx` text is the Mapzen Search API key. Paste your own API key inside the single quotes. The `search-xxxxxx` text is the Mapzen Search API key; paste your own API key inside the single quotes. The other lines set the path to the icon images that display next to places in the search result list.
3. Save your edits and refresh the browser. You should see a small magnifying glass icon in the left corner, near the zoom controls. 3. Save your edits and refresh the browser. You should see a small magnifying glass icon in the left corner, near the zoom controls.
@ -216,10 +219,13 @@ Your `<body>` section should look like this:
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>' attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map); }).addTo(map);
var geocoder = L.control.geocoder('search-xxxxxx').addTo(map); L.control.geocoder('search-xxxxxx', {
pointIcon: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/images/point_icon.png',
polygonIcon: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/images/polygon_icon.png'
}).addTo(map);
</script> </script>
</body> </body>
[...]] [...]
``` ```
## Search for places on the map ## Search for places on the map
@ -249,36 +255,35 @@ You can refer to this HTML if you want to review your work or troubleshoot an er
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>My Geocoding Map</title> <title>My Geocoding Map</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/leaflet-geocoder-mapzen.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/leaflet-geocoder-mapzen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/leaflet-geocoder-mapzen.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/leaflet-geocoder-mapzen.js"></script>
<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>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<script> <script>
var map = L.map('map').setView([37.804146, -122.275045], 16); var map = L.map('map').setView([37.804146, -122.275045], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>' attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map); }).addTo(map);
//Use your own API key in place of search-xxxxxx. Get a key at mapzen.com/developers. //Use your own API key in place of search-xxxxxx. Get a key at mapzen.com/developers.
var geocoder = L.control.geocoder('search-xxxxxx').addTo(map); L.control.geocoder('search-xxxxxx', {
pointIcon: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/images/point_icon.png',
polygonIcon: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.3.0/images/polygon_icon.png'
}).addTo(map);
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save