Created
April 6, 2015 16:45
-
-
Save ebrelsford/3189748ce7c506ac4ddf to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/nefaga
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| input[name=search] { | |
| font-size: 36px; | |
| position: absolute; | |
| top: 10px; | |
| left: 50px; | |
| z-index: 5000; | |
| width: 85% | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"> | |
| <input type="search" name="search" placeholder="Search for something" /> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| function callNominatim(query, map, geoJsonLayer) { | |
| // This function should call Nominatim using $.getJSON | |
| // Once it receives a response, update the center point | |
| // of the map | |
| // http://nominatim.openstreetmap.org/search?format=jsonv2&q=Higgins%20Hall%20Brooklyn | |
| var url = 'http://nominatim.openstreetmap.org/search'; | |
| url += '?' + $.param({ | |
| q: query, | |
| format: 'jsonv2', | |
| polygon_geojson: 1 | |
| }); | |
| $.getJSON(url, function (data) { | |
| map.setView([data[0].lat, data[0].lon], 18); | |
| geoJsonLayer.addData(data[0].geojson); | |
| }); | |
| } | |
| $(document).ready(function () { | |
| // Typical Leaflet setup | |
| var map = L.map('map').setView([40.731649,-73.977814], 10); | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.', | |
| maxZoom: 18 | |
| }).addTo(map); | |
| // Create placeholder GeoJSON layer | |
| var geoJsonLayer = L.geoJson(null).addTo(map); | |
| // Add an event handler to the search input. When [enter] is | |
| // pressed, call Nominatim to get the location searched for | |
| $(':input[type=search]').keydown(function (e) { | |
| if (e.which === 13) { | |
| callNominatim($(this).val(), map, geoJsonLayer); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="map"> | |
| <input type="search" name="search" placeholder="Search for something" /> | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">html, body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| input[name=search] { | |
| font-size: 36px; | |
| position: absolute; | |
| top: 10px; | |
| left: 50px; | |
| z-index: 5000; | |
| width: 85% | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function callNominatim(query, map, geoJsonLayer) { | |
| // This function should call Nominatim using $.getJSON | |
| // Once it receives a response, update the center point | |
| // of the map | |
| // http://nominatim.openstreetmap.org/search?format=jsonv2&q=Higgins%20Hall%20Brooklyn | |
| var url = 'http://nominatim.openstreetmap.org/search'; | |
| url += '?' + $.param({ | |
| q: query, | |
| format: 'jsonv2', | |
| polygon_geojson: 1 | |
| }); | |
| $.getJSON(url, function (data) { | |
| map.setView([data[0].lat, data[0].lon], 18); | |
| geoJsonLayer.addData(data[0].geojson); | |
| }); | |
| } | |
| $(document).ready(function () { | |
| // Typical Leaflet setup | |
| var map = L.map('map').setView([40.731649,-73.977814], 10); | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.', | |
| maxZoom: 18 | |
| }).addTo(map); | |
| // Create placeholder GeoJSON layer | |
| var geoJsonLayer = L.geoJson(null).addTo(map); | |
| // Add an event handler to the search input. When [enter] is | |
| // pressed, call Nominatim to get the location searched for | |
| $(':input[type=search]').keydown(function (e) { | |
| if (e.which === 13) { | |
| callNominatim($(this).val(), map, geoJsonLayer); | |
| } | |
| }); | |
| });</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| input[name=search] { | |
| font-size: 36px; | |
| position: absolute; | |
| top: 10px; | |
| left: 50px; | |
| z-index: 5000; | |
| width: 85% | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function callNominatim(query, map, geoJsonLayer) { | |
| // This function should call Nominatim using $.getJSON | |
| // Once it receives a response, update the center point | |
| // of the map | |
| // http://nominatim.openstreetmap.org/search?format=jsonv2&q=Higgins%20Hall%20Brooklyn | |
| var url = 'http://nominatim.openstreetmap.org/search'; | |
| url += '?' + $.param({ | |
| q: query, | |
| format: 'jsonv2', | |
| polygon_geojson: 1 | |
| }); | |
| $.getJSON(url, function (data) { | |
| map.setView([data[0].lat, data[0].lon], 18); | |
| geoJsonLayer.addData(data[0].geojson); | |
| }); | |
| } | |
| $(document).ready(function () { | |
| // Typical Leaflet setup | |
| var map = L.map('map').setView([40.731649,-73.977814], 10); | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.', | |
| maxZoom: 18 | |
| }).addTo(map); | |
| // Create placeholder GeoJSON layer | |
| var geoJsonLayer = L.geoJson(null).addTo(map); | |
| // Add an event handler to the search input. When [enter] is | |
| // pressed, call Nominatim to get the location searched for | |
| $(':input[type=search]').keydown(function (e) { | |
| if (e.which === 13) { | |
| callNominatim($(this).val(), map, geoJsonLayer); | |
| } | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment