Question

As i red from the readme file, openlayers.js has multiple choices for including files and themes.

What i would like is to use the lightest solution of openlayers.js files.

I included the openlayers.light.js in my app, and it creates maps but do not show them, check this:

do i forgot to include some other file?

my structure structure is this:

/vendor
   /js
     openlayers.light.js
     /img
     /theme

how to show maps layers?

Also does the openlayers.light.js will work on mobile devices (once fixed this problem 😛 )? or i’ll need to include openlayers.mobile.js too?

This is the code not working with openlayers.light.js but working with openlayers.js (740kb) :

var _element = "#map";
 var map = new OpenLayers.Map (_element, {
    controls: [
    new OpenLayers.Control.Navigation({
      dragPanOptions: {
        enableKinetic: true
      }
    }),
    new OpenLayers.Control.Zoom()
    ],
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326")
  });

  var lonLat = new OpenLayers.LonLat(_lon, _lat).transform (
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
// map.getProjectionObject() doesn't work for unknown reason
);
  var markers = new OpenLayers.Layer.Markers( "Markers" );
  map.addLayer(markers);

  var size = new OpenLayers.Size(21,25);
  var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  var icon = new OpenLayers.Icon(_img_map_marker, size, offset);
  markers.addMarker(new OpenLayers.Marker(lonLat, icon.clone()));

  var mapnik = new OpenLayers.Layer.OSM("Test");
  map.addLayer(mapnik);

  map.setCenter (lonLat,3);

PS: my openlayers map js init method is ok, it works using the huge openlayers.js (740KB), but not working with openlayers.light.js as i showed above

html

<div id="map"></div>

css

img{max-width:none;}
#map{
width:300px;
height:300px;
}

Answer 1

if you want to use mobile properties with openlayers as panning or zooming with hand you have to use openlayers.mobile.js.

you can use openlayers.light.js with mobile devices but not mobile functions.

i think your structure should be :

myProject
   /js
      openlayers.light.js
   /img
   /theme

and i have tried openlayers.light.js in http://jsfiddle.net/aragon/ZecJj/ and there is no problem with it.

My code:

var map = new OpenLayers.Map({
    div: "map",
    minResolution: "auto",
    maxResolution: "auto",
});

var osm = new OpenLayers.Layer.OSM();
var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
var center = toMercator({x:-0.05,y:51.5});
map.addLayers([osm]);


map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);

and try to read Deploying (Shipping OpenLayers in your Application).

OpenLayers comes with pre-configured examples out of the box: simply
download a release of OpenLayers, and you get a full set of easy to
use examples. However, these examples are designed to be used for
development. When you’re ready to deploy your application, you want a
highly optimized OpenLayers distribution, to limit bandwidth and
loading time.

you can change src file with this link and can see it still works.

 <script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.light.debug.js"></script>

to

<script type="text/javascript" src="https://view.softwareborsen.dk/Softwareborsen/Vis%20Stedet/trunk/lib/OpenLayers/2.12/OpenLayers.light.js?content-type=text%2Fplain"></script>

i hope it helps you…