mapbox-gl-draw-passing-mode
Version:
passing drawing mode for mapbox-gl-draw
220 lines (203 loc) • 7.92 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mapbox Gl Draw Passing Mode (Demo)</title>
<link rel="stylesheet" href="docs/style.css" />
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js"></script>
<script type="module" src="dist/mapbox-gl-draw-passing-mode.js"></script>
<script type="module">
import nprogress from "https://cdn.skypack.dev/nprogress";
window.nprogress = nprogress;
nprogress.start();
</script>
<script type="text/babel" data-type="module">
import React, {
useRef,
useState,
useEffect,
} from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
console.log(
"🚀 ~ file: test.html ~ line 54 ~ mapboxGlDrawPassingMode",
mapboxGlDrawPassingMode
);
class extendDrawBar {
constructor(opt) {
let ctrl = this;
ctrl.draw = opt.draw;
ctrl.buttons = opt.buttons || [];
ctrl.onAddOrig = opt.draw.onAdd;
ctrl.onRemoveOrig = opt.draw.onRemove;
}
onAdd(map) {
let ctrl = this;
ctrl.map = map;
ctrl.elContainer = ctrl.onAddOrig(map);
ctrl.buttons.forEach((b) => {
ctrl.addButton(b);
});
return ctrl.elContainer;
}
onRemove(map) {
ctrl.buttons.forEach((b) => {
ctrl.removeButton(b);
});
ctrl.onRemoveOrig(map);
}
addButton(opt) {
let ctrl = this;
const elButton = document.createElement("button");
elButton.className = "mapbox-gl-draw_ctrl-draw-btn";
elButton.setAttribute("title", opt.title);
if (opt.classes instanceof Array) {
opt.classes.forEach((c) => {
elButton.classList.add(c);
});
}
elButton.addEventListener(opt.on, opt.action);
ctrl.elContainer.appendChild(elButton);
opt.elButton = elButton;
}
removeButton(opt) {
opt.elButton.removeEventListener(opt.on, opt.action);
opt.elButton.remove();
}
}
export default function App() {
if (mapboxgl.getRTLTextPluginStatus() === "unavailable")
mapboxgl.setRTLTextPlugin(
"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js",
(err) => {
err && console.error(err);
},
true
);
let mapRef = useRef(null);
useEffect(() => {
const map = new mapboxgl.Map({
container: mapRef.current || "",
style: `https://map.ir/vector/styles/main/mapir-xyz-light-style.json`,
center: [51.3857, 35.6102],
zoom: 10,
pitch: 0,
interactive: true,
hash: true,
attributionControl: true,
transformRequest: (url) => {
return {
url: url,
headers: {
"x-api-key":
"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImRiZWU0YWU4OTk4OTA3MmQ3OTFmMjQ4ZDE5N2VhZTgwZWU2NTUyYjhlYjczOWI2NDdlY2YyYzIzNWRiYThiMzIzOTM5MDkzZDM0NTY2MmU3In0.eyJhdWQiOiI5NDMyIiwianRpIjoiZGJlZTRhZTg5OTg5MDcyZDc5MWYyNDhkMTk3ZWFlODBlZTY1NTJiOGViNzM5YjY0N2VjZjJjMjM1ZGJhOGIzMjM5MzkwOTNkMzQ1NjYyZTciLCJpYXQiOjE1OTA4MjU0NzIsIm5iZiI6MTU5MDgyNTQ3MiwiZXhwIjoxNTkzNDE3NDcyLCJzdWIiOiIiLCJzY29wZXMiOlsiYmFzaWMiXX0.M_z4xJlJRuYrh8RFe9UrW89Y_XBzpPth4yk3hlT-goBm8o3x8DGCrSqgskFfmJTUD2wC2qSoVZzQKB67sm-swtD5fkxZO7C0lBCMAU92IYZwCdYehIOtZbP5L1Lfg3C6pxd0r7gQOdzcAZj9TStnKBQPK3jSvzkiHIQhb6I0sViOS_8JceSNs9ZlVelQ3gs77xM2ksWDM6vmqIndzsS-5hUd-9qdRDTLHnhdbS4_UBwNDza47Iqd5vZkBgmQ_oDZ7dVyBuMHiQFg28V6zhtsf3fijP0UhePCj4GM89g3tzYBOmuapVBobbX395FWpnNC3bYg7zDaVHcllSUYDjGc1A",
"Mapir-SDK": "reactjs",
},
};
},
});
const draw = new MapboxDraw({
modes: {
...MapboxDraw.modes,
passing_draw_point: mapboxGlDrawPassingMode.passing_draw_point,
passing_draw_line_string:
mapboxGlDrawPassingMode.passing_draw_line_string,
passing_draw_polygon:
mapboxGlDrawPassingMode.passing_draw_polygon,
},
});
console.log(
"🚀 ~ file: test.html ~ line 122 ~ useEffect ~ draw",
draw
);
map.on("draw.passing-create", (info) => {
console.info("draw.passing-create", info);
});
map.once("load", () => {
nprogress.done();
map.resize();
const drawBar = new extendDrawBar({
draw: draw,
buttons: [
{
title: "Passing-Point tool",
on: "click",
action: () => {
draw.changeMode("passing_draw_point", {
onDraw: (feature) => {
alert(JSON.stringify(feature, undefined, 4));
console.log(feature);
},
});
},
classes: ["passing_mode", "point"],
},
{
title: "Passing-LineString tool",
on: "click",
action: () => {
draw.changeMode("passing_draw_line_string", {
onDraw: (feature) => {
alert(JSON.stringify(feature, undefined, 4));
console.log(feature);
},
});
},
classes: ["passing_mode", "line"],
},
{
title: "Passing-Polygon tool",
on: "click",
action: () => {
draw.changeMode("passing_draw_polygon", {
onDraw: (feature) => {
alert(JSON.stringify(feature, undefined, 4));
console.log(feature);
},
});
},
classes: ["passing_mode", "polygon"],
},
],
});
map.addControl(drawBar, "top-right");
// draw.set({
// type: "FeatureCollection",
// features: [
// {
// type: "Feature",
// properties: {},
// id: "example-id",
// geometry: {
// type: "Polygon",
// coordinates: [
// [
// [51.41742415918904, 35.73019558439101],
// [51.31319413385742, 35.702773908694724],
// [51.378997493472525, 35.665562843119986],
// [51.45008537540798, 35.67776544979942],
// [51.46619566741822, 35.70822028156377],
// [51.41742415918904, 35.73019558439101],
// ],
// ],
// },
// },
// ],
// });
});
}, []);
return (
<div className="map-wrapper">
<div id="map" ref={mapRef} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>