Hi group!
I've been reading quite a lot in this group lately, since I've been working on building a geo-enabled (D6) site in Drupal. I've had a look at several modules, however due to future functionalities (e.g. WFS filters) and high amount of geodata to mapped and linked, I've decided to go with the native OL library.
My basic problem is that I'm not able to include the OL library on a node. I've tried the following options:
1) Turn on "Full HTML" input filter on node and included basically this example from the OL Getting Started Guide. The div is created (where the map's supposed to be), js is loaded, however the node remains empty.
2) Enabled the optional core module "PHP Input". I uploaded the two scripts (OL library and the small OL settings js script from step 1 ) to the webserver. Tried two options to include it into the Body field of the node (PHP Input Filter enabled):
a)
<?php
include('sites/default/scripts/OpenLayers.js');
include('sites/default/scripts/map.js');
?>
<div style="width:100%; height:100%" id="map"></div>b)
<?php
drupal_add_js('sites/default/scripts/OpenLayers.js');
drupal_add_js('sites/default/scripts/map.js');
?>
<div id="map"></div>map.js exists of:
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();Both PHP options resulted in that the js files are put nicely in the head of the webpage. The div is inserted in the body. However, no map is rendered....
3) CKEditor also has a habit of getting in the way sometimes, so I disabled CKEditor for that specific page. Still no luck.
I put the example (mentioned in option 1) on a "normal" HTML page, outside Drupal, and it works perfectly. So, does anyone have experience with using the full OL library on Drupal nodes and could you point me in the right direction?
Thanks!
Comments
Change your width and height to pixels
I've ran into the exact same problem.
Changing the div style to pixels instead of % solves this.
I haven't gone into this very deep yet, but for now this solves your problem. Maybe it's a CSS thing? Somebody else might know...
Thanks
Thanks brammm for your solution! It works! ;)
Kinda strange though it didn't work with the definition of width and height in %....