-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (105 loc) · 4.44 KB
/
index.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
120
121
122
123
124
125
126
127
128
129
130
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="leaflet.css">
<script src="leaflet.js"></script>
</head>
<style>
html,
body,
#map {
width: 100%;
height: 96%;
margin: 0;
padding: 0;
}
.get-markers {
width: 100%;
margin: 10px 0;
}
</style>
<body>
<div id="map" data-mode="">
<input type="hidden" data-map-markers="" value="" name="map-geojson-data" />
</div>
<div>
<input class="get-markers" type="button" value="Get all the Markers" />
</div>
<script src='JqueryLib.js'></script>
<script>
// We’ll add a OSM tile layer to our map
var map = L.map('map').fitWorld();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYXJzNzkxIiwiYSI6ImNqamNud2hhZTQzaTMzcW9nZWRtZWRpOTcifQ.RieUEG-lIcH7GaYak1FvOw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
map.locate({ setView: true, maxZoom: 16 });
var theMarker;
// attaching function on map click
map.on('click', onMapClick);
// Script for adding marker on map click
function onMapClick(e) {
//
var geojsonFeature = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [e.latlng.lat, e.latlng.lng]
}
}
//
lat = e.latlng.lat;
lon = e.latlng.lng;
//console.log("You clicked the map at LAT: " + lat + " and LONG: " + lon);
//Clear existing marker,
if (theMarker != undefined) {
map.removeLayer(theMarker);
};
//Add a marker to show where you clicked.
//theMarker = L.marker(e.latlng, { title: "محل انتخاب شده", alt: "محل انتخاب شده", riseOnHover: true, draggable: true }).bindPopup("<input type='button' value='حذف' class='marker-delete-button'/>").addTo(map);
L.geoJson(geojsonFeature, {
pointToLayer: function (feature, latlng) {
theMarker = L.marker(e.latlng, {
title: "Resource Location",
alt: "Resource Location",
riseOnHover: true,
draggable: true,
}).bindPopup("<input type='button' value='Delete this marker' class='marker-delete-button'/>");
theMarker.on("popupopen", onPopupOpen);
return theMarker;
}
}).addTo(map);
}
// Function to handle delete as well as other events on marker popup open
function onPopupOpen() {
var tempMarker = this;
// To remove marker on click of delete
$(".marker-delete-button:visible").click(function () {
map.removeLayer(tempMarker);
});
}
// getting all the markers at once
function getAllMarkers() {
var allMarkersObjArray = [];//new Array();
var allMarkersGeoJsonArray = [];//new Array();
$.each(map._layers, function (ml) {
//console.log("map._layers[ml].feature = ", map._layers[ml].feature);
if (map._layers[ml].feature) {
allMarkersObjArray.push(this)
allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
}
})
//console.log(allMarkersObjArray);
alert("total Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n Also see your console for object view of this array");
}
$(".get-markers").on("click", getAllMarkers);
</script>
</body>
</html>