react-here-maps

react-here-maps

React Wrapper for the HERE Maps API for JavaScript (v3.0.12.4)

Information

This module is still under active development. It is very basic in its current state and is subject to significant change at this time.

## Dependencies

The module will automatically load the HERE Maps API scripts and stylesheets for you. We follow this practice because the scripts themselves are split into multiple modules and we hope to conditionally load these scripts at some point in the future based on the features that the user of the module wishes to use.

Quick Start

Declare your HERE Maps component using the following React syntax:

import React, { Component } from 'react';
import { HEREMap } from 'react-here-maps';

export default class Map extends Component {
    render() {
        return (
            <HEREMap appId="{your app_id}"
                     appCode="{your app_code}"
                     center={{ lat: 0, lng: 0 }}
                     zoom={14} />
        )
    }
}

Changelog

0.0.0 (2016-08-22)

Features

• HEREMap
  • React Component
  • Ensures the required scripts and CSS files from the HERE Maps API CDN are loaded.
  • Renders a map with a center and zoom level specified as props of the component itself.
  • Specify the app_id and the app_code from the HERE API as appId and appCode props for the component.
  • Exposes changeCenter method on the component to change the center coordinates of the map after it has been rendered.
• Utils
  • Cache
    • cache utility used internally for loading scripts to the DOM via 'script' tags.
  • getLink
    • getLink utility generates a 'link' tag pointing to a stylesheet (in this case, could be extended in the future) and appends it to the DOM.
  • getPlatform
    • getPlatform utility ensures that only one platform is generated, no matter how many maps are added.
    • Only one platform is required for any number of maps in a single application instance, so we've decided to take that approach here.
    • Will be exposed from the module in the future.
  • getScriptMap
    • getScriptMap utility returns an object containing the names and URLs of each HERE Maps API script that needs to be loaded.
    • This will be updated in the future to load/eliminate scripts depending on what features the user does and does not require from their map component.
• Demos
  • Includes a basic example of the use of the component.
  • Centers the map at the coordinates { lat: 0, lng: 0 } and sets the zoom level to 14.
  • Map is styled using SCSS.
  • Map width is set to 540px, height to 360px, and the map is centred in the web page.
• Typings
  • Includes a copy of the type definitions I created for the HERE Maps API for JavaScript, for use in TypeScript packages.
  • We're hoping to make those typings more available in the future. Details to follow.