| /trunk/widget/modules/carto/squelettes/scripts/layer/vector/GPX.Speed.js |
|---|
| New file |
| 0,0 → 1,80 |
| //#include "GPX.js" |
| (function() { |
| function d2h(d) { |
| var hex = '0123456789ABCDEF'; |
| var r = ''; |
| d = Math.floor(d); |
| while (d != 0) { |
| r = hex[d % 16] + r; |
| d = Math.floor(d / 16); |
| } |
| while (r.length < 2) r = '0' + r; |
| return r; |
| } |
| function gradient(color) { |
| // First arc (0, PI) in HSV colorspace |
| function f2h(d) { return d2h(256 * d); } |
| if (color < 0) |
| return "#FF0000"; |
| else if (color < 1.0/3) |
| return "#FF" + f2h(3 * color) + "00"; |
| else if (color < 2.0/3) |
| return "#" + f2h(2 - 3 * color) + "FF00"; |
| else if (color < 1) |
| return "#00FF" + f2h(3 * color - 2); |
| else |
| return "#00FFFF"; |
| }; |
| function gpx2time(s) { |
| // 2011-09-24T12:07:53Z |
| if (s.length != 10 + 1 + 8 + 1) |
| return new Date(); |
| return new Date(s); |
| }; |
| L.GPX.include({ |
| options: { |
| maxSpeed: 110, |
| chunks: 200 |
| }, |
| speedSplitEnable: function(options) { |
| L.Util.setOptions(this, options); |
| return this.on('addline', this.speed_split, this); |
| }, |
| speedSplitDisable: function() { |
| return this.off('addline', this.speed_split, this); |
| }, |
| speed_split: function(e) { |
| var l = e.line.pop(), ll = l.getLatLngs(); |
| var chunk = Math.floor(ll.length / this.options.chunks); |
| if (chunk < 3) chunk = 3; |
| var p = null; |
| for (var i = 0; i < ll.length; i += chunk) { |
| var d = 0, t = null; |
| if (i + chunk > ll.length) |
| chunk = ll.length - i; |
| for (var j = 0; j < chunk; j++) { |
| if (p) d += p.distanceTo(ll[i+j]); |
| p = ll[i + j]; |
| if (!t) t = gpx2time(p.meta.time); |
| } |
| p = ll[i + chunk - 1]; |
| t = (gpx2time(p.meta.time) - t) / (3600 * 1000); |
| var speed = 0.001 * d / t; |
| //console.info('Dist: ' + d + "; Speed: " + speed); |
| var color = gradient(speed / this.options.maxSpeed); |
| var l = new L.Polyline(ll.slice(i, i+chunk+1), {color: color, weight: 2, opacity: 1}); |
| l.bindPopup('Dist: ' + d.toFixed() + "m; Speed: " + speed.toFixed(2) + " km/h"); |
| e.line.push(l); |
| } |
| } |
| }); |
| })(); |
| /trunk/widget/modules/carto/squelettes/scripts/layer/vector/GPX.js |
|---|
| New file |
| 0,0 → 1,115 |
| /*global L: true */ |
| L.GPX = L.FeatureGroup.extend({ |
| initialize: function(gpx, options) { |
| L.Util.setOptions(this, options); |
| this._gpx = gpx; |
| this._layers = {}; |
| if (gpx) { |
| this.addGPX(gpx, options, this.options.async); |
| } |
| }, |
| loadXML: function(url, cb, options, async) { |
| if (async == undefined) async = this.options.async; |
| if (options == undefined) options = this.options; |
| var req = new window.XMLHttpRequest(); |
| req.open('GET', url, async); |
| try { |
| req.overrideMimeType('text/xml'); // unsupported by IE |
| } catch(e) {} |
| req.onreadystatechange = function() { |
| if (req.readyState != 4) return; |
| if(req.status == 200) cb(req.responseXML, options); |
| }; |
| req.send(null); |
| }, |
| addGPX: function(url, options, async) { |
| var _this = this; |
| var cb = function(gpx, options) { _this._addGPX(gpx, options) }; |
| this.loadXML(url, cb, options, async); |
| }, |
| _addGPX: function(gpx, options) { |
| var layers = this.parseGPX(gpx, options); |
| if (!layers) return; |
| this.addLayer(layers); |
| this.fire("loaded"); |
| }, |
| parseGPX: function(xml, options) { |
| var j, i, el, layers = []; |
| var named = false, tags = [['rte','rtept'], ['trkseg','trkpt']]; |
| for (j = 0; j < tags.length; j++) { |
| el = xml.getElementsByTagName(tags[j][0]); |
| for (i = 0; i < el.length; i++) { |
| var l = this.parse_trkseg(el[i], xml, options, tags[j][1]); |
| for (var k = 0; k < l.length; k++) { |
| if (this.parse_name(el[i], l[k])) named = true; |
| layers.push(l[k]); |
| } |
| } |
| } |
| el = xml.getElementsByTagName('wpt'); |
| for (i = 0; i < el.length; i++) { |
| var l = this.parse_wpt(el[i], xml, options); |
| if (!l) continue; |
| if (this.parse_name(el[i], l)) named = true; |
| layers.push(l); |
| } |
| if (!layers.length) return; |
| var layer = layers[0]; |
| if (layers.length > 1) |
| layer = new L.FeatureGroup(layers); |
| //if (!named) this.parse_name(xml, layer); |
| return layer; |
| }, |
| parse_name: function(xml, layer) { |
| var i, el, name, descr=""; |
| el = xml.getElementsByTagName('name'); |
| if (el.length) name = el[0].childNodes[0].nodeValue; |
| el = xml.getElementsByTagName('desc'); |
| for (i = 0; i < el.length; i++) { |
| for (var j = 0; j < el[i].childNodes.length; j++) |
| descr = descr + el[i].childNodes[j].nodeValue; |
| } |
| if (!name) return; |
| var txt = "<h2>" + name + "</h2>" + descr; |
| if (layer && layer._popup === undefined) layer.bindPopup(txt); |
| return txt; |
| }, |
| parse_trkseg: function(line, xml, options, tag) { |
| var el = line.getElementsByTagName(tag); |
| if (!el.length) return []; |
| var coords = []; |
| for (var i = 0; i < el.length; i++) { |
| var ll = new L.LatLng(el[i].getAttribute('lat'), |
| el[i].getAttribute('lon')); |
| ll.meta = {}; |
| for (var j in el[i].childNodes) { |
| var e = el[i].childNodes[j]; |
| if (!e.tagName) continue; |
| ll.meta[e.tagName] = e.textContent; |
| } |
| coords.push(ll); |
| } |
| var l = [new L.Polyline(coords, options)]; |
| this.fire('addline', {line:l}) |
| return l; |
| }, |
| parse_wpt: function(e, xml, options) { |
| var m = new L.Marker(new L.LatLng(e.getAttribute('lat'), |
| e.getAttribute('lon')), options); |
| this.fire('addpoint', {point:m}); |
| return m; |
| } |
| }); |
| /trunk/widget/modules/carto/squelettes/scripts/layer/vector/OSM.js |
|---|
| New file |
| 0,0 → 1,172 |
| /*global L: true */ |
| L.OSM = L.FeatureGroup.extend({ |
| options: { |
| async: true, |
| forceAll: false |
| }, |
| initialize: function(url, options) { |
| L.Util.setOptions(this, options); |
| this._url = url; |
| this._layers = {}; |
| if (url) { |
| this.addXML(url, options, this.options.async); |
| } |
| }, |
| loadXML: function(url, cb, options, async) { |
| if (async == undefined) async = this.options.async; |
| if (options == undefined) options = this.options; |
| var req = new window.XMLHttpRequest(); |
| req.open('GET', url, async); |
| req.overrideMimeType('text/xml'); |
| req.onreadystatechange = function() { |
| if (req.readyState != 4) return; |
| if(req.status == 200) cb(req.responseXML, options); |
| }; |
| req.send(null); |
| }, |
| addXML: function(url, options, async) { |
| var _this = this; |
| var cb = function(xml, options) { _this._addXML(xml, options) }; |
| this.loadXML(url, cb, options, async); |
| }, |
| _addXML: function(xml, options) { |
| var layers = this.parseOSM(xml, options); |
| if (!layers) return; |
| this.addLayer(layers); |
| this.fire("loaded"); |
| }, |
| parseOSM: function(xml, options) { |
| var i, el, ll, layers = []; |
| var nodes = {}; |
| var ways = {}; |
| var named = false; |
| el = xml.getElementsByTagName('node'); |
| for (i = 0; i < el.length; i++) { |
| var l = this.parse_node(el[i], xml, options); |
| if (l == undefined) continue; |
| nodes[l.osmid] = l; |
| if (!this.options.forceAll && !l.tags.length) continue; |
| var m = this.named_node(l, options); |
| if (!ll) ll = m.getLatLng(); |
| if (this.parse_name(m, l, "Node")) named = true; |
| layers.push(m); |
| } |
| el = xml.getElementsByTagName('way'); |
| for (i = 0; i < el.length; i++) { |
| if (i > 10) break; |
| var l = this.parse_way(el[i], nodes, options); |
| if (!l) continue; |
| if (!ll) ll = l.getLatLngs()[0]; |
| if (this.parse_name(l, l, "Way")) named = true; |
| layers.push(l); |
| ways[l.osmid] = l; |
| } |
| el = xml.getElementsByTagName('relation'); |
| for (i = 0; i < el.length; i++) { |
| if (i > 10) break; |
| var l = this.parse_relation(el[i], ways, options); |
| if (!l) continue; |
| if (!ll) ll = l.getLatLngs()[0]; |
| if (this.parse_name(l, l, "Relation")) named = true; |
| layers.push(l); |
| } |
| if (!layers.length) return; |
| var layer = layers[0]; |
| if (layers.length > 1) |
| layer = new L.FeatureGroup(layers); |
| if (!named) this.parse_name(xml, layer); |
| layer.focusPoint = ll; |
| return layer; |
| }, |
| parse_name: function(layer, obj, obj_name) { |
| console.info("parse name"); |
| console.info(this.options); |
| if (!this.options.forceAll) |
| if (!obj.tags || !obj.tags.length) return; |
| var i, txt = "<table>"; |
| for (i = 0; i < obj.tags.length; i++) { |
| var t = obj.tags[i]; |
| txt += "<tr><td>" + t.k + "</td><td>=</td><td>" + t.v + "</td></tr>"; |
| } |
| txt += "</table>" |
| txt = "<h2>" + obj_name + " " + obj.osmid + "</h2>" + txt; |
| if (layer) layer.bindPopup(txt); |
| return txt; |
| }, |
| parse_tags: function(line) { |
| var tags = [], el = line.getElementsByTagName('tag'); |
| for (var i = 0; i < el.length; i++) |
| tags.push({k: el[i].getAttribute('k'), v: el[i].getAttribute('v')}) |
| return tags; |
| }, |
| parse_node: function(e) { |
| var n = { osmid: e.getAttribute('id') |
| , lat:e.getAttribute('lat') |
| , lon:e.getAttribute('lon') |
| } |
| n.ll = new L.LatLng(n.lat, n.lon); |
| n.tags = this.parse_tags(e); |
| return n; |
| }, |
| parse_way: function(line, nodes, options) { |
| var el = line.getElementsByTagName('nd'); |
| if (!el.length) return; |
| var coords = [], tags = []; |
| for (var i = 0; i < el.length; i++) { |
| var ref = el[i].getAttribute('ref'), n = nodes[ref]; |
| if (!n) return; |
| coords.push(n.ll); |
| } |
| var layer = new L.Polyline(coords, options); |
| layer.tags = this.parse_tags(line); |
| layer.osmid = line.getAttribute('id') |
| return layer; |
| }, |
| parse_relation: function(line, ways, options) { |
| var el = line.getElementsByTagName('member'); |
| if (!el.length) return; |
| var rt, coords = [], tags = this.parse_tags(line); |
| for (var i = 0; i < tags.length; i++) |
| if (tags[i].k == "type") rt = tags[i].v; |
| if (rt != "multipolygon" && rt != "boundary" && rt != "waterway") |
| return; |
| for (var i = 0; i < el.length; i++) { |
| var mt = el[i].getAttribute("type"), ref = el[i].getAttribute("ref"); |
| if (mt != "way") continue; |
| var w = ways[ref]; |
| console.info("Way: " + ref + " " + w); |
| if (!w) return; |
| coords.push(w); |
| } |
| console.info("Coords: " + coords.length); |
| if (!coords.length) return; |
| var layer = new L.MultiPolyline(coords, options); |
| layer.tags = this.parse_tags(line); |
| layer.osmid = line.getAttribute('id') |
| return layer; |
| }, |
| named_node: function(node, options) { |
| var marker = new L.Marker(new L.LatLng(node.lat, node.lon), options); |
| return marker; |
| } |
| }); |
| /trunk/widget/modules/carto/squelettes/scripts/layer/vector/KML.js |
|---|
| New file |
| 0,0 → 1,337 |
| /*global L: true */ |
| L.KML = L.FeatureGroup.extend({ |
| options: { |
| async: true |
| }, |
| initialize: function(kml, options) { |
| L.Util.setOptions(this, options); |
| this._kml = kml; |
| this._layers = {}; |
| if (kml) { |
| this.addKML(kml, options, this.options.async); |
| } |
| }, |
| loadXML: function(url, cb, options, async) { |
| if (async == undefined) async = this.options.async; |
| if (options == undefined) options = this.options; |
| var req = new window.XMLHttpRequest(); |
| req.open('GET', url, async); |
| try { |
| req.overrideMimeType('text/xml'); // unsupported by IE |
| } catch(e) {} |
| req.onreadystatechange = function() { |
| if (req.readyState != 4) return; |
| if(req.status == 200) cb(req.responseXML, options); |
| }; |
| req.send(null); |
| }, |
| addKML: function(url, options, async) { |
| var _this = this; |
| var cb = function(gpx, options) { _this._addKML(gpx, options) }; |
| this.loadXML(url, cb, options, async); |
| }, |
| _addKML: function(xml, options) { |
| var layers = L.KML.parseKML(xml); |
| if (!layers || !layers.length) return; |
| for (var i = 0; i < layers.length; i++) |
| { |
| this.fire('addlayer', { |
| layer: layers[i] |
| }); |
| this.addLayer(layers[i]); |
| } |
| this.latLngs = L.KML.getLatLngs(xml); |
| this.fire("loaded"); |
| }, |
| latLngs: [] |
| }); |
| L.Util.extend(L.KML, { |
| parseKML: function (xml) { |
| var style = this.parseStyle(xml); |
| var el = xml.getElementsByTagName("Folder"); |
| var layers = [], l; |
| for (var i = 0; i < el.length; i++) { |
| if (!this._check_folder(el[i])) { continue; } |
| l = this.parseFolder(el[i], style); |
| if (l) { layers.push(l); } |
| } |
| el = xml.getElementsByTagName('Placemark'); |
| for (var j = 0; j < el.length; j++) { |
| if (!this._check_folder(el[j])) { continue; } |
| l = this.parsePlacemark(el[j], xml, style); |
| if (l) { layers.push(l); } |
| } |
| return layers; |
| }, |
| // Return false if e's first parent Folder is not [folder] |
| // - returns true if no parent Folders |
| _check_folder: function (e, folder) { |
| e = e.parentElement; |
| while (e && e.tagName !== "Folder") |
| { |
| e = e.parentElement; |
| } |
| return !e || e === folder; |
| }, |
| parseStyle: function (xml) { |
| var style = {}; |
| var sl = xml.getElementsByTagName("Style"); |
| //for (var i = 0; i < sl.length; i++) { |
| var attributes = {color: true, width: true, Icon: true, href: true, |
| hotSpot: true}; |
| function _parse(xml) { |
| var options = {}; |
| for (var i = 0; i < xml.childNodes.length; i++) { |
| var e = xml.childNodes[i]; |
| var key = e.tagName; |
| if (!attributes[key]) { continue; } |
| if (key === 'hotSpot') |
| { |
| for (var j = 0; j < e.attributes.length; j++) { |
| options[e.attributes[j].name] = e.attributes[j].nodeValue; |
| } |
| } else { |
| var value = e.childNodes[0].nodeValue; |
| if (key === 'color') { |
| options.opacity = parseInt(value.substring(0, 2), 16) / 255.0; |
| options.color = "#" + value.substring(2, 8); |
| } else if (key === 'width') { |
| options.weight = value; |
| } else if (key === 'Icon') { |
| ioptions = _parse(e); |
| if (ioptions.href) { options.href = ioptions.href; } |
| } else if (key === 'href') { |
| options.href = value; |
| } |
| } |
| } |
| return options; |
| } |
| for (var i = 0; i < sl.length; i++) { |
| var e = sl[i], el; |
| var options = {}, poptions = {}, ioptions = {}; |
| el = e.getElementsByTagName("LineStyle"); |
| if (el && el[0]) { options = _parse(el[0]); } |
| el = e.getElementsByTagName("PolyStyle"); |
| if (el && el[0]) { poptions = _parse(el[0]); } |
| if (poptions.color) { options.fillColor = poptions.color; } |
| if (poptions.opacity) { options.fillOpacity = poptions.opacity; } |
| el = e.getElementsByTagName("IconStyle"); |
| if (el && el[0]) { ioptions = _parse(el[0]); } |
| if (ioptions.href) { |
| // save anchor info until the image is loaded |
| options.icon = new L.KMLIcon({ |
| iconUrl: ioptions.href, |
| shadowUrl: null, |
| iconAnchorRef: {x: ioptions.x, y: ioptions.y}, |
| iconAnchorType: {x: ioptions.xunits, y: ioptions.yunits} |
| }); |
| } |
| style['#' + e.getAttribute('id')] = options; |
| } |
| return style; |
| }, |
| parseFolder: function (xml, style) { |
| var el, layers = [], l; |
| el = xml.getElementsByTagName('Folder'); |
| for (var i = 0; i < el.length; i++) { |
| if (!this._check_folder(el[i], xml)) { continue; } |
| l = this.parseFolder(el[i], style); |
| if (l) { layers.push(l); } |
| } |
| el = xml.getElementsByTagName('Placemark'); |
| for (var j = 0; j < el.length; j++) { |
| if (!this._check_folder(el[j], xml)) { continue; } |
| l = this.parsePlacemark(el[j], xml, style); |
| if (l) { layers.push(l); } |
| } |
| if (!layers.length) { return; } |
| if (layers.length === 1) { return layers[0]; } |
| return new L.FeatureGroup(layers); |
| }, |
| parsePlacemark: function (place, xml, style) { |
| var i, j, el, options = {}; |
| el = place.getElementsByTagName('styleUrl'); |
| for (i = 0; i < el.length; i++) { |
| var url = el[i].childNodes[0].nodeValue; |
| for (var a in style[url]) |
| { |
| // for jshint |
| if (true) |
| { |
| options[a] = style[url][a]; |
| } |
| } |
| } |
| var layers = []; |
| var parse = ['LineString', 'Polygon', 'Point']; |
| for (j in parse) { |
| // for jshint |
| if (true) |
| { |
| var tag = parse[j]; |
| el = place.getElementsByTagName(tag); |
| for (i = 0; i < el.length; i++) { |
| var l = this["parse" + tag](el[i], xml, options); |
| if (l) { layers.push(l); } |
| } |
| } |
| } |
| if (!layers.length) { |
| return; |
| } |
| var layer = layers[0]; |
| if (layers.length > 1) { |
| layer = new L.FeatureGroup(layers); |
| } |
| var name, descr = ""; |
| el = place.getElementsByTagName('name'); |
| if (el.length) { |
| name = el[0].childNodes[0].nodeValue; |
| } |
| el = place.getElementsByTagName('description'); |
| for (i = 0; i < el.length; i++) { |
| for (j = 0; j < el[i].childNodes.length; j++) { |
| descr = descr + el[i].childNodes[j].nodeValue; |
| } |
| } |
| if (name) { |
| layer.bindPopup("<h2>" + name + "</h2>" + descr); |
| } |
| return layer; |
| }, |
| parseCoords: function (xml) { |
| var el = xml.getElementsByTagName('coordinates'); |
| return this._read_coords(el[0]); |
| }, |
| parseLineString: function (line, xml, options) { |
| var coords = this.parseCoords(line); |
| if (!coords.length) { return; } |
| return new L.Polyline(coords, options); |
| }, |
| parsePoint: function (line, xml, options) { |
| var el = line.getElementsByTagName('coordinates'); |
| if (!el.length) { |
| return; |
| } |
| var ll = el[0].childNodes[0].nodeValue.split(','); |
| return new L.KMLMarker(new L.LatLng(ll[1], ll[0]), options); |
| }, |
| parsePolygon: function (line, xml, options) { |
| var el, polys = [], inner = [], i, coords; |
| el = line.getElementsByTagName('outerBoundaryIs'); |
| for (i = 0; i < el.length; i++) { |
| coords = this.parseCoords(el[i]); |
| if (coords) { |
| polys.push(coords); |
| } |
| } |
| el = line.getElementsByTagName('innerBoundaryIs'); |
| for (i = 0; i < el.length; i++) { |
| coords = this.parseCoords(el[i]); |
| if (coords) { |
| inner.push(coords); |
| } |
| } |
| if (!polys.length) { |
| return; |
| } |
| if (options.fillColor) { |
| options.fill = true; |
| } |
| if (polys.length === 1) { |
| return new L.Polygon(polys.concat(inner), options); |
| } |
| return new L.MultiPolygon(polys, options); |
| }, |
| getLatLngs: function (xml) { |
| var el = xml.getElementsByTagName('coordinates'); |
| var coords = []; |
| for (var j = 0; j < el.length; j++) { |
| // text might span many childnodes |
| coords = coords.concat(this._read_coords(el[j])); |
| } |
| return coords; |
| }, |
| _read_coords: function (el) { |
| var text = "", coords = [], i; |
| for (i = 0; i < el.childNodes.length; i++) { |
| text = text + el.childNodes[i].nodeValue; |
| } |
| text = text.split(/[\s\n]+/); |
| for (i = 0; i < text.length; i++) { |
| var ll = text[i].split(','); |
| if (ll.length < 2) { |
| continue; |
| } |
| coords.push(new L.LatLng(ll[1], ll[0])); |
| } |
| return coords; |
| } |
| }); |
| L.KMLIcon = L.Icon.extend({ |
| createIcon: function () { |
| var img = this._createIcon('icon'); |
| img.onload = function () { |
| var i = new Image(); |
| i.src = this.src; |
| this.style.width = i.width + 'px'; |
| this.style.height = i.height + 'px'; |
| if (this.anchorType.x === 'UNITS_FRACTION' || this.anchorType.x === 'fraction') { |
| img.style.marginLeft = (-this.anchor.x * i.width) + 'px'; |
| } |
| if (this.anchorType.y === 'UNITS_FRACTION' || this.anchorType.x === 'fraction') { |
| img.style.marginTop = (-(1 - this.anchor.y) * i.height) + 'px'; |
| } |
| this.style.display = ""; |
| }; |
| return img; |
| }, |
| _setIconStyles: function (img, name) { |
| L.Icon.prototype._setIconStyles.apply(this, [img, name]) |
| // save anchor information to the image |
| img.anchor = this.options.iconAnchorRef; |
| img.anchorType = this.options.iconAnchorType; |
| } |
| }); |
| L.KMLMarker = L.Marker.extend({ |
| options: { |
| icon: new L.KMLIcon.Default() |
| } |
| }); |