map-md-app: https://map.md (React/UMD - mapbox-gl wrapper)

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode. Open http://0.0.0.0:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

yarn run build

Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

yarn prepack

Run your test scripts

Development

• node.js version <=12.x.x
• Generate an API key here https://map.md/ro/api/
• add API key to env variable API_KEY in package.json

Contribution

Feel free to make a pull request to [https://github.com/simpals/map-md-app]

Installation

npm i map-md-app

yarn add map-md-app

Exported Module

export default {
  MapApp, "Component"
  renderMapApp, "function"
  methods "Object of methods"
};

Usage React

import { MapApp } from 'map-md-app';

<MapApp { ...options }/>

Example

  const [MapGL, saveMapGL] = useState(null);

  const getMapGL = (MapCtx) => {
    "You must save it somewhere e.g"
    saveMapGL(MapCtx);
  };

  const YourOptions = {
    onInit: getMapGL
  }

  <MapApp { ...YourOptions }/>

Usage UMD projects

Add package to your config

require.config(
  paths:
    "mapApp": "YOURPATH/map-md-app/dist/browser/map-md-app"
)

Define package

define [
  "mapApp"
], (mapApp) =>

Example

mapApp.renderMapApp({ ...yourOptions })

Options

options = {
  apiKey: string, "Generate it here https://map.md/ro/api/"
  container: string, "Container where will be randered Map (e.g #root, .classRoot)"
  viewport: {
      pitch: number, "Default 0"
      bearing: number, "Default 0"
      zoom: number, "Default 10"
      minZoom: number, "Default 7"
      maxZoom: number, "Default 20"
      center: [
        number.float, "Default [28.839917, 47.0173] -- Chisinau"
        number.float
      ],
      maxBounds: [
        [
          number.float, "Default [ 24.0, 45.0 ]"
          number.float
        ],
        [
          number.float, "Default [ 32.0, 49.0 ]"
          number.float
        ]
      ],
      initialStyle: string, "Default map (map/satelite)"
  },
  mapImages: [
    { id: string, path: string},
    { id: 'example-id', path: 'example/path/to/img.png' }
  ],
  theme: { "Add your custom css to controlls"
    mode3DControl: ``,
    layerControl: ``,
    userLocControl: ``,
    zoomControl: ``,
    logo: ''
  },
  utm: {
    source: string,
    medium: string,
    campaign: string,
    content: string,
  },
  displayZoomControl: bool, "Default true"
  displayUserLocControl: bool, "Default true"
  displayLayerControl: bool, "Default true"
  display3DControl: bool, "Default true"
  disable3DSatelite: bool, "Default false"
  disable3DMode: bool, "Default false"
  init3DObjects: bool, "Default false"
  onInit: func, "receive MapGL context"
  onUserLocInit: func, "recive UserLocation context"
  portalNode: DOM_Node
}

Functions

onInit={ ( MapCtx ) => { return MapCtx } } onUserLocInit={ ( userLocationAPI ) => { return userLocationAPI } }

| Functions | Params | Return | | :---------------- | ------ | ---------: | | onInit | MapCtx | Context | | onUserLocInit | userLoc | Context |

Create Context Menu (For React)

const portalNode = document.getElementById('yourNode')

<MapApp { ...YourOptions, portalNode}>
  {
    ({MapGL}) => (
      <YourContextMenu MapGL={MapGL}>
    )
  }
</MapApp>

Exported methods

| Methods | Params | Docs & Params.options | | :----------------------- | -------------| --------------------: | | newMapMarker | type.Object | Marker| | newMapPopup | type.Object | Popup| | newMapLngLat | type.Array | LngLat| | newMapLngLatBounds | type.Array | LngLatBounds| | newMapMercatorCoordinate | type.Array | MercatorCoordinate|

Learn More

To learn React, check out the React documentation. To learn Mapbox GL JS, check out the Api Reference. To learn Mapbox GL Draw Polygon custom styles, check out the Draw course.