HERE Maps React Component shows up as empty

Question

I am attempting to make a small web app with React that involves a map. I'm using the HERE Maps react component (this is non-negotiable) but I'm having trouble getting the map to show up. I'm not sure if it's the Key or my understanding of React (which is small), that's causing the issue.

Map Component

import React from "react";
import { connect } from "react-redux";

import HEREMap from "react-here-maps";

@connect((store) => {
  return {

  };
})
export default class Map extends React.Component {
  render() {
    console.info(HEREMap);

    const style = {
      width: "100%",
      height: "100%"
    };

    return <div style={style}>
      <h1>Hello HERE</h1>
      <HEREMap
            appId="<ID>"
            appCode="<CODE>"
            center={{ lat: 51.5, lng: 0 }}
            zoom={14}
      />
    </div>
  };
};

Main

import React from "react"
import ReactDOM from "react-dom"
import { Provider } from "react-redux"

import Map from "./components/Map"
import Layout from "./components/Layout"
import store from "./store"

const app = document.getElementById('app')

ReactDOM.render(
    <Provider store={store}>
      <Map />
    </Provider>, app);

I think that component `hereMaps` should be `HereMaps` - first char has uppercase — Oleksandr T., Dec 12 '16 at 16:31
I'm not sure if you've seen this, but there is a tutorial on the HERE Developer Blog for React.js, https://developer.here.com/blog/here-with-react-location-based-todo-app — Nic Raboy, Sep 21 '18 at 19:24

score 0 · Answer 1 · answered Nov 15 '18 at 15:32

I noticed this in you code listing:

const style = {
  width: "100%",
  height: "100%"
};

A common problem is that the height of a block element like <div> defaults to the height of the block's content. By specifying it as a percentage like 100%, it will be the height of the element's parent which if it's just an empty container with no content will have a height of 0 and therefore not be visible.

The answers in Percentage Height HTML 5/CSS might be helpful for finding alternatives like setting the height of the body element.

There may also be something else going on as the react-here-maps package has a few issues, but you said that wasn't negotiable. For anybody else looking for a more standalone demonstration, the Use HERE Interactive Maps with ReactJS to Pick a Theme might be helpful. In the source example there, the height is fixed at 400px.

HERE Maps React Component shows up as empty

1 Answers1