user6039980 user6039980 - 1 year ago 63
AngularJS Question

OpenLayers: OSM doesn't show up on div

I'm trying to load the map content from OpenStreetMaps into a div inside my hybrid mobile app, using the following code:


.controller('myCtrl', function($scope, $state, $ionicPopup, $cordovaGeolocation, Util)

if (! $scope.firstloaded)
var map = new OpenLayers.Map("basicMap");

var mapnik = new OpenLayers.Layer.OSM();

var fromProjection = new OpenLayers.Projection("EPSG:4326");

// Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913");

// to Spherical Mercator Projection
var position = new OpenLayers.LonLat(13.41,52.52).transform(fromProjection, toProjection);

var zoom = 15;

map.setCenter(position, zoom );

$scope.firstloaded = true;


<label class="item item-input">
<span class="input-label">Location</span>
<div id="basicMap" style="height:250px"></div>

.. However, I don't know why the map is not showing on the div.

So, is there anything wrong with the code?
How is it possible to fix this problem?

Answer Source

The inclusion of the following CSS code on the OpenStreetMaps example, as being suggested by Gandhi

html, body, #basicMap {
          width: 100%;
          height: 100%;
          margin: 0;

is needed for the correct rendering of the maps; and its exclusion is what caused the problem.