forked from osmlab/onosm.org
-
Notifications
You must be signed in to change notification settings - Fork 5
/
active.html
executable file
·112 lines (100 loc) · 3.86 KB
/
active.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
<!DOCTYPE html>
<html lang="it">
<title>Active OnOSM Notes</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/2.1.3/normalize.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@0.7.0/dist/leaflet.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/Leaflet.EditInOSM.css" />
<script src="js/Leaflet.EditInOSM.js"></script>
<script src="js/leaflet-hash.js"></script>
<script type="text/javascript">
//https://code.google.com/p/microajax/
function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest"); C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};
</script>
<link href='https://fonts.googleapis.com/css?family=Ledger&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body{
font-family:Ledger,serif;
}
#mapdiv{
position:fixed;
top:0;
right:0;
width:75%;
bottom:0;
}
#text{
width:25%;
}
@media all and (max-width:600px)
{
#text{
height:25%;
width:100%;
overflow-y:scroll;
}
#mapdiv{
position:fixed;
top:auto;
left:0;
right:0;
height:75%;
width:100%;
bottom:0;
}
}
</style>
</head>
<body>
<div id="text">
</div>
<div id="mapdiv"></div>
<script type="text/javascript">
var lat=41.992,
lon=12.393,
zoom=5;
var osm = new L.TileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {maxZoom: 19, attribution: 'Map Data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'});
var cyclemap = new L.TileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Map Data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'});
var mapquest = new L.TileLayer('https://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {subdomains: '1234', maxZoom: 18, attribution: 'Map Data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'});
var map = new L.Map('mapdiv', {
editInOSMControl: true,
editInOSMControlOptions: {
position: "topright"
},
center: new L.LatLng(lat, lon),
zoom: zoom,
layers: [osm]
});
var baseMaps = {
"Mapnik": osm,
"OpenCycleMap": cyclemap,
"Mapquest Open": mapquest
};
L.control.layers(baseMaps).addTo(map);
var hash = new L.Hash(map);
var ico=L.icon({iconUrl:'img/Open_note_marker.png', iconSize:[25,40],iconAnchor:[12,40],popupAnchor: [0, -40] });
function loadLayer(url)
{
var geojson = L.geoJson(url,{
onEachFeature:function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.id) {
var url="https://www.openstreetmap.org/note/"+feature.properties.id;
layer.bindPopup("URL: <a href='"+url+"'>"+url+"</a><br/>Data: "+feature.properties.date_created);
}
},
pointToLayer: function (feature, latlng) {
var marker=L.marker(latlng, {icon:ico});
return marker;
}
});
map.addLayer(geojson);
}
var httpurl="https://api.openstreetmap.org/api/0.6/notes/search.json?q=su.openstreetmap.it&closed=0&limit=100";
microAjax(httpurl,function (res) {
var feat=JSON.parse(res);
loadLayer(feat);
} );
</script>
</body>
</html>