mirror of
https://github.com/mapbox/mapbox-gl-draw.git
synced 2026-02-01 14:34:52 +00:00
initial
This commit is contained in:
Eden Halperin
parent
53f3f9b5bb
commit
052277f168
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules/
|
||||
17
index.html
Normal file
17
index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
||||
<meta charset=utf-8 />
|
||||
<title>Mapbox GL Draw | Mapbox</title>
|
||||
<script src='https://mapbox.s3.amazonaws.com/mapbox-gl-js/master/mapbox-gl-dev.js'></script>
|
||||
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
|
||||
<style>
|
||||
body { margin:0; padding:0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='app'></div>
|
||||
<script src='bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
29
package.json
Normal file
29
package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "gl-draw",
|
||||
"version": "0.0.1",
|
||||
"description": "GL draw experiment",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "watchify src/index.js -o bundle.js & serve -p 3100"
|
||||
},
|
||||
"author": "Eden Halperin",
|
||||
"license": "BSD",
|
||||
"browserify": {
|
||||
"transform": [
|
||||
[
|
||||
"reactify",
|
||||
{
|
||||
"es6": true
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"browserify": "^8.1.1",
|
||||
"immutable": "^3.6.2",
|
||||
"react": "^0.12.2",
|
||||
"reactify": "^1.0.0",
|
||||
"serve": "^1.4.0",
|
||||
"watchify": "^2.2.1"
|
||||
}
|
||||
}
|
||||
669
src/dark-v7.json
Normal file
669
src/dark-v7.json
Normal file
@ -0,0 +1,669 @@
|
||||
{
|
||||
"version": 7,
|
||||
"constants": {
|
||||
"@road-minor-width": {
|
||||
"base": 1.55,
|
||||
"stops": [
|
||||
[
|
||||
4,
|
||||
0.25
|
||||
],
|
||||
[
|
||||
20,
|
||||
30
|
||||
]
|
||||
]
|
||||
},
|
||||
"@sans_md": "Open Sans Semibold, Arial Unicode MS Bold",
|
||||
"@road-major-width": {
|
||||
"base": 1.4,
|
||||
"stops": [
|
||||
[
|
||||
6,
|
||||
0.5
|
||||
],
|
||||
[
|
||||
20,
|
||||
30
|
||||
]
|
||||
]
|
||||
},
|
||||
"@road-minor": "#000000",
|
||||
"@park": "rgba(0,0,0,0.2)",
|
||||
"@land": "#2e2f2e",
|
||||
"@name": "{name_en}",
|
||||
"@road-major": "#000",
|
||||
"@sans_bd": "Open Sans Bold, Arial Unicode MS Bold",
|
||||
"@sans": "Open Sans Regular, Arial Unicode MS Regular",
|
||||
"@label": "#737373",
|
||||
"@building": "rgba(0,0,0,0.4)",
|
||||
"@label-halo": "#060606",
|
||||
"@water": "#090909"
|
||||
},
|
||||
"sources": {
|
||||
"mapbox": {
|
||||
"type": "vector",
|
||||
"url": "mapbox://mapbox.mapbox-streets-v6-dev",
|
||||
"maxZoom": 15
|
||||
}
|
||||
},
|
||||
"sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/sprite",
|
||||
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
|
||||
"layers": [
|
||||
{
|
||||
"id": "background",
|
||||
"type": "background",
|
||||
"paint": {
|
||||
"background-color": "@land"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "landuse_park",
|
||||
"type": "fill",
|
||||
"source": "mapbox",
|
||||
"source-layer": "landuse",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"class",
|
||||
"park"
|
||||
]
|
||||
],
|
||||
"paint": {
|
||||
"fill-color": "@park"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "waterway",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "waterway",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
],
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"river",
|
||||
"canal"
|
||||
]
|
||||
],
|
||||
"paint": {
|
||||
"line-color": "@water",
|
||||
"line-width": {
|
||||
"base": 1.4,
|
||||
"stops": [
|
||||
[
|
||||
8,
|
||||
0.5
|
||||
],
|
||||
[
|
||||
20,
|
||||
15
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "water",
|
||||
"type": "fill",
|
||||
"source": "mapbox",
|
||||
"source-layer": "water",
|
||||
"paint": {
|
||||
"fill-color": "@water"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "building",
|
||||
"type": "fill",
|
||||
"source": "mapbox",
|
||||
"source-layer": "building",
|
||||
"paint": {
|
||||
"fill-color": "@building"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "tunnel_minor",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "tunnel",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
],
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway_link",
|
||||
"street",
|
||||
"street_limited",
|
||||
"service",
|
||||
"driveway",
|
||||
"path"
|
||||
]
|
||||
],
|
||||
"paint": {
|
||||
"line-color": "@road-minor",
|
||||
"line-width": "@road-minor-width",
|
||||
"line-dasharray": [
|
||||
2,
|
||||
1
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "tunnel_major",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "tunnel",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
],
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway",
|
||||
"main"
|
||||
]
|
||||
],
|
||||
"paint": {
|
||||
"line-color": "@road-major",
|
||||
"line-width": "@road-major-width",
|
||||
"line-dasharray": [
|
||||
2,
|
||||
1
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "road_minor",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "road",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway_link",
|
||||
"street",
|
||||
"street_limited",
|
||||
"service",
|
||||
"driveway",
|
||||
"path"
|
||||
],
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "@road-minor",
|
||||
"line-width": "@road-minor-width"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "road_major",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "road",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
],
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway",
|
||||
"main"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "@road-major",
|
||||
"line-width": "@road-major-width"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bridge_minor_case",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "bridge",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
],
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway_link",
|
||||
"street",
|
||||
"street_limited",
|
||||
"service",
|
||||
"driveway",
|
||||
"path"
|
||||
]
|
||||
],
|
||||
"paint": {
|
||||
"line-color": "@land",
|
||||
"line-width": {
|
||||
"base": 1.6,
|
||||
"stops": [
|
||||
[
|
||||
12,
|
||||
0.5
|
||||
],
|
||||
[
|
||||
20,
|
||||
10
|
||||
]
|
||||
]
|
||||
},
|
||||
"line-gap-width": "@road-minor-width"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bridge_major_case",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "bridge",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway",
|
||||
"main"
|
||||
],
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
]
|
||||
],
|
||||
"paint": {
|
||||
"line-color": "@land",
|
||||
"line-width": {
|
||||
"base": 1.4,
|
||||
"stops": [
|
||||
[
|
||||
12,
|
||||
0.5
|
||||
],
|
||||
[
|
||||
20,
|
||||
10
|
||||
]
|
||||
]
|
||||
},
|
||||
"line-gap-width": "@road-major-width"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bridge_minor",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "bridge",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
],
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway_link",
|
||||
"street",
|
||||
"street_limited",
|
||||
"service",
|
||||
"driveway",
|
||||
"path"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "@road-minor",
|
||||
"line-width": "@road-minor-width"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bridge_major",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "bridge",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway",
|
||||
"main"
|
||||
],
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "@road-major",
|
||||
"line-width": "@road-major-width"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "admin",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "admin",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"maritime",
|
||||
0
|
||||
],
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#000000",
|
||||
"line-width": {
|
||||
"base": 1.3,
|
||||
"stops": [
|
||||
[
|
||||
3,
|
||||
1
|
||||
],
|
||||
[
|
||||
20,
|
||||
15
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "country_label_line",
|
||||
"type": "line",
|
||||
"source": "mapbox",
|
||||
"source-layer": "country_label_line",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
]
|
||||
],
|
||||
"paint": {
|
||||
"line-color": "#aaa"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "country_label",
|
||||
"type": "symbol",
|
||||
"source": "mapbox",
|
||||
"source-layer": "country_label",
|
||||
"maxzoom": 12,
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"Point"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"text-field": "@name",
|
||||
"text-font": "Open Sans Semibold, Arial Unicode MS Regular",
|
||||
"text-max-size": 22,
|
||||
"text-max-width": 10
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "@label",
|
||||
"text-halo-color": "@label-halo",
|
||||
"text-halo-width": 2,
|
||||
"text-halo-blur": 1,
|
||||
"text-size": {
|
||||
"stops": [
|
||||
[
|
||||
3,
|
||||
14
|
||||
],
|
||||
[
|
||||
8,
|
||||
22
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "place_label_city",
|
||||
"type": "symbol",
|
||||
"source": "mapbox",
|
||||
"source-layer": "place_label",
|
||||
"maxzoom": 16,
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"Point"
|
||||
],
|
||||
[
|
||||
"==",
|
||||
"type",
|
||||
"city"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"text-field": "@name",
|
||||
"text-font": "Open Sans Regular, Arial Unicode MS Bold",
|
||||
"text-max-width": 10
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "@label",
|
||||
"text-halo-color": "@label-halo",
|
||||
"text-halo-width": 1.75,
|
||||
"text-halo-blur": 1,
|
||||
"text-size": {
|
||||
"stops": [
|
||||
[
|
||||
3,
|
||||
12
|
||||
],
|
||||
[
|
||||
8,
|
||||
16
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "place_label_other",
|
||||
"type": "symbol",
|
||||
"source": "mapbox",
|
||||
"source-layer": "place_label",
|
||||
"minzoom": 8,
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"Point"
|
||||
],
|
||||
[
|
||||
"in",
|
||||
"type",
|
||||
"town",
|
||||
"village",
|
||||
"hamlet",
|
||||
"suburb",
|
||||
"neighbourhood"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"text-field": "@name",
|
||||
"text-font": "Open Sans Italic, Arial Unicode MS Bold",
|
||||
"text-max-width": 6
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "@label",
|
||||
"text-halo-color": "@label-halo",
|
||||
"text-halo-width": 1,
|
||||
"text-halo-blur": 1,
|
||||
"text-size": {
|
||||
"stops": [
|
||||
[
|
||||
6,
|
||||
12
|
||||
],
|
||||
[
|
||||
12,
|
||||
16
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "road_major_label",
|
||||
"type": "symbol",
|
||||
"source": "mapbox",
|
||||
"source-layer": "road_label",
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"in",
|
||||
"class",
|
||||
"motorway",
|
||||
"main"
|
||||
],
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"LineString"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"symbol-placement": "line",
|
||||
"text-field": "@name",
|
||||
"text-font": "@sans_md",
|
||||
"text-transform": "uppercase",
|
||||
"text-letter-spacing": 0.1,
|
||||
"text-max-size": 14
|
||||
},
|
||||
"paint": {
|
||||
"text-color": "@label",
|
||||
"text-halo-color": "@label-halo",
|
||||
"text-halo-width": 2,
|
||||
"text-size": {
|
||||
"base": 1.4,
|
||||
"stops": [
|
||||
[
|
||||
10,
|
||||
8
|
||||
],
|
||||
[
|
||||
20,
|
||||
14
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "poi_label",
|
||||
"type": "symbol",
|
||||
"source": "mapbox",
|
||||
"source-layer": "poi_label",
|
||||
"minzoom": 5,
|
||||
"filter": [
|
||||
"all",
|
||||
[
|
||||
"==",
|
||||
"scalerank",
|
||||
1
|
||||
],
|
||||
[
|
||||
"==",
|
||||
"localrank",
|
||||
1
|
||||
],
|
||||
[
|
||||
"==",
|
||||
"$type",
|
||||
"Point"
|
||||
]
|
||||
],
|
||||
"layout": {
|
||||
"icon-image": "{maki}-12",
|
||||
"icon-max-size": 1,
|
||||
"text-offset": [
|
||||
0,
|
||||
0.5
|
||||
],
|
||||
"text-field": "@name",
|
||||
"text-font": "@sans_md",
|
||||
"text-max-size": 11,
|
||||
"text-max-width": 8,
|
||||
"text-anchor": "top"
|
||||
},
|
||||
"paint": {
|
||||
"icon-size": 1,
|
||||
"icon-halo-width": 0,
|
||||
"icon-halo-color": "@label-halo",
|
||||
"text-color": "@label",
|
||||
"text-halo-width": 1,
|
||||
"text-halo-color": "@label-halo",
|
||||
"text-halo-blur": 1,
|
||||
"text-size": 11
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
54
src/draw_layers.js
Normal file
54
src/draw_layers.js
Normal file
@ -0,0 +1,54 @@
|
||||
module.exports = [
|
||||
{
|
||||
"id": "gl-draw-points",
|
||||
"type": "symbol",
|
||||
"source": "draw",
|
||||
"filter": ["all", ["==", "$type", "Point"]],
|
||||
"layout": {
|
||||
"icon-image": "dot.sdf",
|
||||
"icon-ignore-placement": true,
|
||||
"icon-max-size": 1,
|
||||
"icon-allow-overlap": true
|
||||
},
|
||||
"paint": {
|
||||
"icon-color": "#f1f075",
|
||||
"icon-size": 2
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygons",
|
||||
"type": "fill",
|
||||
"source": "draw",
|
||||
"filter": ["all", ["==", "$type", "Polygon"]],
|
||||
"paint": {
|
||||
"fill-color": "#56b881",
|
||||
"fill-outline-color": "#56b881",
|
||||
"fill-opacity": 0.5
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-stroke",
|
||||
"type": "line",
|
||||
"source": "draw",
|
||||
"filter": ["all", ["==", "$type", "Polygon"]],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#56b881",
|
||||
"line-width": 2
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-line",
|
||||
"type": "line",
|
||||
"source": "draw",
|
||||
"filter": ["all", ["==", "$type", "LineString"]],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#8a8acb",
|
||||
"line-width": 4
|
||||
}
|
||||
}
|
||||
];
|
||||
137
src/index.js
Normal file
137
src/index.js
Normal file
@ -0,0 +1,137 @@
|
||||
var React = require('react');
|
||||
var Immutable = require('immutable');
|
||||
var darkStyle = require('./dark-v7.json');
|
||||
var drawLayers = require('./draw_layers.js');
|
||||
|
||||
var getFeature = function(type, active) {
|
||||
return Immutable.fromJS({
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: type,
|
||||
coordinates: type === 'Polygon' ? [active] :
|
||||
type === 'LineString' ? active :
|
||||
active.toJS()[0]
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var bakeData = function(type, active, features) {
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: features.push(getFeature(type, active)).toJS()
|
||||
};
|
||||
};
|
||||
|
||||
var App = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
type: false,
|
||||
features: Immutable.List(),
|
||||
activeCoordinates: Immutable.List(),
|
||||
activePoint: Immutable.List()
|
||||
};
|
||||
},
|
||||
componentDidMount() {
|
||||
window.addEventListener('keyup', this.keybinding);
|
||||
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoiZWRlbmhhbHBlcmluIiwiYSI6IlFRZG0zMWMifQ.QUNKx4tIMjZfwmrE8SE6Bg';
|
||||
|
||||
this.map = new mapboxgl.Map({
|
||||
container: this.refs.map.getDOMNode(),
|
||||
hash: true,
|
||||
style: darkStyle
|
||||
});
|
||||
|
||||
this.sourceObj = new mapboxgl.GeoJSONSource ({
|
||||
data: bakeData('Point', Immutable.fromJS([0, 0]), this.state.features)
|
||||
});
|
||||
|
||||
this.map.on('load', () => {
|
||||
darkStyle.layers = darkStyle.layers.concat(drawLayers);
|
||||
this.map.setStyle(darkStyle);
|
||||
this.map.addSource('draw', this.sourceObj);
|
||||
});
|
||||
this.map.on('click', this.onClick);
|
||||
this.map.on('hover', this.onHover);
|
||||
},
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('keyup', this.keybinding);
|
||||
},
|
||||
keybinding(e) {
|
||||
if (e.which === 27) {
|
||||
if (this.state.type !== 'Point') this.endFeature(this.state.type);
|
||||
this.setState({ type: false });
|
||||
}
|
||||
},
|
||||
toggleType(type, e) {
|
||||
e.preventDefault();
|
||||
this.setState({ type: this.state.type === type ? false : type });
|
||||
},
|
||||
onClick(e) {
|
||||
if (!this.state.type) return;
|
||||
this.setState({
|
||||
activeCoordinates: this.state.activeCoordinates.push(this.state.activePoint)
|
||||
});
|
||||
if (this.state.type === 'Point') {
|
||||
this.endFeature(this.state.type);
|
||||
} else {
|
||||
this.setData(true);
|
||||
}
|
||||
},
|
||||
onHover(e) {
|
||||
if (!this.state.type) return;
|
||||
var point = this.map.unproject([e.point.x, e.point.y]);
|
||||
this.setState({ activePoint: Immutable.fromJS([point.lng, point.lat]) });
|
||||
this.setData();
|
||||
},
|
||||
setData(click) {
|
||||
var active = this.state.activeCoordinates;
|
||||
if (!click) active = active.push(this.state.activePoint);
|
||||
this.sourceObj.setData(
|
||||
bakeData(this.state.type, active, this.state.features));
|
||||
},
|
||||
endFeature(type) {
|
||||
var active = this.state.activeCoordinates;
|
||||
if (type === 'Polygon') active = active.push(this.state.activeCoordinates.first());
|
||||
|
||||
this.sourceObj.setData(
|
||||
bakeData(type, active, this.state.features));
|
||||
|
||||
this.setState({
|
||||
activeCoordinates: Immutable.List(),
|
||||
activePoint: Immutable.List(),
|
||||
features: this.state.features.push(getFeature(type, active))
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className='pin-topleft pad1 z10'>
|
||||
<div className='fl pad1'>
|
||||
<a href='#'
|
||||
onClick={this.toggleType.bind(this, 'Point')}
|
||||
className={'pad1 icon marker quiet dark space-bottom1 block ' +
|
||||
(this.state.type === 'Point' ? 'fill-blue' : 'fill-dark')}></a>
|
||||
<a href='#'
|
||||
onClick={this.toggleType.bind(this, 'Polygon')}
|
||||
className={'pad1 icon polygon quiet fill-dark dark space-bottom1 block ' +
|
||||
(this.state.type === 'Polygon' ? 'fill-blue' : 'fill-dark')}></a>
|
||||
<a href='#'
|
||||
onClick={this.toggleType.bind(this, 'LineString')}
|
||||
className={'pad1 icon polyline quiet fill-dark dark space-bottom1 block ' +
|
||||
(this.state.type === 'LineString' ? 'fill-blue' : 'fill-dark')}></a>
|
||||
</div>
|
||||
{this.state.type && <div className='fl pad1x pad2y strong dark'>'Esc' to end</div>}
|
||||
</div>
|
||||
<div ref='map'
|
||||
className='pin-top pin-bottom col12'
|
||||
style={{
|
||||
cursor: this.state.type ? 'crosshair' : 'auto'
|
||||
}}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<App />, document.getElementById('app'));
|
||||
Loading…
x
Reference in New Issue
Block a user