https://github.com/soaple/stickyboard-mapbox
MapBox component for StickyBoard
https://github.com/soaple/stickyboard-mapbox
Last synced: about 1 year ago
JSON representation
MapBox component for StickyBoard
- Host: GitHub
- URL: https://github.com/soaple/stickyboard-mapbox
- Owner: soaple
- License: mit
- Created: 2020-08-18T14:16:35.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-11T14:22:20.000Z (almost 6 years ago)
- Last Synced: 2025-03-12T14:50:37.960Z (over 1 year ago)
- Language: JavaScript
- Size: 104 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stickyboard-mapbox
MapBox component for StickyBoard
[](https://npmjs.org/package/@stickyboard/mapbox)
[](https://npmjs.org/package/@stickyboard/mapbox)
[](https://github.com/soaple/@stickyboard/mapbox/blob/master/package.json)
# Webpack watch
```bsh
$ npm start
```
# Build
```bsh
$ npm run build
```
# Usage examples
## Basic marker and line sample
```javascript
import React from 'react';
import { MapBox } from '@stickyboard/mapbox';
const sampleInputs = {
data: {
mapboxKey: 'YOUR MAPBOX KEY VALUE HERE!!!',
title: 'Stickyboard-mapbox example',
description: 'This component is one of stickers in Stickyboard',
},
map: {
canvas: {},
camera: {
center: [-77.04, 38.907],
zoom: 10,
},
marker: [
{
coordinates: [-77.038659, 38.931567],
title: 'Mapbox Sticker Example#1',
description: 'Make it Mount Pleasant',
display: true,
closeOnClick: true,
},
{
coordinates: [-77.003168, 38.894651],
title: 'Mapbox Sticker Example#2',
description:
'Mad Men Season Five Finale Watch Party
Head to Lounge 201 (201 Massachusetts Avenue NE) Sunday for a Mad Men Season Five Finale Watch Party, complete with 60s costume contest, Mad Men trivia, and retro food and drink. 8:00-11:00 p.m. $10 general admission, $20 admission and two hour open bar.
',
closeOnClick: true,
},
{
coordinates: [-77.090372, 38.881189],
title: 'Mapbox Sticker Example#3',
description:
'Big Backyard Beach Bash and Wine FestEatBar (2761 Washington Boulevard Arlington VA) is throwing a Big Backyard Beach Bash and Wine Fest on Saturday, serving up conch fritters, fish tacos and crab sliders, and Red Apron hot dogs. 12:00-3:00 p.m. $25.
',
closeOnClick: true,
},
{
coordinates: [-77.111561, 38.882342],
title: 'Mapbox Sticker Example#4',
description: 'Ballston Arts & Crafts Market',
display: true,
closeOnClick: true,
},
],
line: [
{
paint: {
lineColor: '#888',
lineWidth: 8,
},
coordinates: [
[-77.038659, 38.931567],
[-77.003168, 38.894651],
[-77.090372, 38.881189],
[-77.111561, 38.882342],
],
title: 'line#1',
description: 'line#1 description here',
},
{
paint: {
lineColor: '#222',
lineWidth: 8,
},
coordinates: [
[-112.48369693756104, 37.83381888486939],
[-112.48348236083984, 37.83317489144141],
[-112.48339653015138, 37.83270036637107],
[-112.48356819152832, 37.832056363179625],
[-112.48404026031496, 37.83114119107971],
[-112.48404026031496, 37.83049717427869],
[-112.48348236083984, 37.829920943955045],
[-112.48356819152832, 37.82954808664175],
[-112.48507022857666, 37.82944639795659],
[-112.48610019683838, 37.82880236636284],
[-112.48695850372314, 37.82931081282506],
[-112.48700141906738, 37.83080223556934],
[-112.48751640319824, 37.83168351665737],
[-112.48803138732912, 37.832158048267786],
[-112.48888969421387, 37.83297152392784],
[-112.48987674713133, 37.83263257682617],
[-112.49043464660643, 37.832937629287755],
[-112.49125003814696, 37.832429207817725],
[-112.49163627624512, 37.832564787218985],
[-112.49223709106445, 37.83337825839438],
[-112.49378204345702, 37.83368330777276],
],
title: 'line#1',
description: 'line#1 description here',
},
],
},
};
function MapBoxChart(props) {
return (
);
}
export default MapBoxChart;
```
## Pitch and bearing
```javascript
map: {
canvas: {
...
},
camera: {
center: [-77.04, 38.907],
zoom: 11,
pitch:60,
bearing:-60
},
...
}
```
## Enable / disable scroll zoom
Default is disable.
```javascript
map: {
canvas: {
scrollZoom: true
},
```
## 6 types of Map style
* streets-v11 (default)
```javascript
map: {
canvas: {
style: 0,
```
* light-v10
```javascript
map: {
canvas:{
style: 1,
```
* dark-v10
```javascript
map: {
canvas: {
style: 2,
```
* satellite-v9
```javascript
map: {
canvas: {
style: 3,
```
* satellite-streets-v11
```javascript
map: {
canvas: {
style: 4,
```
* outdoors-v11
```javascript
map: {
canvas: {
style: 5,
```
## Play map locations as a slide show
```javascript
import React from 'react';
import { MapBox } from '@stickyboard/mapbox';
const sampleInputs = {
data: {
mapboxKey: 'YOUR MAPBOX KEY VALUE HERE!!!',
title: 'Stickyboard-mapbox example',
description: 'This component is one of stickers in Stickyboard',
},
map: {
canvas: {
style: 2,
scrollZoom: true,
},
camera: {
center: [-73.9499, 40.626],
zoom: 11,
pitch: 60,
bearing: -60,
centerTheMapOnAClick: true,
},
},
slideshow: {
maxZoom: 16,
minZoom: 9,
timeoutSec: 3,
location: [
{
id: '2',
title: 'The Bronx',
description:
"This is where hip-hop was born, where the Yankees became a dynasty and where you can find New York City's leading zoo and botanical garden.",
camera: {
center: [-73.8709, 40.8255],
zoom: 12.21,
pitch: 50,
},
},
{
id: '3',
title: 'Brooklyn',
description:
"No matter how hip it looks on TV, NYC's most populous borough is best experienced in person. Read on to find out about live music, Prospect Park, Nets basketball and more.",
camera: {
center: [-73.9499, 40.626],
bearing: -8.9,
zoom: 11.68,
},
},
{
id: '1',
title: 'Manhattan',
description:
'Even if you think you know Manhattan—its world-class museums, fine dining and unforgettable views—the borough always has something new and exciting in store.',
camera: {
center: [-74.007, 40.7437],
bearing: 25.3,
zoom: 11.5,
},
},
{
id: '4',
title: 'Queens',
description:
"Taste food from around the globe, watch Mets baseball and US Open tennis, see cutting-edge art and more in one of the world's most diverse places.",
camera: {
center: [-73.8432, 40.6923],
bearing: 36,
zoom: 11.37,
},
},
{
id: '5',
title: 'Staten Island',
description:
'Take a free ferry ride to an island getaway filled with historic architecture, stunning views, gardens and many family-friendly attractions.',
camera: {
center: [-74.1991, 40.5441],
bearing: 28.4,
zoom: 11.64,
},
},
{
title: 'Boroughs of new york',
description:
'New York City is made up of five boroughs: the Bronx, Brooklyn, Manhattan, Queens and Staten Island. Each one has enough attractions—and enough personality—to be a city all its own.',
camera: {
center: [-74.0315, 40.6989],
zoom: 9.68,
bearing: 0,
pitch: 0,
},
},
],
},
};
function MapBoxChart(props) {
return (
);
}
export default MapBoxChart;
```
## Additional source and layers
* vector tile source
```javascript
data: {
...
},
map: {
...
},
slideshow: {
...
},
source: [
{
name: 'mapbox-terrain',
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2',
},
],
layer: [
{
id: 'terrain-data',
type: 'line',
source: 'mapbox-terrain',
'source-layer': 'contour',
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': '#ff69b4',
'line-width': 1,
},
},
],
```
## 3D building layers
You can simply set 3d building layers with building3d props value as true
```javascript
data: {
...
},
map: {
canvas: {
...
building3d: true,
```
Here's an simple sample code of above picture.
```javascript
import React from 'react';
import { MapBox } from '@stickyboard/mapbox';
const sampleInputs = {
data:{
mapboxKey:'YOUR MAPBOX KEY VALUE HERE!!!',
title:'Stickyboard-mapbox example',
description: 'This component is one of stickers in Stickyboard',
},
map:{
canvas:{
style:0,
building3d:true,
scrollZoom:true
},
camera:{
center: [126.939016, 37.519961],
zoom: 16.5,
pitch:30,
bearing:-20,
centerTheMapOnAClick:true
},
},
}
function MapBoxChart(props) {
return (
);
}
export default MapBoxChart;
```
## Geolocation enable
User can enable geolocation and map will fly to the location where the user is.
```javascript
map:{
canvas:{
...
geoLocation:true,
```
If you put openweatherAPI key, weather information of the location will be popped up.
```javascript
data:{
...
openweathermapKey:'OPENWEATHERMAP API KEY HERE'
```
# License
This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).
However, this project has a dependency on [MapBox GL JS](https://github.com/mapbox/mapbox-gl-js/).
For legitimate use, you have to check a [3-Clause BSD license](https://github.com/mapbox/mapbox-gl-js/blob/main/LICENSE.txt).