Am I calling the JavaScript file correctly? -
i have web page , wondering if calling correctly javascript3.js
. file inside same folder html. when put javascript code inside html, works fine.
(the ol3-layerswitcher.js
being called correctly don't know why other 1 not being called.)
html:
<!doctype html> <html> <head> <title>map</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css"> <link rel="stylesheet" href="ol3-layerswitcher.css"> <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script> <script src="ol3-layerswitcher.js"></script> <script src="javascript3.js"></script> </head> <body> <div id="map" style="width:100%;"></div> <div id="info"></div> </body> </html>
javascript3.js:
var testsource = new ol.source.tilewms({ url: 'http://localhost:8080/geoserver/wms', params: {'layers': 'marine:great_britain', 'tiled': true}, servertype: 'geoserver' }); var layers = [ new ol.layer.tile({ source: new ol.source.mapquest({layer: 'osm'}) }), new ol.layer.group({ title: 'layers', layers: [ //implementing layers new ol.layer.tile({ title: 'great britain', source: testsource }), ] }) ]; var map = new ol.map({ layers: layers, target: 'map', view: new ol.view({ center: [51480.6, 7216744.2], //uk zoom: 5 }) }); //function features layer map.on('singleclick', function(evt) { document.getelementbyid('info').innerhtml = ''; viewresolution = map.getview().getresolution(); var url = testsource.getgetfeatureinfourl( evt.coordinate, viewresolution, 'epsg:3857', {'info_format': 'text/html'}); if (url) { document.getelementbyid('info').innerhtml = '<iframe seamless src="' + url + '"></iframe>'; } }); //layer switcher turn layers on , off var layerswitcher = new ol.control.layerswitcher({ tiplabel: 'legend' }); map.addcontrol(layerswitcher);
if need execute dom manipulation without wrapping code document ready handler (such $(document).ready();
), correct place @ end of body
(or @ least after creating dom elements manipulated):
<!doctype html> <html> <head> <title>map</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css"> <link rel="stylesheet" href="ol3-layerswitcher.css"> <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script> <script src="ol3-layerswitcher.js"></script> </head> <body> <div id="map" style="width:100%;"></div> <div id="info"></div> <script src="javascript3.js"></script> </body> </html>
Comments
Post a Comment