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

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -