Showing maps and geolocation by address or other criteria to your web page using the library Leaflet.js and plugin Leaflet.GeoSearch
For map displaying and geolocation by address or other criteria on your web page you should download JavaScript Leaflet and plugin Leaflet.GeoSearch.
You can download the latest version of Leaflet on the site http://leafletjs.com/ using the link http://leafletjs.com/download.html
For downloading the original version of Leaflet.GeoSearch use links https://github.com/smeijer/L.GeoSearch or https://github.com/smeijer/L.GeoSearch/archive/master.zip
The standard archive Leaflet.GeoSearch is contained the search on the servers Google, OpenStreetMap, Nokia and others. You can easily expand this list using the examples.
The set of geolocation server for Leaflet.GeoSearch have the form:
- L.GeoSearch.Provider.Esri
- L.GeoSearch.Provider.Google
- L.GeoSearch.Provider.OpenStreetMap
Using
Example of use OpenStreetMap
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.OpenStreetMap()
}).addTo(map);
Example of use Google
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.Google()
}).addTo(map);
Example of use GISFile for the layer
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'Layer name'})
}).addTo(map);
Example of use GISFile for the project (maps)
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.GISFile( {type:'map', name:'Name of the project'})
}).addTo(map);
You can fill in and other customizable parameters, such as: the installation position of panel search and displaying marker.
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.OpenStreetMap(),
position: 'topcenter',
showMarker: true
}).addTo(map);
Selecting a server geocoding
The variant which has been considered early provides using of only one supplier for the search. Presently, the service provides the possibility to use several services for searching.
For having a possibility to choose a server download and replace the Java script http://gisfile.com/js/l.control.geosearch.js and CSS file http://gisfile.com/css/l.geosearch.css
In the new version the parameter providers - the list of suppliers of geocoding and selected - the active of server defaults in the list has been added.
new L.Control.GeoSearch({
selected: 0,
providers: [{name:'GISFile', provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'world'})},
{name:'Google', provider: new L.GeoSearch.Provider.Google()},
{name:'OpenStreetMap', provider: new L.GeoSearch.Provider.OpenStreetMap()}]
}).addTo(map);
Updated the script can be used as the original (the examples above).
Example of use
An example of the map display
<html>
<head>
<link rel="stylesheet" href="leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="leaflet.ie.css" type="text/css" >
<![endif]-->
<script src="leaflet.js"></script>
<script src="l.control.geosearch.js"></script>
<link rel="stylesheet" href="l.geosearch.css" />
<script src="l.geosearch.provider.openstreetmap.js"></script>
<script src="l.geosearch.provider.google.js"></script>
<script src="l.geosearch.provider.gisfile.js"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<script type="text/javascript">
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
new L.Control.GeoSearch({
searchLabel: 'The search string',
notFoundMessage: 'Not found',
position: 'topcenter',
showMarker: true,
selected: 0,
providers: [{name:'GISFile', provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'world'})},
{name:'Google', provider: new L.GeoSearch.Provider.Google()},
{name:'OpenStreetMap', provider: new L.GeoSearch.Provider.OpenStreetMap()}]
}).addTo(map);
</body>
</html>