This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 3 years, 6 months ago.

App.init() problems with openlayers3 popup.


  • HatpoMarx
    Participant

    Member Reply #1061

    <table>
    <tbody>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>This is just a skeleton example of openlayers functionality and your theme. all other css and js files are not included but the result is the same. For some reason openlayers popup triggered by mouse click is not working. Without App.init() it is. Any idea whay that might be an issue.</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-doctype”><!DOCTYPE html></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-comment”><!–[if IE 8]> <html lang=”en” class=”ie8 no-js”> <![endif]–></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-comment”><!–[if IE 9]> <html lang=”en” class=”ie9 no-js”> <![endif]–></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-comment”><!–[if !IE]><!–></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><html <span class=”html-attribute-name”>lang</span>=”<span class=”html-attribute-value”>en</span>” <span class=”html-attribute-name”>class</span>=”<span class=”html-attribute-value”>no-js</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-comment”><!–<![endif]–></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-comment”><!– BEGIN HEAD –></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><head></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><meta <span class=”html-attribute-name”>charset</span>=”<span class=”html-attribute-value”>utf-8</span>”/></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><title></span>nvltracker | nv-labs<span class=”html-tag”></title></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><meta <span class=”html-attribute-name”>http-equiv</span>=”<span class=”html-attribute-value”>X-UA-Compatible</span>” <span class=”html-attribute-name”>content</span>=”<span class=”html-attribute-value”>IE=edge</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><meta <span class=”html-attribute-name”>content</span>=”<span class=”html-attribute-value”>width=device-width, initial-scale=1.0</span>” <span class=”html-attribute-name”>name</span>=”<span class=”html-attribute-value”>viewport</span>”/></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><meta <span class=”html-attribute-name”>content</span>=”” <span class=”html-attribute-name”>name</span>=”<span class=”html-attribute-value”>description</span>”/></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><meta <span class=”html-attribute-name”>content</span>=”” <span class=”html-attribute-name”>name</span>=”<span class=”html-attribute-value”>author</span>”/></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><meta <span class=”html-attribute-name”>name</span>=”<span class=”html-attribute-value”>nvltracker</span>” <span class=”html-attribute-name”>content</span>=”<span class=”html-attribute-value”>320</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><title></span> <span class=”html-tag”></title></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><link <span class=”html-attribute-name”>rel</span>=”<span class=”html-attribute-value”>stylesheet</span>” <span class=”html-attribute-name”>href</span>=”http://static.nvltracker.com/assets/plugins/openlayers/css/ol.css” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/css</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><link <span class=”html-attribute-name”>rel</span>=”<span class=”html-attribute-value”>stylesheet</span>” <span class=”html-attribute-name”>href</span>=”http://static.nvltracker.com/assets/plugins/ol3-layerswitcher/css/ol3-layerswitcher.css” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/css</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><link <span class=”html-attribute-name”>rel</span>=”<span class=”html-attribute-value”>stylesheet</span>” <span class=”html-attribute-name”>href</span>=”http://static.nvltracker.com/assets/plugins/ol3-popup/css/ol3-popup.css” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/css</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><style></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>html, body, #map {width:100%; height:100%; margin:0; padding:0;}</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”></style></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”></head></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><body <span class=”html-attribute-name”>class</span>=”<span class=”html-attribute-value”>page-header-fixed</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><div <span class=”html-attribute-name”>class</span>=”<span class=”html-attribute-value”>col-md-12</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><div <span class=”html-attribute-name”>class</span>=”<span class=”html-attribute-value”>row</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><div <span class=”html-attribute-name”>id</span>=”<span class=”html-attribute-value”>map</span>” <span class=”html-attribute-name”>class</span>=”<span class=”html-attribute-value”>map</span>”></span><span class=”html-tag”></div></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”></div></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”></div></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”></body></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/plugins/jquery-1.11.0.js” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/javascript</span>”></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/plugins/jquery-migrate-1.2.1.js” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/javascript</span>”></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-comment”><!– IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip –></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/javascript</span>”></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/plugins/bootstrap/js/bootstrap.min.js” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/javascript</span>”></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/javascript</span>”></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/scripts/app.js“></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/plugins/openlayers/js/ol-debug.js” <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/javascript</span>”></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/plugins/ol3-layerswitcher/js/ol3-layerswitcher.js“></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>src</span>=”http://static.nvltracker.com/assets/plugins/ol3-popup/js/ol3-popup.js“></span><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>jQuery(document).ready(function() {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>function actContHeight(){</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//Height of CaseId Tabs</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var appBdH = $(‘.header’).outerHeight();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var wrap = $(‘.page-header-fixed’).innerHeight();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var footer = 40;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(wrap, appBdH, footer);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>$(‘#map’).height(wrap-appBdH-footer);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>};</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>App.init();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>$(window).on(‘resize’, function(){</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>actContHeight();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>window.onresize = actContHeight();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>actContHeight();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><script <span class=”html-attribute-name”>type</span>=”<span class=”html-attribute-value”>text/javascript</span>”></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>/*if (ol.has.WEBGL) {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var map = new ol.Map({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>target: ‘map’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>renderer:’webgl’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>view: new ol.View({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>center: [1779318.3729059827, 5750751.626054873],</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>zoom: 9</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>})</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}else{</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(‘nowebgl’);*/</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var map = new ol.Map({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>target: ‘map’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>renderer:’canvas’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>view: new ol.View({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>center: [1779318.3729059827, 5750751.626054873],</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>zoom: 3</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>})</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>/*</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}*/</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var point_style = new ol.style.Style({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>image: new ol.style.Circle({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>radius: 5,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>fill: new ol.style.Fill({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>color: ‘rgba(255, 255, 255, 0.1)’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>opacity: 0.8</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}),</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>stroke: new ol.style.Stroke({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>color: ‘rgba(0, 0, 255, 0.9)’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>opacity: 0.8,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>width: 3</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>})</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>})</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var gJSONFeatures = new ol.source.GeoJSON({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>projection: map.getView().getProjection(),</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>url: ‘*'</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var gjlayer = new ol.layer.Vector({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>title: ‘Random points’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>source: gJSONFeatures,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>style: point_style</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var baseLayer = new ol.layer.Tile({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>useInterimTilesOnError: true,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>title: ‘OSM Map’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>source: new ol.source.XYZ({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>url: ‘*’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>crossOrigin: null,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>attributions: [</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>new ol.Attribution({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>html: ‘© *‘</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>})</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>]</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>})</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var baseGroups = new ol.layer.Group({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>title: ‘Base Layers’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>layers: [baseLayer]</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var overlayGroups = new ol.layer.Group({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>title: ‘Overlay’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>layers: [gjlayer]</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map.addLayer(baseGroups);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map.addLayer(overlayGroups);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var myScaleLine = new ol.control.ScaleLine();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map.addControl(myScaleLine);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var myFullScreenControl = new ol.control.FullScreen();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map.addControl(myFullScreenControl);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var layerSwitcher = new ol.control.LayerSwitcher({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>tipLabel: ‘Legende’ // Optional label for button</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map.addControl(layerSwitcher);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//map.on(‘singleclick’, function(evt){</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>// var coord = evt.coordinate;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>// var transformed_coordinate = ol.proj.transform(coord, “EPSG:900913”, “EPSG:900913″);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>// console.log(transformed_coordinate);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//})</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var popup = new ol.Overlay.Popup();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map.addOverlay(popup);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map.on(‘singleclick’, function(evt) {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>// Hide existing popup and reset it’s offset</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>evt.preventDefault();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>evt.stopPropagation();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(‘oklinuo single click.’);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(evt);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>popup.hide();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>popup.setOffset([0, 0]);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>// Attempt to find a feature in one of the visible vector layers</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(‘Usao u for each.’);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(feature);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(layer);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//temp = feature;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>return feature;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>if (feature) {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var coord = feature.getGeometry().getCoordinates();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var props = feature.getProperties();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(props);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var info = “<h2>”+props.name+”</h2>”;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>info += “<p>Lon/Lat: ” + props.position + “</p>”;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>info += “<p>Phone: ” + props.phone + ” Time: ” + props.time + “</p>”;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>info += “<p>Speed: ” + props.speed.toString() + “</p>”;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>// Offset the popup so it points at the middle of the marker not the tip</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>popup.setOffset([0, -22]);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>popup.show(coord, info);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>} else {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(‘No feature.’);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var vectorSource = new ol.source.Vector({});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var vectorLayer = new ol.layer.Vector({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>source: vectorSource,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>style: point_style</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>});</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>map.addLayer(vectorLayer);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>function positioningUpdate() {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var host = ‘ws://gis.nvltracker.com/websocket/’;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>websocket = new WebSocket(host);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>websocket.onopen = function (evt) {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(‘Opend Conn.’);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>setInterval(function () {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>if(websocket.readyState == websocket.OPEN){</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>websocket.send(‘{“TAG”:”PING”}’);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(“Client PING!”);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}, 300000);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>};</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>websocket.onerror = function (evt) {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(evt);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>};</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>websocket.onmessage = function(evt) {</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//var new_position = JSON.parse(evt.data);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//lat = Math.random() * 174 – 87;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//lon = Math.random() * 360 – 180;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var ws_message = jQuery.parseJSON(evt.data);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>if(ws_message.TAG == ‘COORD_UPDATE’){</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>var new_position = ws_message;</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(new_position);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//console.log(new_position.data.lon, new_position.data.lat);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//console.log(ol.proj.transform([new_position.data.lat, new_position.data.lon], ‘EPSG:4326’, ‘EPSG:3857’));</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//var pnt = new ol.geom.Point([new_position.data.lon, new_position.data.lat]).transform(‘EPSG:4326’, ‘EPSG:3857’);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>vectorSource.addFeature(new ol.Feature({</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>geometry: new ol.geom.Point([parseFloat(new_position.data.lon), parseFloat(new_position.data.lat)]).transform(‘EPSG:4326’, ‘EPSG:3857’),</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>name: new_position.name,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>phone: new_position.data.phone,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>position: ‘(‘+new_position.data.lon +’, ‘+ new_position.data.lat + ‘)’,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>time: new_position.data.timestamp,</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>speed: new_position.data.speed</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}));</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//var fts = gJSONFeatures.getFeatures();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//gJSONFeatures.clear();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>//gJSONFeatures.addFeatures(fts);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(‘Prošao gJSONFeatures.addFeature’);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>if(ws_message.TAG == ‘PONG’){</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(“Server PONG!”);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>}</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>websocket.onerror = function (evt) { };</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>websocket.onclose = function (evt){</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>console.log(‘Closed Conn.’);</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>};</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>};</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”>positioningUpdate();</td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”></script></span></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”></td>
    </tr>
    <tr>
    <td class=”line-number”></td>
    <td class=”line-content”><span class=”html-tag”><html></span></td>
    </tr>
    </tbody>
    </table>

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #1183

    Hi,

    Please note our support does not cover 3rd party plugins(openlayers popup) or frameworks.

    If you need any further clarifications please let us know. For more info you can check our FAQ here:

    http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469/support

    Thanks.

     

Tagged: 

You must be logged in to reply to this topic.