map.jade
3.98 KB
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
extends layout
block content
br
.container
.row
.col.col-lg-2
| Codigo: #{codigo}
.col.col-lg-3
| Consumidor: #{consumidor}
.col.col-lg-3
input.form-control(type='text', id="nome", placeholder='Digite o nome')
.col.col-lg-1
input.btn.btn-primary(type='button', value='Procura', onclick=' relocate_home()')
script.
function relocate_home()
{
location.href = "http://nexusbr.dyndns-ip.com:3000/map/" + nome.value ;
}
br
#map
script(type='text/javascript').
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '',
osm = L.tileLayer(osmUrl,
{attribution: osmAttrib}),
map = L.map('map', {center: new L.LatLng(#{lat},#{lng}), zoom: #{fator_zoom}}),
wmsLayer= L.tileLayer.wms("http://nexusbr.dyndns-ip.com:9080/geoserver/saocaetano/wms", {
layers: 'saocaetano:quadras, saocaetano:redesAgua, saocaetano:noAgua, saocaetano:ramalAgua, saocaetano:ligacaoAgua',
format: 'image/png',
transparent: true,
maxZoom: 23
}),
drawnItems = L.featureGroup().addTo(map);
L.control.layers({
"OSM": osm.addTo(map),
"Google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
attribution: 'google'
})
}, {'Ocorrências': drawnItems, 'Redes': wmsLayer}, { position: 'topright', collapsed: false }).addTo(map);
var marker = L.marker([#{lat},#{lng}]).addTo(map);
marker.bindPopup("<b>#{codigo}</b><br>#{consumidor}").openPopup();
var drawControl = new L.Control.Draw({
draw: {
polygon: false,
polyline: false,
line: false,
circle: false,
rectangle: false,
circlemarker: false,
marker: true
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
// Truncate value based on number of decimals
var _round = function(num, len) {
return Math.round(num*(Math.pow(10, len)))/(Math.pow(10, len));
};
// Helper method to format LatLng object (x.xxxxxx, y.yyyyyy)
var strLatLng = function(latlng) {
var coordenadas = "("+_round(latlng.lat, 2)+", "+_round(latlng.lng, 2)+")";
return coordenadas;
};
// Generate popup content based on layer type
// - Returns HTML string, or null if unknown object
var getPopupContent = function(layer) {
return strLatLng(layer.getLatLng());
};
// Object created - bind popup to layer, add to feature group
map.on(L.Draw.Event.CREATED, function(event) {
console.log ("Entrou no evento Created");
var layer = event.layer;
var content = getPopupContent(layer);
if (content !== null) {
console.log ("Coordendas: " + layer.getLatLng().lat + " - " + layer.getLatLng().lng);
$.post({
data: "teste",
// data: layer.getLatLng().lng + "/lat/" + layer.getLatLng().lat,
url: "http://127.0.0.1/ponto"
});
layer.bindPopup(content);
}
drawnItems.addLayer(layer);
});
// Object(s) edited - update popups
map.on(L.Draw.Event.EDITED, function(event) {
console.log ("Entrou no evento Edited");
var layers = event.layers,
content = null;
layers.eachLayer(function(layer) {
content = getPopupContent(layer);
if (content !== null) {
layer.setPopupContent(content);
}
});
});