open layers in html area

Using Servoy to administrate the content of your website? Discuss all webrelated Servoy topics on this forum!

open layers in html area

Postby japink.m » Tue Jul 21, 2015 11:37 am

i want to show an open layers map in my solution. I have some working code outside servoy. But when parsed by servoy nothing is shown at all.

this shows a map as plain .html
Code: Select all
<html>
<head>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        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();
      </script>
</body>
</html>


In servoy I store the following code in a form variable and use a function to pase the xml
Code: Select all
var map = stripCDataTags(
<html>
<head>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
      <![CDATA[
        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();
        ]]>
      </script>
</body>
</html>);

function stripCDataTags(html) {
   return html.toXMLString().replace(']]>', '').replace('<![CDATA[', '');
}


on my form I have a html area bound to this formvariable map.
In my solution nothing is shown. When I print the parsed code to the console it's altered and doesn't work on itself anymore

Code: Select all
<html>
  <head>
    <script src="http://openlayers.org/api/OpenLayers.js"/>
  </head>
  <body>
    <div id="map" style="width:100%; height:100%"/>
    <script defer="defer" type="text/javascript">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();</script>
  </body>
</html>


when I paste the closing </script> back in in the head it works again (as plain html.

I can't figure out how to show my map. Is there somebody who has any idea how i can get this working?
japink.m
 
Posts: 23
Joined: Fri Jun 14, 2013 9:13 pm

Re: open layers in html area

Postby david » Wed Jul 22, 2015 2:14 am

Assign this to your html area:

Code: Select all
var map = '<html>\
<head>\
    <script src="http://openlayers.org/api/OpenLayers.js"></script>\
    </head>\
    <body>\
      <div style="width:100%; height:100%" id="map"></div>\
      <script defer="defer" type="text/javascript">\
       function mapInit() {\
          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();\
      }\
      </script>\
</body>\
</html>'


Then trigger via some sort of event (ie, form onShow) with:

Code: Select all
plugins.WebClientUtils.executeClientSideJS('mapInit()')


Didn't test but that is the idea. Another example: viewtopic.php?f=15&t=20786#p111653
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1727
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.

Re: open layers in html area

Postby juan.cristobo » Wed Jul 22, 2015 9:03 am

I use a sort of that code to put google charts in my solutions
Juan
Madrid (Spain)

Servoy 7.4.x - MySQL / SQL Server 2008-2016
Windows 10 Pro
juan.cristobo
 
Posts: 186
Joined: Thu Apr 19, 2012 9:12 am


Return to Web Development

Who is online

Users browsing this forum: No registered users and 3 guests