Giter VIP home page Giter VIP logo

react-here-map's Introduction

react-here-map

React components for rendering and working with Here Maps.

It simplifies the use of the Here Map JavaScript API with the help React components.

The components can be imported and easily rendered. It also comes with seamless configuration and modifications.

Demo

See it here

Installation

Using NPM:


npm i --save react-here-map

Using Yarn:


yarn add react-here-map

General Usage


import React from "react";
import ReactDOM from "react-dom";
import HPlatform, { HMap, HMapCircle } from "react-here-map";

const points = [
  { lat: 52.5309825, lng: 13.3845921 },
  { lat: 52.5311923, lng: 13.3853495 },
  { lat: 52.5313532, lng: 13.3861756 },
  { lat: 52.5315142, lng: 13.3872163 },
  { lat: 52.5316215, lng: 13.3885574 },
  { lat: 52.5320399, lng: 13.3925807 },
  { lat: 52.5321472, lng: 13.3935785 },
];

ReactDOM.render(
  <HPlatform
      options={{
        apiKey: 'TIAGlD6jic7l9Aa8Of8IFxo3EUemmcZlHm_agfAm6Ew',
        appId: 'EF8K24SYpkpXUO9rkbfA',
        includePlaces: false,
        includeUI: true,
        interactive: true,
        version: 'v3/3.1'
      }}
    >
      <HMap
        options={{
          center: {
            lat: 52.5309825,
            lng: 13.3845921
          }
        }}
        style={{
          height: '480px',
          width: '100%'
        }}
        useEvents
      >
        <HMapCircle
          coords={{
            lat: 52.5309825,
            lng: 13.3845921
          }}
          events={{
            pointerdown: function noRefCheck(){},
            pointerenter: function noRefCheck(){},
            pointerleave: function noRefCheck(){},
            pointermove: function noRefCheck(){}
          }}
          options={{
            style: {
              fillColor: 'rgba(0, 128, 0, 0.7)',
              lineWidth: 4,
              strokeColor: 'rgba(55, 85, 170, 0.6)'
            }
          }}
          radius={10000}
          setVisibility
          zoom={8}
        />
      </HMap>
    </HPlatform>,
  document.getElementById("app")
);

CHANGES

06/05/2020

  • Includes support for V3.1 API_KEY

Contributions

See the TODO.MD

Licence

MIT

react-here-map's People

Contributors

devfemmy avatar limistah avatar yardenhochman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-here-map's Issues

How to change marker position without creating a new one?

I am trying to change marker location. The expected behavior is to change the same marker position but in the example code, when lat and lon is changed, a new marker is created at that location on the map. How can I achieve that the current icon on the map is positioned according to the new coordinates?

         ` <HMapMarker
              coords={{ lat: lat, lng: lon }}
              options={{}}
              setViewBounds={false}
              icon={MarkerIcon("#28ef1c", true)} 
           />`

No app_code for new accounts

App code credentials will continue to be supported for a few products and current Developer Portal accounts where App code credentials have already been generated for an App. New accounts will only be able to use App Code credentials for some legacy products. App code credentials are the least secure of the authentication credential types and we recommend the use of the API Key or OAuth 2.0 Token credentials instead for improved security.

https://developer.here.com/documentation/authentication/dev_guide/topics/app-credentials.html

Will you update this library to work with the API Key?

How to make HMapRectangle invisible?

I'm trying to adjust the zoom level of the map so that all markers on the map are visible. Official sdk has methods for this, but it is not included in this library. See here Zoom To Set Of Markers
I can use HMapRectangle and setViewBounds for this, but I want the rectangle not to appear on the map. How can I do that?

CRA2 unexpected token (html tag)

Hi! Great idea for Here Maps library in React. I love it!
I have a problem though.

Steps to reproduce:

  1. create-react-app map-test
  2. yarn add react-here-maps
  3. Copy example from the readme
  4. Add your own APP_ID and APP_KEY
  5. yarn start

Outcome:

UNEXPECTED TOKEN
...\node_modules\react-here-map\src\components\HMap\index.js: Unexpected token (27:11)
25 | }
26 | createLoadingComponent() {
27 | return <div>Loading</div>;
|___________^
28 | }
29 | displayChildren() {
30 | const { children } = this.props;`

It is not very well visible here but html tags are being reported as unexpected tokens.

Expected outcome
App starts displaying map

I would really love to test and use this library. Could you help with this error?

Any support for info bubbles?

Im trying to make use of Here Maps info bubble but don't see any support for it.

Example in vanilla js:

new H.ui.InfoBubble( coords, {
content: 'Test'
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.