Fixed issue where open layers did not work on some browsers

This commit is contained in:
Ylian Saint-Hilaire 2017-09-07 11:16:51 -07:00
parent ac53c7ae3c
commit b6c7403653
1 changed files with 85 additions and 78 deletions

View File

@ -122,7 +122,7 @@
<select id=viewselect onchange=onDeviceViewChange()> <select id=viewselect onchange=onDeviceViewChange()>
<option value=1>3 wide</option> <option value=1>3 wide</option>
<option value=2>List</option> <option value=2>List</option>
<option value=3>Map</option> <option id=viewselectmapoption value=3>Map</option>
</select> </select>
</div> </div>
<div style=float:right id=devListToolbarSort> <div style=float:right id=devListToolbarSort>
@ -1662,8 +1662,9 @@
// Add a feature for every Node and change style if connection status changes // Add a feature for every Node and change style if connection status changes
function updateMapMarkers(selectedMesh) { function updateMapMarkers(selectedMesh) {
if ((xxmap != null) && (xxmap.map == null)) loadmap();
if (xxmap == null) return;
var boundingBox = null; var boundingBox = null;
if (xxmap.map == null) loadmap();
for (var i in nodes) { for (var i in nodes) {
var loc = map_parseNodeLoc(nodes[i]); var loc = map_parseNodeLoc(nodes[i]);
if (loc) { // Draw markers for devices with locations if (loc) { // Draw markers for devices with locations
@ -1724,93 +1725,99 @@
// Load the entire map // Load the entire map
function loadmap() { function loadmap() {
// Initialize a Source Vector if (xxmap == null) return;
xxmap.markersSource = new ol.source.Vector(); try {
// Initialize a Source Vector
xxmap.markersSource = new ol.source.Vector();
xxmap.markersLayer = new ol.layer.Vector({ xxmap.markersLayer = new ol.layer.Vector({
source: xxmap.markersSource source: xxmap.markersSource
}); });
// Create a tile and use OSM source // Create a tile and use OSM source
xxmap.mapLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); xxmap.mapLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
xxmap.mapView = new ol.View({ // Set the initial view xxmap.mapView = new ol.View({ // Set the initial view
center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'), center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
zoom: 2, zoom: 2,
minZoom: 2, minZoom: 2,
maxZoom: 20, maxZoom: 20,
extent: ol.proj.transformExtent([-100000, -69.55, 100000, 69.55], 'EPSG:4326', 'EPSG:3857') extent: ol.proj.transformExtent([-100000, -69.55, 100000, 69.55], 'EPSG:4326', 'EPSG:3857')
}); });
xxmap.map = new ol.Map({ xxmap.map = new ol.Map({
target: 'xdevicesmap', target: 'xdevicesmap',
layers: [xxmap.mapLayer, xxmap.markersLayer], layers: [xxmap.mapLayer, xxmap.markersLayer],
view: xxmap.mapView view: xxmap.mapView
}); });
xxmap.map.addOverlay(map_cm_popup); xxmap.map.addOverlay(map_cm_popup);
// Goto information tab if a user clicks on a feature // Goto information tab if a user clicks on a feature
xxmap.map.on('click', function(evt) { xxmap.map.on('click', function(evt) {
var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) { return feat; }); var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) { return feat; });
if (feature) { if (feature) {
var nodeid = feature.getId(); var nodeid = feature.getId();
if (nodeid != undefined) { gotoDevice(nodeid, 10); } // Goto general info tab if (nodeid != undefined) { gotoDevice(nodeid, 10); } // Goto general info tab
else { // For pointer else { // For pointer
var nodeFeatgoto = getCorrespondingFeature(feature); gotoDevice(nodeFeatgoto.getId(), 10); var nodeFeatgoto = getCorrespondingFeature(feature); gotoDevice(nodeFeatgoto.getId(), 10);
}
} }
} });
});
// On hover feature show the name of the node. Also add pointer style // On hover feature show the name of the node. Also add pointer style
xxmap.map.on('pointermove', function(evt) { xxmap.map.on('pointermove', function(evt) {
var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) { return feat; }); var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) { return feat; });
if (feature) { if (feature) {
xxmap.map.getTargetElement().style.cursor = 'pointer'; xxmap.map.getTargetElement().style.cursor = 'pointer';
var coord = feature.getGeometry().getCoordinates(); var coord = feature.getGeometry().getCoordinates();
// map_cm_popup.setPosition(evt.coordinate); // map_cm_popup.setPosition(evt.coordinate);
map_cm_popup.setPosition(coord); map_cm_popup.setPosition(coord);
featid = feature.getId(); featid = feature.getId();
if (featid) { if (featid) {
QH('xmap-info-window', feature.get('name')); QH('xmap-info-window', feature.get('name'));
} else {
var nodeFeat = getCorrespondingFeature(feature); // Return the node feature associated to pointer.
QH('xmap-info-window', nodeFeat.get('name'));
}
} else { } else {
var nodeFeat = getCorrespondingFeature(feature); // Return the node feature associated to pointer. xxmap.map.getTargetElement().style.cursor = '';
QH('xmap-info-window', nodeFeat.get('name')); QH('xmap-info-window', '');
} }
} else { });
xxmap.map.getTargetElement().style.cursor = '';
QH('xmap-info-window', '');
}
});
/* /*
// Initialize context menu for openlayers // Initialize context menu for openlayers
contextmenu = new ContextMenu({ contextmenu = new ContextMenu({
width: 160, width: 160,
defaultItems: false, // defaultItems are Zoom In/Zoom Out defaultItems: false, // defaultItems are Zoom In/Zoom Out
items: contextmenu_items items: contextmenu_items
}); });
// On right click open the context menu // On right click open the context menu
contextmenu.on("open", function (evt) { contextmenu.on("open", function (evt) {
var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(ft, l){ return ft; }); var feature = xxmap.map.forEachFeatureAtPixel(evt.pixel, function(ft, l){ return ft; });
xxmap.contextmenu.clear(); //Clear the context menu xxmap.contextmenu.clear(); //Clear the context menu
if (feature) { if (feature) {
var featId=feature.getId(); var featId=feature.getId();
if (featId) { // Node feature will have an id if (featId) { // Node feature will have an id
addContextMenuItems(feature); addContextMenuItems(feature);
}
else { // If the feature is a pointer, Get its corresponding Node feature
var nodeFeature= getCorrespondingFeature(feature); //return the node feature associated to pointer.
if (nodeFeature) { addContextMenuItems(nodeFeature); }
else{ xxmap.contextmenu.extend(contextmenu_items); }
}
} }
else { // If the feature is a pointer, Get its corresponding Node feature else { xxmap.contextmenu.extend(contextmenu_items); }
var nodeFeature= getCorrespondingFeature(feature); //return the node feature associated to pointer. });
if (nodeFeature) { addContextMenuItems(nodeFeature); } xxmap.map.addControl(xxmap.contextmenu);
else{ xxmap.contextmenu.extend(contextmenu_items); } */
} //addMeshOptions(); // Adds Mesh names to mesh dropdown
} } catch (e) {
else { xxmap.contextmenu.extend(contextmenu_items); } QV('viewselectmapoption', false);
}); xxmap = null;
xxmap.map.addControl(xxmap.contextmenu); }
*/
//addMeshOptions(); // Adds Mesh names to mesh dropdown
} }
// Add feature on to Map for a Node // Add feature on to Map for a Node
@ -2425,7 +2432,7 @@
if ((meshrights & 4) != 0) x += '<a style=cursor:pointer onclick=p10showDeleteNodeDialog("' + node._id + '")>Delete Device</a>'; if ((meshrights & 4) != 0) x += '<a style=cursor:pointer onclick=p10showDeleteNodeDialog("' + node._id + '")>Delete Device</a>';
x += '</div><div style=font-size:x-small>'; x += '</div><div style=font-size:x-small>';
if (mesh.mtype == 2) x += '<a style=cursor:pointer onclick=p10showNodeNetInfoDialog("' + node._id + '")>Interfaces</a>&nbsp;'; if (mesh.mtype == 2) x += '<a style=cursor:pointer onclick=p10showNodeNetInfoDialog("' + node._id + '")>Interfaces</a>&nbsp;';
if (node.iploc) x += '<a style=cursor:pointer onclick=p10showNodeLocationDialog("' + node._id + '")>Location</a>&nbsp;'; if ((node.iploc) && (xxmap != null)) x += '<a style=cursor:pointer onclick=p10showNodeLocationDialog("' + node._id + '")>Location</a>&nbsp;';
x += '</div><br>' x += '</div><br>'
QH('p10html3', x); QH('p10html3', x);