-
Notifications
You must be signed in to change notification settings - Fork 21
/
leaflet-center-location-picker.html
119 lines (102 loc) · 3.53 KB
/
leaflet-center-location-picker.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
<title>Leaflet location picker</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
#map {
position: absolute;
bottom: 0;
top: 0;
width: 100%;
}
#title_container {
z-index: 1000;
position: fixed;
background-color: rgba(255,255,255,0.7);
color: black;
padding: 5px;
width: 200px;
bottom: 0;
left:40%;
/*bottom: 10px;*/
margin: auto;
}
#title_container a:link, #title_container a:visited {
color: white;
}
.centered {
z-index: 1000;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
font-size: 50px;
color: white;
text-shadow: 1px 0 0;
}
</style>
</head>
<body>
<div id="title_container">
<small><p>Location: <span id="location">10.857721,76.270475</span>
</p>
</small>
<p align="center">Move the map to your location</p>
</div>
<div class="centered">+</div>
<div id='map'></div>
<script>
// ************************
// INITIAL
const osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
mapboxUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png',
MBAttrib = '© ' + osmLink + ' Contributors & <a href="https://www.mapbox.com/about/maps/">Mapbox</a>';
var MBstreets = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mlpl2d', attribution: MBAttrib, maxZoom: 20}),
MBsatlabel = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mmaa87', attribution: MBAttrib}),
MBsat = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mni8e7', attribution: MBAttrib}),
MBlight = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.m0mmobne', attribution: MBAttrib}),
MBdark = L.tileLayer(mapboxUrl, {id: 'nikhilsheth.jme9hi44', attribution: MBAttrib}),
OsmIndia = L.tileLayer(mapboxUrl, {id: 'openstreetmap.1b68f018', attribution: MBAttrib, maxZoom: 20}),
GithubLight = L.tileLayer('http://{s}.tiles.mapbox.com/v3/github.map-xgq2svrz/{z}/{x}/{y}.png', {attribution: MBAttrib}),
scenic = L.tileLayer('https://api.mapbox.com/styles/v1/nikhilsheth/cj8rdd7wu45nl2sps9teusbbr/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmlraGlsc2hldGgiLCJhIjoiQTREVlJuOCJ9.YpMpVVbkxOFZW-bEq1_LIw', {attribution: MBAttrib}) ;
var baseLayers = {
"OpenStreetMap.IN": OsmIndia,
"Mapbox Streets": MBstreets,
"Mapbox Satellite w/labels": MBsatlabel ,
"Mapbox Light": MBlight,
"Github Light" : GithubLight,
"Mapbox Dark" : MBdark,
"Scenic" : scenic
};
var map = L.map('map', {layers: [MBsatlabel]}).setView([10.857721,76.270475], 10);
var overlays = { };
var layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map);
function onMapClick(e) {
map.panTo(e.latlng);
}
map.on('click', onMapClick);
map.on("moveend", function () {
var x = map.getCenter();
var lat = Math.floor(x.lat * 10000) / 10000 ;
var lng = Math.floor(x.lng * 10000) / 10000 ;
// Here! export these lat and lng variables to your field etc.
document.getElementById('location').innerHTML = lat + ',' + lng;
});
</script>
</body>
</html>