CODEWITHSUNDEEP
bootstrap-5here-api
Dev devovs
Dev devovs

Reputation: 99

HERE maps show blank screen

I try to use here map

when I add just map from examples enter image description here

I faced with blank screen

I use bootstrap 5 and stimulus.js with symfony 5

When I remove mapsjs-ui.css map renders but without UI

enter image description here And with wrong height container.

    var platform = new H.service.Platform({
    apikey: 'key'
});

var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(mapTarget,
    defaultLayers.vector.normal.map,{
        center: {lat:52, lng:5},
        zoom: 5,
        pixelRatio: window.devicePixelRatio || 1
    });
window.addEventListener('resize', () => map.getViewPort().resize());

var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

var ui = H.ui.UI.createDefault(map, defaultLayers);
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(14);

Upvotes: 1

Views: 395

Answers (1)

SAlex
SAlex

Reputation: 69

In my experience the HERE Maps API for JavaScript can be properly integrated with many different frameworks.

Please don't remove mapsjs-ui.css

Symfony 5 - this is PHP framework on the backend side therefore please don't mix up with frontend libraries like HERE Maps API for JavaScript which run in browser. Therefore it doesn't matter which framework are you using on server side.

See please this example with bootstrap 5.2 and stimulus.

https://jsfiddle.net/erbd709j/

In this example are shown 3 maps in the grid created with help bootstrap.

/**
 * Moves the map to display over Berlin
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function moveMapToBerlin(mapObj){
  mapObj.map.setCenter({lat:52.5159, lng:13.3777});
  mapObj.map.setZoom(14);
}




function openMap(idx) {
    var mapObject = {};

  /**
       * Boilerplate map initialization code starts below:
       */

  //Step 1: initialize communication with the platform
  // In your own code, replace variable window.apikey with your own apikey
  mapObject.platform = new H.service.Platform({
    apikey: window.apikey
  });
  mapObject.defaultLayers = mapObject.platform.createDefaultLayers();

  //Step 2: initialize a map - this map is centered over Europe
  mapObject.map = new H.Map(document.getElementById('map' + idx),
                      mapObject.defaultLayers.vector.normal.map,{
    center: {lat:50, lng:5},
    zoom: 4,
    pixelRatio: window.devicePixelRatio || 1
  });
  // add a resize listener to make sure that the map occupies the whole container
  window.addEventListener('resize', () => mapObject.map.getViewPort().resize());

  //Step 3: make the map interactive
  // MapEvents enables the event system
  // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
  mapObject.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(mapObject.map));

  // Create the default UI components
  mapObject.ui = H.ui.UI.createDefault(mapObject.map, mapObject.defaultLayers);
  
  return mapObject;


}

// Now use the map as required...
window.onload = function () {
  openMap(0);
  let map1 = openMap(1);
  openMap(2);
  moveMapToBerlin(map1);
}

Upvotes: 2

Related Questions