Fixed issue where open layers did not work on some browsers
Ylian Saint-Hilaire committed
Sep 7, 2017 at 11:16 UTC
b6c7403653f4bd4dd8b430a6bd7f25c7607a0249
1 file changed
+93
-86
views/default.handlebars
+93
-86
@@ -122,7 +122,7 @@
122
<select id=viewselect onchange=onDeviceViewChange()>
123
<option value=1>3 wide</option>
124
<option value=2>List</option>
125
- <option value=3>Map</option>
125
+ <option id=viewselectmapoption value=3>Map</option>
126
</select>
127
</div>
128
<div style=float:right id=devListToolbarSort>
@@ -1662,8 +1662,9 @@
1662
1663
// Add a feature for every Node and change style if connection status changes
1664
function updateMapMarkers(selectedMesh) {
1665
+ if ((xxmap != null) && (xxmap.map == null)) loadmap();
1666
+ if (xxmap == null) return;
1667
var boundingBox = null;
1666
- if (xxmap.map == null) loadmap();
1668
for (var i in nodes) {
1669
var loc = map_parseNodeLoc(nodes[i]);
1670
if (loc) { // Draw markers for devices with locations
@@ -1724,93 +1725,99 @@
1725
1726
// Load the entire map
1727
function loadmap() {
1727
- // Initialize a Source Vector
1728
- xxmap.markersSource = new ol.source.Vector();
1729
-
1730
- xxmap.markersLayer = new ol.layer.Vector({
1731
- source: xxmap.markersSource
1732
- });
1733
-
1734
- // Create a tile and use OSM source
1735
- xxmap.mapLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
1736
-
1737
- xxmap.mapView = new ol.View({ // Set the initial view
1738
- center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
1739
- zoom: 2,
1740
- minZoom: 2,
1741
- maxZoom: 20,
1742
- extent: ol.proj.transformExtent([-100000, -69.55, 100000, 69.55], 'EPSG:4326', 'EPSG:3857')
1743
- });
1744
-
1745
- xxmap.map = new ol.Map({
1746
- target: 'xdevicesmap',
1747
- layers: [xxmap.mapLayer, xxmap.markersLayer],
1748
- view: xxmap.mapView
1749
- });
1750
-
1751
- xxmap.map.addOverlay(map_cm_popup);
1752
-
1753
- // Goto information tab if a user clicks on a feature
1754
- xxmap.map.on('click', function(evt) {
1755
- var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) { return feat; });
1756
- if (feature) {
1757
- var nodeid = feature.getId();
1758
- if (nodeid != undefined) { gotoDevice(nodeid, 10); } // Goto general info tab
1759
- else { // For pointer
1760
- var nodeFeatgoto = getCorrespondingFeature(feature); gotoDevice(nodeFeatgoto.getId(), 10);
1728
+ if (xxmap == null) return;
1729
+ try {
1730
+ // Initialize a Source Vector
1731
+ xxmap.markersSource = new ol.source.Vector();
1732
+
1733
+ xxmap.markersLayer = new ol.layer.Vector({
1734
+ source: xxmap.markersSource
1735
+ });
1736
+
1737
+ // Create a tile and use OSM source
1738
+ xxmap.mapLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
1739
+
1740
+ xxmap.mapView = new ol.View({ // Set the initial view
1741
+ center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
1742
+ zoom: 2,
1743
+ minZoom: 2,
1744
+ maxZoom: 20,
1745
+ extent: ol.proj.transformExtent([-100000, -69.55, 100000, 69.55], 'EPSG:4326', 'EPSG:3857')
1746
+ });
1747
+
1748
+ xxmap.map = new ol.Map({
1749
+ target: 'xdevicesmap',
1750
+ layers: [xxmap.mapLayer, xxmap.markersLayer],
1751
+ view: xxmap.mapView
1752
+ });
1753
+
1754
+ xxmap.map.addOverlay(map_cm_popup);
1755
+
1756
+ // Goto information tab if a user clicks on a feature
1757
+ xxmap.map.on('click', function(evt) {
1758
+ var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) { return feat; });
1759
+ if (feature) {
1760
+ var nodeid = feature.getId();
1761
+ if (nodeid != undefined) { gotoDevice(nodeid, 10); } // Goto general info tab
1762
+ else { // For pointer
1763
+ var nodeFeatgoto = getCorrespondingFeature(feature); gotoDevice(nodeFeatgoto.getId(), 10);
1764
+ }
1765
}
1762
- }
1763
- });
1764
-
1765
- // On hover feature show the name of the node. Also add pointer style
1766
- xxmap.map.on('pointermove', function(evt) {
1767
- var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) { return feat; });
1768
- if (feature) {
1769
- xxmap.map.getTargetElement().style.cursor = 'pointer';
1770
- var coord = feature.getGeometry().getCoordinates();
1771
- // map_cm_popup.setPosition(evt.coordinate);
1772
- map_cm_popup.setPosition(coord);
1773
- featid = feature.getId();
1774
- if (featid) {
1775
- QH('xmap-info-window', feature.get('name'));
1766
+ });
1767
+
1768
+ // On hover feature show the name of the node. Also add pointer style
1769
+ xxmap.map.on('pointermove', function(evt) {
1770
+ var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) { return feat; });
1771
+ if (feature) {
1772
+ xxmap.map.getTargetElement().style.cursor = 'pointer';
1773
+ var coord = feature.getGeometry().getCoordinates();
1774
+ // map_cm_popup.setPosition(evt.coordinate);
1775
+ map_cm_popup.setPosition(coord);
1776
+ featid = feature.getId();
1777
+ if (featid) {
1778
+ QH('xmap-info-window', feature.get('name'));
1779
+ } else {
1780
+ var nodeFeat = getCorrespondingFeature(feature); // Return the node feature associated to pointer.
1781
+ QH('xmap-info-window', nodeFeat.get('name'));
1782
+ }
1783
} else {
1777
- var nodeFeat = getCorrespondingFeature(feature); // Return the node feature associated to pointer.
1778
- QH('xmap-info-window', nodeFeat.get('name'));
1784
+ xxmap.map.getTargetElement().style.cursor = '';
1785
+ QH('xmap-info-window', '');
1786
}
1780
- } else {
1781
- xxmap.map.getTargetElement().style.cursor = '';
1782
- QH('xmap-info-window', '');
1783
- }
1784
- });
1785
-
1786
- /*
1787
- // Initialize context menu for openlayers
1788
- contextmenu = new ContextMenu({
1789
- width: 160,
1790
- defaultItems: false, // defaultItems are Zoom In/Zoom Out
1791
- items: contextmenu_items
1792
- });
1793
-
1794
- // On right click open the context menu
1795
- contextmenu.on("open", function (evt) {
1796
- var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(ft, l){ return ft; });
1797
- xxmap.contextmenu.clear(); //Clear the context menu
1798
- if (feature) {
1799
- var featId=feature.getId();
1800
- if (featId) { // Node feature will have an id
1801
- addContextMenuItems(feature);
1802
- }
1803
- else { // If the feature is a pointer, Get its corresponding Node feature
1804
- var nodeFeature= getCorrespondingFeature(feature); //return the node feature associated to pointer.
1805
- if (nodeFeature) { addContextMenuItems(nodeFeature); }
1806
- else{ xxmap.contextmenu.extend(contextmenu_items); }
1787
+ });
1788
+
1789
+ /*
1790
+ // Initialize context menu for openlayers
1791
+ contextmenu = new ContextMenu({
1792
+ width: 160,
1793
+ defaultItems: false, // defaultItems are Zoom In/Zoom Out
1794
+ items: contextmenu_items
1795
+ });
1796
+
1797
+ // On right click open the context menu
1798
+ contextmenu.on("open", function (evt) {
1799
+ var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(ft, l){ return ft; });
1800
+ xxmap.contextmenu.clear(); //Clear the context menu
1801
+ if (feature) {
1802
+ var featId=feature.getId();
1803
+ if (featId) { // Node feature will have an id
1804
+ addContextMenuItems(feature);
1805
+ }
1806
+ else { // If the feature is a pointer, Get its corresponding Node feature
1807
+ var nodeFeature= getCorrespondingFeature(feature); //return the node feature associated to pointer.
1808
+ if (nodeFeature) { addContextMenuItems(nodeFeature); }
1809
+ else{ xxmap.contextmenu.extend(contextmenu_items); }
1810
+ }
1811
}
1808
- }
1809
- else { xxmap.contextmenu.extend(contextmenu_items); }
1810
- });
1811
- xxmap.map.addControl(xxmap.contextmenu);
1812
- */
1813
- //addMeshOptions(); // Adds Mesh names to mesh dropdown
1812
+ else { xxmap.contextmenu.extend(contextmenu_items); }
1813
+ });
1814
+ xxmap.map.addControl(xxmap.contextmenu);
1815
+ */
1816
+ //addMeshOptions(); // Adds Mesh names to mesh dropdown
1817
+ } catch (e) {
1818
+ QV('viewselectmapoption', false);
1819
+ xxmap = null;
1820
+ }
1821
}
1822
1823
// Add feature on to Map for a Node
@@ -2425,7 +2432,7 @@
2432
if ((meshrights & 4) != 0) x += '<a style=cursor:pointer onclick=p10showDeleteNodeDialog("' + node._id + '")>Delete Device</a>';
2433
x += '</div><div style=font-size:x-small>';
2434
if (mesh.mtype == 2) x += '<a style=cursor:pointer onclick=p10showNodeNetInfoDialog("' + node._id + '")>Interfaces</a> ';
2428
- if (node.iploc) x += '<a style=cursor:pointer onclick=p10showNodeLocationDialog("' + node._id + '")>Location</a> ';
2435
+ if ((node.iploc) && (xxmap != null)) x += '<a style=cursor:pointer onclick=p10showNodeLocationDialog("' + node._id + '")>Location</a> ';
2436
x += '</div><br>'
2437
2438
QH('p10html3', x);