map-md-app: https://map.md (React/UMD - mapbox-gl wrapper)
In the project directory, you can run:
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.
Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Run your test scripts
- 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
Feel free to make a pull request to [https://github.com/simpals/map-md-app]
export default {
C008
MapApp, "Component"
renderMapApp, "function"
methods "Object of methods"
};import { MapApp } from 'map-md-app';
<MapApp { ...options }/>
const [MapGL, saveMapGL] = useState(null);
const getMapGL = (MapCtx) => {
"You must save it somewhere e.g"
saveMapGL(MapCtx);
};
const YourOptions = {
onInit: getMapGL
}
<MapApp { ...YourOptions }/>Add package to your config
require.config(
paths:
"mapApp": "YOURPATH/map-md-app/dist/browser/map-md-app"
)Define package
define [
"mapApp"
], (mapApp) =>mapApp.renderMapApp({ ...yourOptions })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
} ( MapCtx ) => { return MapCtx } }
( userLocationAPI ) => { return userLocationAPI } }
| Functions | Params | Return |
|---|---|---|
| onInit | MapCtx | Context |
| onUserLocInit | userLoc | Context |
const portalNode = document.getElementById('yourNode')
<MapApp { ...YourOptions, portalNode}>
{
({MapGL}) => (
<YourContextMenu MapGL={MapGL}>
)
}
</MapApp>| 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 |
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.