Better kmz library, remove old library
This commit is contained in:
parent
21e56f9afb
commit
3ecaffeb63
@ -1,6 +1,6 @@
|
|||||||
### Change Log for Node-RED Worldmap
|
### Change Log for Node-RED Worldmap
|
||||||
|
|
||||||
- v2.42.2 - More KML and GEOJson drag drop fixes
|
- v2.42.3 - More KML and GEOJson drag drop fixes
|
||||||
- v2.42.1 - Remove extraneous debug logging, fix KMZ icons
|
- v2.42.1 - Remove extraneous debug logging, fix KMZ icons
|
||||||
- v2.42.0 - Add handling for TAK type spots, waypoints, alerts, sensors. Better KML/KMZ handling.
|
- v2.42.0 - Add handling for TAK type spots, waypoints, alerts, sensors. Better KML/KMZ handling.
|
||||||
- v2.41.0 - Bump leaflet libs to latest stable (1.9.4)
|
- v2.41.0 - Bump leaflet libs to latest stable (1.9.4)
|
||||||
|
@ -13,7 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
|
|||||||
|
|
||||||
### Updates
|
### Updates
|
||||||
|
|
||||||
- v2.42.2 - More KML and GEOJson drag drop fixes
|
- v2.42.3 - More KML and GEOJson drag drop fixes
|
||||||
- v2.42.1 - Remove extraneous debug logging, fix KMZ icons
|
- v2.42.1 - Remove extraneous debug logging, fix KMZ icons
|
||||||
- v2.42.0 - Add handling for TAK type spots, waypoints, alerts, sensors. Better KML/KMZ handling.
|
- v2.42.0 - Add handling for TAK type spots, waypoints, alerts, sensors. Better KML/KMZ handling.
|
||||||
- v2.41.0 - Bump leaflet libs to latest stable (1.9.4)
|
- v2.41.0 - Bump leaflet libs to latest stable (1.9.4)
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "node-red-contrib-web-worldmap",
|
"name": "node-red-contrib-web-worldmap",
|
||||||
"version": "2.42.2",
|
"version": "2.42.3",
|
||||||
"description": "A Node-RED node to provide a web page of a world map for plotting things on.",
|
"description": "A Node-RED node to provide a web page of a world map for plotting things on.",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@turf/bezier-spline": "~6.5.0",
|
"@turf/bezier-spline": "~6.5.0",
|
||||||
|
@ -68,8 +68,8 @@
|
|||||||
<script src="leaflet/leaflet-side-by-side.js"></script>
|
<script src="leaflet/leaflet-side-by-side.js"></script>
|
||||||
<script src="leaflet/OSMBuildings-Leaflet.js"></script>
|
<script src="leaflet/OSMBuildings-Leaflet.js"></script>
|
||||||
<script src="leaflet/leaflet-omnivore.min.js"></script>
|
<script src="leaflet/leaflet-omnivore.min.js"></script>
|
||||||
|
<script src="leaflet/togeojson.umd.js"></script>
|
||||||
<script src="leaflet/leaflet-kmz.js"></script>
|
<script src="leaflet/leaflet-kmz.js"></script>
|
||||||
<!-- <script src="leaflet/L.KML.js"></script> -->
|
|
||||||
<script src="leaflet/leaflet.mousecoordinate.js"></script>
|
<script src="leaflet/leaflet.mousecoordinate.js"></script>
|
||||||
<script src="leaflet/leaflet.latlng-graticule.js"></script>
|
<script src="leaflet/leaflet.latlng-graticule.js"></script>
|
||||||
<script src="leaflet/VectorTileLayer.umd.min.js"></script>
|
<script src="leaflet/VectorTileLayer.umd.min.js"></script>
|
||||||
|
@ -1,470 +0,0 @@
|
|||||||
/*!
|
|
||||||
Copyright (c) 2011-2015, Pavel Shramov, Bruno Bergot - MIT licence
|
|
||||||
*/
|
|
||||||
|
|
||||||
L.KML = L.FeatureGroup.extend({
|
|
||||||
|
|
||||||
initialize: function (kml) {
|
|
||||||
this._kml = kml;
|
|
||||||
this._layers = {};
|
|
||||||
|
|
||||||
if (kml) {
|
|
||||||
this.addKML(kml);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
addKML: function (xml) {
|
|
||||||
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.parseStyles(xml);
|
|
||||||
this.parseStyleMap(xml, style);
|
|
||||||
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); }
|
|
||||||
}
|
|
||||||
el = xml.getElementsByTagName('GroundOverlay');
|
|
||||||
for (var k = 0; k < el.length; k++) {
|
|
||||||
l = this.parseGroundOverlay(el[k]);
|
|
||||||
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.parentNode;
|
|
||||||
while (e && e.tagName !== 'Folder')
|
|
||||||
{
|
|
||||||
e = e.parentNode;
|
|
||||||
}
|
|
||||||
return !e || e === folder;
|
|
||||||
},
|
|
||||||
|
|
||||||
parseStyles: function (xml) {
|
|
||||||
var styles = {};
|
|
||||||
var sl = xml.getElementsByTagName('Style');
|
|
||||||
for (var i=0, len=sl.length; i<len; i++) {
|
|
||||||
var style = this.parseStyle(sl[i]);
|
|
||||||
if (style) {
|
|
||||||
var styleName = '#' + style.id;
|
|
||||||
styles[styleName] = style;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return styles;
|
|
||||||
},
|
|
||||||
|
|
||||||
parseStyle: function (xml) {
|
|
||||||
var style = {}, poptions = {}, ioptions = {}, el, id;
|
|
||||||
|
|
||||||
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(6, 8) + value.substring(4, 6) + value.substring(2, 4);
|
|
||||||
} 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
el = xml.getElementsByTagName('LineStyle');
|
|
||||||
if (el && el[0]) { style = _parse(el[0]); }
|
|
||||||
el = xml.getElementsByTagName('PolyStyle');
|
|
||||||
if (el && el[0]) { poptions = _parse(el[0]); }
|
|
||||||
if (poptions.color) { style.fillColor = poptions.color; }
|
|
||||||
if (poptions.opacity) { style.fillOpacity = poptions.opacity; }
|
|
||||||
el = xml.getElementsByTagName('IconStyle');
|
|
||||||
if (el && el[0]) { ioptions = _parse(el[0]); }
|
|
||||||
if (ioptions.href) {
|
|
||||||
style.icon = new L.KMLIcon({
|
|
||||||
iconUrl: ioptions.href,
|
|
||||||
shadowUrl: null,
|
|
||||||
anchorRef: {x: ioptions.x, y: ioptions.y},
|
|
||||||
anchorType: {x: ioptions.xunits, y: ioptions.yunits}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
el = xml.getElementsByTagName('Data');
|
|
||||||
if (el && el[0]) {
|
|
||||||
var appicon = el[0].getElementsByTagName('value')[0].innerHTML;
|
|
||||||
var sidc;
|
|
||||||
if (appicon.indexOf("APP-6D") === 0) {
|
|
||||||
sidc = appicon.split(':')[1];
|
|
||||||
var mysymbol = new ms.Symbol(sidc);
|
|
||||||
mysymbol = mysymbol.setOptions({ size:20 });
|
|
||||||
style.icon = L.icon({
|
|
||||||
iconUrl: mysymbol.toDataURL(),
|
|
||||||
iconAnchor: [mysymbol.getAnchor().x, mysymbol.getAnchor().y],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
id = xml.getAttribute('id');
|
|
||||||
if (id && style) {
|
|
||||||
style.id = id;
|
|
||||||
}
|
|
||||||
|
|
||||||
return style;
|
|
||||||
},
|
|
||||||
|
|
||||||
parseStyleMap: function (xml, existingStyles) {
|
|
||||||
var sl = xml.getElementsByTagName('StyleMap');
|
|
||||||
|
|
||||||
for (var i = 0; i < sl.length; i++) {
|
|
||||||
var e = sl[i], el;
|
|
||||||
var smKey, smStyleUrl;
|
|
||||||
|
|
||||||
el = e.getElementsByTagName('key');
|
|
||||||
if (el && el[0]) { smKey = el[0].textContent; }
|
|
||||||
el = e.getElementsByTagName('styleUrl');
|
|
||||||
if (el && el[0]) { smStyleUrl = el[0].textContent; }
|
|
||||||
|
|
||||||
if (smKey === 'normal')
|
|
||||||
{
|
|
||||||
existingStyles['#' + e.getAttribute('id')] = existingStyles[smStyleUrl];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
|
||||||
},
|
|
||||||
|
|
||||||
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); }
|
|
||||||
}
|
|
||||||
el = xml.getElementsByTagName('GroundOverlay');
|
|
||||||
for (var k = 0; k < el.length; k++) {
|
|
||||||
if (!this._check_folder(el[k], xml)) { continue; }
|
|
||||||
l = this.parseGroundOverlay(el[k]);
|
|
||||||
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, options) {
|
|
||||||
var h, i, j, k, el, il, opts = 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]) {
|
|
||||||
opts[a] = style[url][a];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
il = place.getElementsByTagName('Style')[0];
|
|
||||||
if (il) {
|
|
||||||
var inlineStyle = this.parseStyle(place);
|
|
||||||
if (inlineStyle) {
|
|
||||||
for (k in inlineStyle) {
|
|
||||||
opts[k] = inlineStyle[k];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var multi = ['MultiGeometry', 'MultiTrack', 'gx:MultiTrack'];
|
|
||||||
for (h in multi) {
|
|
||||||
el = place.getElementsByTagName(multi[h]);
|
|
||||||
for (i = 0; i < el.length; i++) {
|
|
||||||
return this.parsePlacemark(el[i], xml, style, opts);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var layers = [];
|
|
||||||
|
|
||||||
var parse = ['LineString', 'Polygon', 'Point', 'Track', 'gx:Track'];
|
|
||||||
for (j in parse) {
|
|
||||||
var tag = parse[j];
|
|
||||||
el = place.getElementsByTagName(tag);
|
|
||||||
for (i = 0; i < el.length; i++) {
|
|
||||||
var l = this['parse' + tag.replace(/gx:/, '')](el[i], xml, opts);
|
|
||||||
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 && el[0].childNodes.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.on('add', function () {
|
|
||||||
layer.bindPopup('<h2>' + name + '</h2>' + descr, { className: 'kml-popup'});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
},
|
|
||||||
|
|
||||||
parseTrack: function (line, xml, options) {
|
|
||||||
var el = xml.getElementsByTagName('gx:coord');
|
|
||||||
if (el.length === 0) { el = xml.getElementsByTagName('coord'); }
|
|
||||||
var coords = [];
|
|
||||||
for (var j = 0; j < el.length; j++) {
|
|
||||||
coords = coords.concat(this._read_gxcoords(el[j]));
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
},
|
|
||||||
|
|
||||||
_read_gxcoords: function (el) {
|
|
||||||
var text = '', coords = [];
|
|
||||||
text = el.firstChild.nodeValue.split(' ');
|
|
||||||
coords.push(new L.LatLng(text[1], text[0]));
|
|
||||||
return coords;
|
|
||||||
},
|
|
||||||
|
|
||||||
parseGroundOverlay: function (xml) {
|
|
||||||
var latlonbox = xml.getElementsByTagName('LatLonBox')[0];
|
|
||||||
var bounds = new L.LatLngBounds(
|
|
||||||
[
|
|
||||||
latlonbox.getElementsByTagName('south')[0].childNodes[0].nodeValue,
|
|
||||||
latlonbox.getElementsByTagName('west')[0].childNodes[0].nodeValue
|
|
||||||
],
|
|
||||||
[
|
|
||||||
latlonbox.getElementsByTagName('north')[0].childNodes[0].nodeValue,
|
|
||||||
latlonbox.getElementsByTagName('east')[0].childNodes[0].nodeValue
|
|
||||||
]
|
|
||||||
);
|
|
||||||
var attributes = {Icon: true, href: true, color: true};
|
|
||||||
function _parse (xml) {
|
|
||||||
var options = {}, ioptions = {};
|
|
||||||
for (var i = 0; i < xml.childNodes.length; i++) {
|
|
||||||
var e = xml.childNodes[i];
|
|
||||||
var key = e.tagName;
|
|
||||||
if (!attributes[key]) { continue; }
|
|
||||||
var value = e.childNodes[0].nodeValue;
|
|
||||||
if (key === 'Icon') {
|
|
||||||
ioptions = _parse(e);
|
|
||||||
if (ioptions.href) { options.href = ioptions.href; }
|
|
||||||
} else if (key === 'href') {
|
|
||||||
options.href = value;
|
|
||||||
} else if (key === 'color') {
|
|
||||||
options.opacity = parseInt(value.substring(0, 2), 16) / 255.0;
|
|
||||||
options.color = '#' + value.substring(6, 8) + value.substring(4, 6) + value.substring(2, 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return options;
|
|
||||||
}
|
|
||||||
var options = {};
|
|
||||||
options = _parse(xml);
|
|
||||||
if (latlonbox.getElementsByTagName('rotation')[0] !== undefined) {
|
|
||||||
var rotation = latlonbox.getElementsByTagName('rotation')[0].childNodes[0].nodeValue;
|
|
||||||
options.rotation = parseFloat(rotation);
|
|
||||||
}
|
|
||||||
return new L.RotatedImageOverlay(options.href, bounds, {opacity: options.opacity, angle: options.rotation});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
L.KMLIcon = L.Icon.extend({
|
|
||||||
options: {
|
|
||||||
iconSize: [32, 32],
|
|
||||||
iconAnchor: [16, 16],
|
|
||||||
},
|
|
||||||
_setIconStyles: function (img, name) {
|
|
||||||
L.Icon.prototype._setIconStyles.apply(this, [img, name]);
|
|
||||||
if( img.complete ) {
|
|
||||||
this.applyCustomStyles( img )
|
|
||||||
} else {
|
|
||||||
img.onload = this.applyCustomStyles.bind(this,img)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
applyCustomStyles: function(img) {
|
|
||||||
var options = this.options;
|
|
||||||
this.options.popupAnchor = [0,(-0.83*img.height)];
|
|
||||||
if (options.anchorType.x === 'fraction')
|
|
||||||
img.style.marginLeft = (-options.anchorRef.x * img.width) + 'px';
|
|
||||||
if (options.anchorType.y === 'fraction')
|
|
||||||
img.style.marginTop = ((-(1 - options.anchorRef.y) * img.height) + 1) + 'px';
|
|
||||||
if (options.anchorType.x === 'pixels')
|
|
||||||
img.style.marginLeft = (-options.anchorRef.x) + 'px';
|
|
||||||
if (options.anchorType.y === 'pixels')
|
|
||||||
img.style.marginTop = (options.anchorRef.y - img.height + 1) + 'px';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
L.KMLMarker = L.Marker.extend({
|
|
||||||
options: {
|
|
||||||
icon: new L.KMLIcon.Default()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Inspired by https://github.com/bbecquet/Leaflet.PolylineDecorator/tree/master/src
|
|
||||||
L.RotatedImageOverlay = L.ImageOverlay.extend({
|
|
||||||
options: {
|
|
||||||
angle: 0
|
|
||||||
},
|
|
||||||
_reset: function () {
|
|
||||||
L.ImageOverlay.prototype._reset.call(this);
|
|
||||||
this._rotate();
|
|
||||||
},
|
|
||||||
_animateZoom: function (e) {
|
|
||||||
L.ImageOverlay.prototype._animateZoom.call(this, e);
|
|
||||||
this._rotate();
|
|
||||||
},
|
|
||||||
_rotate: function () {
|
|
||||||
if (L.DomUtil.TRANSFORM) {
|
|
||||||
// use the CSS transform rule if available
|
|
||||||
this._image.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
|
|
||||||
} else if (L.Browser.ie) {
|
|
||||||
// fallback for IE6, IE7, IE8
|
|
||||||
var rad = this.options.angle * (Math.PI / 180),
|
|
||||||
costheta = Math.cos(rad),
|
|
||||||
sintheta = Math.sin(rad);
|
|
||||||
this._image.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
|
|
||||||
costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getBounds: function () {
|
|
||||||
return this._bounds;
|
|
||||||
}
|
|
||||||
});
|
|
@ -232,9 +232,10 @@
|
|||||||
var preferCanvas = this._map ? this._map.options.preferCanvas : this.options.preferCanvas;
|
var preferCanvas = this._map ? this._map.options.preferCanvas : this.options.preferCanvas;
|
||||||
// var emptyIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E";
|
// var emptyIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E";
|
||||||
// parse GeoJSON
|
// parse GeoJSON
|
||||||
|
//console.log("DATA",data)
|
||||||
var layer = L.geoJson(data, {
|
var layer = L.geoJson(data, {
|
||||||
pointToLayer: (feature, latlng) => {
|
pointToLayer: (feature, latlng) => {
|
||||||
// console.log("FEAT",feature)
|
//console.log("FEAT",feature)
|
||||||
if (preferCanvas) {
|
if (preferCanvas) {
|
||||||
return L.kmzMarker(latlng, {
|
return L.kmzMarker(latlng, {
|
||||||
iconUrl: data.properties.icons[feature.properties.icon] || feature.properties.icon,
|
iconUrl: data.properties.icons[feature.properties.icon] || feature.properties.icon,
|
||||||
@ -249,12 +250,25 @@
|
|||||||
iconAnchor: [14, 14],
|
iconAnchor: [14, 14],
|
||||||
})
|
})
|
||||||
if (feature.properties && feature.properties.SymbolSpecification) {
|
if (feature.properties && feature.properties.SymbolSpecification) {
|
||||||
var mysymbol = new ms.Symbol(feature.properties.SymbolSpecification.split(':')[1]);
|
var mysymbol;
|
||||||
|
if (feature.properties.MilitaryEchelon && feature.properties.SymbolSpecification.split(':')[0] === "APP-6D") {
|
||||||
|
var a = feature.properties.SymbolSpecification.split(':')[1].substr(0,8);
|
||||||
|
var c = feature.properties.SymbolSpecification.split(':')[1].substr(10);
|
||||||
|
var b = parseInt(feature.properties.MilitaryEchelon) + 10;
|
||||||
|
mysymbol = new ms.Symbol("" + a + b + c);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
mysymbol = new ms.Symbol(feature.properties.SymbolSpecification.split(':')[1]);
|
||||||
|
}
|
||||||
|
|
||||||
mysymbol = mysymbol.setOptions({ size:20 });
|
mysymbol = mysymbol.setOptions({ size:20 });
|
||||||
|
if (feature.properties.name) { mysymbol = mysymbol.setOptions({ uniqueDesignation:feature.properties.name }); }
|
||||||
|
if (feature.properties.MilitaryParentId) { mysymbol = mysymbol.setOptions({ higherFormation:feature.properties.MilitaryParentId }); }
|
||||||
kicon = L.icon({
|
kicon = L.icon({
|
||||||
iconUrl: mysymbol.toDataURL(),
|
iconUrl: mysymbol.toDataURL(),
|
||||||
iconAnchor: [mysymbol.getAnchor().x, mysymbol.getAnchor().y],
|
iconAnchor: [mysymbol.getAnchor().x, mysymbol.getAnchor().y],
|
||||||
});
|
});
|
||||||
|
//console.log("META",mysymbol.getMetadata())
|
||||||
}
|
}
|
||||||
if (kicon.options.iconUrl === undefined) { // No icon found so just use default marker.
|
if (kicon.options.iconUrl === undefined) { // No icon found so just use default marker.
|
||||||
return L.marker(latlng);
|
return L.marker(latlng);
|
||||||
@ -268,7 +282,7 @@
|
|||||||
// TODO: handle L.svg renderer within the L.KMZMarker class?
|
// TODO: handle L.svg renderer within the L.KMZMarker class?
|
||||||
},
|
},
|
||||||
style: (feature) => {
|
style: (feature) => {
|
||||||
// console.log("FEATSTYLE",feature)
|
//console.log("FEATSTYLE",feature)
|
||||||
var styles = {};
|
var styles = {};
|
||||||
var prop = feature.properties;
|
var prop = feature.properties;
|
||||||
|
|
||||||
@ -293,17 +307,17 @@
|
|||||||
return styles;
|
return styles;
|
||||||
},
|
},
|
||||||
onEachFeature: (feature, layer) => {
|
onEachFeature: (feature, layer) => {
|
||||||
// console.log("POP",feature.properties)
|
//console.log("POP",feature.properties)
|
||||||
//if (!this.options.ballon) return;
|
//if (!this.options.ballon) return;
|
||||||
|
|
||||||
var prop = feature.properties;
|
var prop = feature.properties;
|
||||||
var name = (prop.name || "").trim();
|
var name = (prop.name || "").trim();
|
||||||
var desc = (prop.description || "").trim();
|
// var desc = (prop.description || "").trim();
|
||||||
|
var desc = prop.description || "";
|
||||||
|
|
||||||
var p = '<div>';
|
var p = '<div>';
|
||||||
if (name || desc) {
|
if (name || desc) {
|
||||||
// if (this.options.bindPopup) {
|
// if (this.options.bindPopup) {
|
||||||
// p += '<b>' + name + '</b>' + '<br>' + desc + '</div>';
|
p += '<b>' + name + '</b>' + '<br>' + desc + '</div>';
|
||||||
// }
|
// }
|
||||||
if (this.options.bindTooltip) {
|
if (this.options.bindTooltip) {
|
||||||
layer.bindTooltip('<b>' + name + '</b>', {
|
layer.bindTooltip('<b>' + name + '</b>', {
|
||||||
@ -314,18 +328,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
var u = {};
|
var u = {};
|
||||||
if (prop.FeaturePlatformId) { u.FeaturePlatformId = prop.FeaturePlatformId; }
|
if (prop.MilitaryParentId) { u.group = prop.MilitaryParentId; }
|
||||||
if (prop.FeatureAddress) { u.FeatureAddress = prop.FeatureAddress; }
|
if (prop.FeaturePlatformId) { u["platform id"] = prop.FeaturePlatformId; }
|
||||||
if (prop.SymbolSpecification) { u.Symbol = prop.SymbolSpecification; }
|
if (prop.FeatureAddress) { u.address = prop.FeatureAddress; }
|
||||||
if (prop.Speed) { u.Speed = prop.Speed; }
|
if (prop.SymbolSpecification) { u[prop.SymbolSpecification.split(':')[0]] = prop.SymbolSpecification.split(':')[1]; }
|
||||||
if (prop.FeatureLastModified) { u.LastUpdate = prop.FeatureLastModified; }
|
if (prop.Speed && prop.Speed !== "0") { u.speed = prop.Speed; }
|
||||||
if (u.LastUpdate) { u.LastUpdate = (new Date(u.LastUpdate*1000)).toISOString(); }
|
if (prop.FeatureLastModified) { u["last update"] = prop.FeatureLastModified; }
|
||||||
|
if (u["last update"]) { u["last update"] = (new Date(u["last update"]*1000)).toISOString(); }
|
||||||
|
|
||||||
|
p += '<table border="0">';
|
||||||
Object.entries(u).forEach(([key, value]) => {
|
Object.entries(u).forEach(([key, value]) => {
|
||||||
p += '<b>'+key+'</b> : '+value+'<br/>';
|
p += '<tr><td>'+key+'</td><td>'+value+'</td></tr>';
|
||||||
});
|
});
|
||||||
p += '</div>';
|
p += '</table></div>';
|
||||||
if (p !== '<div></div>') {
|
if (p !== '<div><table border="0"></table></div>') {
|
||||||
layer.bindPopup(p);
|
layer.bindPopup(p);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
2
worldmap/leaflet/togeojson.umd.js
Normal file
2
worldmap/leaflet/togeojson.umd.js
Normal file
File diff suppressed because one or more lines are too long
2
worldmap/leaflet/topojson.v1.min.js
vendored
Normal file
2
worldmap/leaflet/topojson.v1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -2144,17 +2144,23 @@ function setMarker(data) {
|
|||||||
if (data.hasOwnProperty("fillColor")) { delete data.fillColor; }
|
if (data.hasOwnProperty("fillColor")) { delete data.fillColor; }
|
||||||
if (data.hasOwnProperty("radius")) { delete data.radius; }
|
if (data.hasOwnProperty("radius")) { delete data.radius; }
|
||||||
if (data.hasOwnProperty("greatcircle")) { delete data.greatcircle; }
|
if (data.hasOwnProperty("greatcircle")) { delete data.greatcircle; }
|
||||||
|
if (data.popup) { words = data.popup; }
|
||||||
|
else {
|
||||||
|
words += '<table>';
|
||||||
for (var i in data) {
|
for (var i in data) {
|
||||||
if ((i != "name") && (i != "length") && (i != "clickable")) {
|
if ((i != "name") && (i != "length") && (i != "clickable")) {
|
||||||
if (typeof data[i] === "object") {
|
if (typeof data[i] === "object") {
|
||||||
words += i +" : "+JSON.stringify(data[i])+"<br/>";
|
//
|
||||||
|
words += '<tr><td>'+ i +'</td><td>' + JSON.stringify(data[i]) + '</td></tr>';
|
||||||
} else {
|
} else {
|
||||||
words += i +" : "+data[i]+"<br/>";
|
// words += i +" : "+data[i]+"<br/>";
|
||||||
|
words += '<tr><td>'+ i +'</td><td>' + data[i] + '</td></tr>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (data.popup) { words = data.popup; }
|
words += '<tr><td>lat, lon</td><td>'+ marker.getLatLng().toString().replace('LatLng(','').replace(')','') + '</td></tr>';
|
||||||
else { words = words + marker.getLatLng().toString().replace('LatLng(','lat, lon : ').replace(')',''); }
|
words += '</table>';
|
||||||
|
}
|
||||||
words = "<b>"+data.name+"</b><br/>" + words; //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
|
words = "<b>"+data.name+"</b><br/>" + words; //"<button style=\"border-radius:4px; float:right; background-color:lightgrey;\" onclick='popped=false;popmark.closePopup();'>X</button><br/>" + words;
|
||||||
var wopt = {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200};
|
var wopt = {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200};
|
||||||
if (words.indexOf('<video ') >=0 || words.indexOf('<img ') >=0 ) { wopt.maxWidth="640"; }
|
if (words.indexOf('<video ') >=0 || words.indexOf('<img ') >=0 ) { wopt.maxWidth="640"; }
|
||||||
@ -2616,28 +2622,6 @@ function doCommand(cmd) {
|
|||||||
return customLayer;
|
return customLayer;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add a new KML overlay layer
|
|
||||||
// if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("kml") ) {
|
|
||||||
// if (overlays.hasOwnProperty(cmd.map.overlay)) {
|
|
||||||
// overlays[cmd.map.overlay].removeFrom(map);
|
|
||||||
// existsalready = true;
|
|
||||||
// }
|
|
||||||
// try {
|
|
||||||
// const parser = new DOMParser();
|
|
||||||
// if (typeof cmd.map.kml === "object") { cmd.map.kml = new TextDecoder().decode(new Uint8Array(cmd.map.kml.data).buffer); }
|
|
||||||
// const kml = parser.parseFromString(cmd.map.kml, 'text/xml');
|
|
||||||
// const track = new L.KML(kml);
|
|
||||||
// overlays[cmd.map.overlay] = track;
|
|
||||||
// } catch(e) { console.log("Failed to parse KML",e) }
|
|
||||||
// if (!existsalready) {
|
|
||||||
// layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
|
|
||||||
// }
|
|
||||||
// if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
|
|
||||||
// overlays[cmd.map.overlay].addTo(map);
|
|
||||||
// }
|
|
||||||
// if (cmd.map.hasOwnProperty("fly") && cmd.map.fly === true) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
|
|
||||||
// else if (cmd.map.hasOwnProperty("fit") && cmd.map.fit === true) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
|
|
||||||
// }
|
|
||||||
// Add a new KMZ overlay layer (or KML)
|
// Add a new KMZ overlay layer (or KML)
|
||||||
//if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("kmz")) {
|
//if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("kmz")) {
|
||||||
if (cmd.map && cmd.map.hasOwnProperty("overlay") && ( cmd.map.hasOwnProperty("kmz") || cmd.map.hasOwnProperty("kml")) ) {
|
if (cmd.map && cmd.map.hasOwnProperty("overlay") && ( cmd.map.hasOwnProperty("kmz") || cmd.map.hasOwnProperty("kml")) ) {
|
||||||
@ -2699,6 +2683,10 @@ function doCommand(cmd) {
|
|||||||
overlays[cmd.map.overlay].removeFrom(map);
|
overlays[cmd.map.overlay].removeFrom(map);
|
||||||
existsalready = true;
|
existsalready = true;
|
||||||
}
|
}
|
||||||
|
// var gp = new DOMParser().parseFromString(cmd.map.gpx, "text/xml");
|
||||||
|
// var json = window.toGeoJSON.gpx(gp);
|
||||||
|
// console.log("j",json)
|
||||||
|
// doGeojson(json.features[0].properties.name,json,json.features[0].properties.type) // DCJ name,geojson,layer,options
|
||||||
overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx, null, custIco());
|
overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx, null, custIco());
|
||||||
if (!existsalready) {
|
if (!existsalready) {
|
||||||
layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
|
layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
|
||||||
@ -2972,6 +2960,8 @@ function doGeojson(n,g,l,o) {
|
|||||||
delete tx["marker-symbol"];
|
delete tx["marker-symbol"];
|
||||||
delete tx["marker-color"];
|
delete tx["marker-color"];
|
||||||
delete tx["marker-size"];
|
delete tx["marker-size"];
|
||||||
|
delete tx["coordinateProperties"];
|
||||||
|
delete tx["_gpxType"]
|
||||||
tx = JSON.stringify(tx,null,' ');
|
tx = JSON.stringify(tx,null,' ');
|
||||||
if ( tx !== "{}") {
|
if ( tx !== "{}") {
|
||||||
l.bindPopup('<pre style="overflow-x: scroll">'+tx.replace(/[\{\}"]/g,'')+'</pre>');
|
l.bindPopup('<pre style="overflow-x: scroll">'+tx.replace(/[\{\}"]/g,'')+'</pre>');
|
||||||
@ -3025,7 +3015,9 @@ function doTAKjson(p) {
|
|||||||
}
|
}
|
||||||
catch(e) { console.log(e); }
|
catch(e) { console.log(e); }
|
||||||
d.alt = Number(p.point.hae) || 9999999;
|
d.alt = Number(p.point.hae) || 9999999;
|
||||||
if (d.alt === 9999999) { delete d.alt; }
|
if (d.alt && d.alt == 9999999) { delete d.alt; }
|
||||||
|
if (d.speed && d.speed == 9999999) { delete d.speed; }
|
||||||
|
if (d.hdg && d.hdg == 9999999) { delete d.hdg; }
|
||||||
handleCoTtypes(d,p);
|
handleCoTtypes(d,p);
|
||||||
setMarker(d);
|
setMarker(d);
|
||||||
}
|
}
|
||||||
@ -3056,7 +3048,9 @@ function doTAKMCjson(p) {
|
|||||||
d.ttl = parseInt((+p.staleTime / 1000) - (+p.sendTime / 1000));
|
d.ttl = parseInt((+p.staleTime / 1000) - (+p.sendTime / 1000));
|
||||||
} catch(e) { console.log(e); }
|
} catch(e) { console.log(e); }
|
||||||
d.alt = p.hae || 9999999;
|
d.alt = p.hae || 9999999;
|
||||||
if (d.alt === 9999999) { delete d.alt; }
|
if (d.alt && d.alt == 9999999) { delete d.alt; }
|
||||||
|
if (d.speed && d.speed == 9999999) { delete d.speed; }
|
||||||
|
if (d.hdg && d.hdg == 9999999) { delete d.hdg; }
|
||||||
handleCoTtypes(d,p);
|
handleCoTtypes(d,p);
|
||||||
setMarker(d);
|
setMarker(d);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user