added debug lines, upgraded mapbox-gl to v0.46.0, and added feature inspecting - closes #21

Author: justenPalmer

package-lock.json

@@ -27,7 +27,7 @@
     "js-file-download": "^0.4.1",
     "jshint": "^2.9.5",
     "jsonlint-lines-primitives": "^1.6.0",
-    "mapbox-gl": "^0.44.2",
+    "mapbox-gl": "^0.46.0",
     "mapbox-gl-inspect": "^1.3.1",
     "react-beautiful-dnd": "^7.1.3",
     "react-color": "^2.14.1",

package.json

@@ -31,7 +31,8 @@ label .badge{position:relative;top:2px;}
 .btn.btn-primary{background-color:#00ACC1;border-color:#00A7B6;}
 .btn.btn-primary:hover{background-color:#00A7B6;border-color:#0094A0;}
 .btn.btn-primary:active{background-color:#0094A0;border-color:#0094A0;}
-
+.btn.btn-gray{background-color:#37474F;color:#FFFFFF;}
+.btn.btn-gray:hover{background-color:#273237;}
 .btn.btn-light:focus{box-shadow:0 0 0 0.2rem rgba(0,123,255,.25);}
 
 /* Code mirror */
@@ -78,9 +79,10 @@ label .badge{position:relative;top:2px;}
 .font-lg{font-size:0.9rem;}
 
 .form-group label{font-size:0.8em;}
-.form-control{font-size:0.85em;}
-.form-control-sm{font-size:0.875rem;}
+.form-control{font-size:0.75rem;}
+.form-control-sm{font-size:0.65rem;}
 .form-control .btn{line-height:1.2;}
+.form-control .btn-right{float:right;position:relative;top:-4px;right:-10px;}
 
 .func-border{border:1px solid #546D79;}
 .func-add{border:1px dashed #EEEEEE;padding:0.2rem;font-size:0.7em;
@@ -99,7 +101,12 @@ label .badge{position:relative;top:2px;}
 
 .inline-block{display:inline-block;}
 
-.form-control .btn-right{float:right;position:relative;top:-3px;right:-9px;}
+.inspector-back{color:#AEAEAE;position:absolute;left:0;top:0;border:0;
+	border-radius:0 3px 0 0;cursor:pointer;background-color:transparent;}
+.inspector-back:hover{color:#747474;background-color: rgba(0, 0, 0, 0.05);}
+.inspector-overflow{padding-top:6px;max-width:200px;max-height:200px;overflow:auto;}
+
+
 
 .layer-nav-link{border-bottom:3px solid transparent;cursor:pointer;}
 .layer-nav-link.active{border-bottom:3px solid #273237;}
@@ -142,6 +149,10 @@ label .badge{position:relative;top:2px;}
 .map-inspect-list a{color:inherit;}
 .map-inspect-list .list-left{top:-1px;left:0;}
 
+.mapboxgl-ctrl-icon.active{background-color:#00ACC1;color:#FFF;}
+.mapboxgl-ctrl-icon.active:hover{background-color:#0197A7;color:#FFF;}
+.mapboxgl-ctrl-icon i{position:relative;top:-1px;}
+
 .mapboxgl-popup-close-button{color:#AEAEAE;}
 .mapboxgl-popup-close-button:hover{color:#747474;}
 
@@ -173,6 +184,8 @@ label .badge{position:relative;top:2px;}
 .o-scroll{overflow:scroll;}
 .o-y-scroll{overflow-y:auto;}
 
+.panel-float{position:fixed;z-index:1000;}
+
 .panel-min-height{min-height:300px;}
 .panel-z-index{z-index:3;}
 

src/App.css

@@ -198,6 +198,17 @@ export default {
 		return Store.getState().style.getIn(['rec','layers',ind])
 	},
 
+	getType:function(layerId){
+		const layer = this.get(layerId);
+		if (!layer || !layer.has) return;
+		if (layer.has('type')) return layer.get('type');
+		if (layer.has('ref')){
+			const refLayer = this.get(layer.get('ref'));
+			if (refLayer.has('type')) return refLayer.get('type');
+		}
+		// no type found
+	},
+
 	getInd:function(layerId){
 		return Store.getState().style.getIn(['rec','layers']).findIndex((layer)=>{
 			//console.log('layer:',layer)

src/model/Mlayer.js

@@ -0,0 +1,29 @@
+import Store from '../Store';
+
+export default {
+	add:function(panel){
+		return new Promise((resolve,reject)=>{
+			if (!panel.float) return reject('no float defined');
+			if (!panel.id) return reject('no panel id');
+
+			Store.dispatch({
+				type:'PANEL_ADD',
+				payload:panel
+			});
+
+			return resolve(panel);
+		});
+	},
+
+	getAll:function(){
+		return Store.getState().panel.get('recs');
+	},
+	get:function(id){
+		const panels = this.getAll();
+		let res;
+		panels.map((panel)=>{
+			if (panel.get('id') === id) res = panel;
+		});
+		return res;
+	}
+};

src/model/Mpanel.js

@@ -8,6 +8,9 @@ import Valert from '../view/Valert';
 import Vmap from '../view/Vmap';
 import Vstyle from '../view/Vstyle';
 
+import Vpanel from '../view/Vpanel';
+import Mpanel from '../model/Mpanel';
+
 const mapStoreToProps = (store)=>{
 	return {
 		style:store.style,
@@ -35,7 +38,7 @@ class Pstyle extends React.Component {
 
 		Mstyle.load(this.id);
 		Mstyle.errorsSet();
-		
+
 		this.handle = {
 			route:(path)=>{
 				this.props.history.push('/style/'+this.id+'/'+path);

src/page/Pstyle.jsx

@@ -0,0 +1,17 @@
+import {Map, List, fromJS} from 'immutable';
+
+const iState = Map({
+	recs:List([])
+});
+
+export default function(state = iState, action){
+	switch (action.type){
+		case 'PANEL_ADD':{
+			const rec = fromJS(action.payload);
+			const recs = state.get('recs').push(rec);
+			return state.set('recs',recs);
+		}
+		default:
+			return state;
+	}
+}

src/reducer/Rpanel.js

@@ -1,10 +1,12 @@
 import {combineReducers} from 'redux';
 import Rconfig from './Rconfig';
+import Rpanel from './Rpanel';
 import Rstyle from './Rstyle';
 import RstyleError from './RstyleError';
 import Rstyles from './Rstyles';
 
 export default combineReducers({
+	panel:Rpanel,
 	styles:Rstyles,
 	style:Rstyle,
 	styleError:RstyleError,

src/reducer/index.js

@@ -1,5 +1,6 @@
 import layerConfig from '../config/layer';
 import {List, Map} from 'immutable';
+import Mlayer from '../model/Mlayer';
 
 const CSS_COLOR_NAMES = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"];
 
@@ -51,7 +52,7 @@ export default {
 		*/
 	},
 	getIcon:function(layer){
-		const type = layer.get('type'),
+		const type = Mlayer.getType(layer.get('id')),
 			config = layerConfig.types[type];
 		if (!config) return null;
 		return config.icon;

src/utility/LayerIcon.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Vfeature extends React.Component {
+
+	static propTypes = {
+		features: PropTypes.array,
+		handle: PropTypes.object
+	}
+
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+
+	render (){
+		const {features, handle} = this.props;
+
+		// get property values
+
+		let cols = ['id'];
+		features.map((feature)=>{
+			if (!feature.properties) return;
+			Object.keys(feature.properties).map((i)=>{
+				if (cols.indexOf(i) === -1) cols.push(i);
+			});
+		});
+		
+		let ids = [];
+		let uniqueFeatures = features.filter((feature)=>{
+			// check if feature is already in
+			if (ids.indexOf(feature.id) === -1){
+				ids.push(feature.id);
+				return true;
+			}
+			return false;
+		});
+
+
+		return <table className="table font-sm table-sm">
+			<thead>
+				<tr>
+					{cols.map((col)=>{
+						return <th key={col}>{col}</th>
+					})}
+				</tr>
+			</thead>
+			<tbody>
+				{uniqueFeatures.map((feature)=>{
+					return <tr key={feature.id}>
+						{cols.map((col)=>{
+							return <td key={col}>
+								{feature.properties[col] || feature[col]}
+							</td>
+						})}
+					</tr>
+				})}
+			</tbody>
+
+		</table>
+
+		/*
+			
+			{features.map((feature)=>{
+
+				console.log('feature:',feature);
+
+				return <li key={feature.id} onClick={()=>{this.handle.featureClick(feature);}}><a href="javascript://">
+					{Object.keys(feature.properties).map((i)=>{
+						return i+': '+feature.properties[i];
+					})}
+				</a></li>
+			})}
+
+		*/
+	}
+};