with scale bar, zoom, search
Created
January 20, 2023 06:25
-
-
Save alshoja/7fa5475757471d6905163b0b9bbb235c to your computer and use it in GitHub Desktop.
leaflet map with place search
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
| <div id="map"></div> | |
| <div class='pointer'><< Click search button</div> | |
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
| // Initialize the map and assign it to a variable for later use | |
| var map = L.map('map', { | |
| // Set latitude and longitude of the map center (required) | |
| center: [37.7833, -122.4167], | |
| // Set the initial zoom level, values 0-18, where 0 is most zoomed-out (required) | |
| zoom: 10 | |
| }); | |
| L.control.scale().addTo(map); | |
| // Create a Tile Layer and add it to the map | |
| //var tiles = new L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png').addTo(map); | |
| L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| var searchControl = new L.esri.Controls.Geosearch().addTo(map); | |
| var results = new L.LayerGroup().addTo(map); | |
| searchControl.on('results', function(data){ | |
| results.clearLayers(); | |
| for (var i = data.results.length - 1; i >= 0; i--) { | |
| results.addLayer(L.marker(data.results[i].latlng)); | |
| } | |
| }); | |
| setTimeout(function(){$('.pointer').fadeOut('slow');},3400); |
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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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
| body, | |
| html { | |
| height: 100%; | |
| font-family:Arial; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; | |
| z-index:100; | |
| } | |
| #mapSearchContainer{ | |
| position:fixed; | |
| top:20px; | |
| right: 40px; | |
| height:30px; | |
| width:180px; | |
| z-index:110; | |
| font-size:10pt; | |
| color:#5d5d5d; | |
| border:solid 1px #bbb; | |
| background-color:#f8f8f8; | |
| } | |
| .pointer{ | |
| position:absolute; | |
| top:86px; | |
| left:60px; | |
| z-index:99999; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment