google-react-maps
Version:
A more powerfully custom version of the Google Maps Javascript API built for React. Multiple Datalayer support. GEOJSON Enabled.
405 lines (315 loc) • 12 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Google React Maps Source: components/dataLayer.js</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.cosmo.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Google React Maps</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="topNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="google.maps.html">google.maps</a></li><li><a href="Utils.html">Utils</a></li>
</ul>
</li>
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="Circle.html">Circle</a></li><li><a href="Cluster.html">Cluster</a></li><li><a href="ClusterIconInfo.html">ClusterIconInfo</a></li><li><a href="ClusterIconStyle.html">ClusterIconStyle</a></li><li><a href="Feature.html">Feature</a></li><li><a href="google.maps.LatLngLiteral.html">google.maps.LatLngLiteral</a></li><li><a href="Map.html">Map</a></li><li><a href="Map.InfoWindow.html">Map.InfoWindow</a></li><li><a href="Map.Marker.html">Map.Marker</a></li><li><a href="Map.MarkerCluster.html">Map.MarkerCluster</a></li><li><a href="MapControl.html">MapControl</a></li><li><a href="MarkerClusterer.html">MarkerClusterer</a></li><li><a href="MarkerClustererOptions.html">MarkerClustererOptions</a></li>
</ul>
</li>
<li class="dropdown">
<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="MarkerClusterer.html#event:click">MarkerClusterer#event:click</a></li><li><a href="MarkerClusterer.html#event:clusteringbegin">MarkerClusterer#event:clusteringbegin</a></li><li><a href="MarkerClusterer.html#event:clusteringend">MarkerClusterer#event:clusteringend</a></li><li><a href="MarkerClusterer.html#event:mouseout">MarkerClusterer#event:mouseout</a></li><li><a href="MarkerClusterer.html#event:mouseover">MarkerClusterer#event:mouseover</a></li>
</ul>
</li>
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="global.html#processPoints">processPoints</a></li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
<div class="input-group-btn">
<button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="toc-content">
<div class="row">
<div class="col-md-12">
<div id="main">
<h1 class="page-title">Source: components/dataLayer.js</h1>
<section>
<article>
<pre
class="sunlight-highlight-javascript linenums">import React from 'react';
import PropTypes from 'prop-types';
import {processPoints} from '../utils/utils';
class DataLayer extends React.Component {
constructor(props) {
super(props);
this.displayName = 'DataLayer';
this.state = {
data : null
}
this.initDataLayer = this.initDataLayer.bind(this);
//Prop Checking
this.checkPropVisibility = this.checkPropVisibility.bind(this);
//Style
this.styleFeatures = this.styleFeatures.bind(this);
//Focus
this.focus = this.focus.bind(this);
}
/** Focus the map on this dataLayer's features. */
focus(){
var {maps,map} = this.props;
var bounds = new maps.LatLngBounds();
if(this.state.data) {
this.state.data.forEach((feature)=>{
processPoints(feature.getGeometry(), bounds.extend, bounds);
});
map.fitBounds(bounds);
}
}
initDataLayer() {
var {map, maps} = this.props;
var dataOptions = {
map
}
if(this.props.dataOptions)
dataOptions = Object.assign(dataOptions, this.props.dataOptions);
dataOptions = Object.assign(dataOptions, {
style : this.styleFeatures,
})
var dataLayer = new maps.Data(dataOptions)
//If there is geoJSON, initialize it.
if(this.props.geoJson) {
var options = { idPropertyName : '_id' };
if(this.props.idPropertyName)
options.idPropertyName = this.props.idPropertyName;
dataLayer.addGeoJson(this.props.geoJson, options);
}
// dataLayer.addListener('click', (event) => {
// var {feature} = event;
// var coords = event.latLng.toJSON()
// coords[0] = coords.lng;
// coords[1] = coords.lat;
// if(this.props.onClick)
// this.props.onClick({id : feature.getId(), coords });
// });
this.setState({ data : dataLayer })
}
checkPropVisibility(nextProps) {
var {visible} = this.props;
if(!visible && nextProps.visible) {
this.state.data.setMap(this.props.map);
}
else if(visible && !nextProps.visible)
this.state.data.setMap(null);
}
styleFeatures(feature) {
//If they passed in a function to completely overide style features, then do so.
if(this.props.styleFeatures)
return this.props.styleFeatures(feature);
var geo = feature.getGeometry();
var type = null;
if(geo)
type = geo.getType();
var visible = feature.getProperty('visible');
var zIndex = feature.getProperty('zIndex');
var strokeColor = feature.getProperty('strokeColor');
var fillColor = feature.getProperty('fillColor');
var fillOpacity = this.props.fillOpacity;
//Do some logic on the options to make things a bit easier.
if(!strokeColor)
strokeColor = fillColor;
zIndex = zIndex? zIndex : 10;
if(this.props.zIndex)
zIndex = zIndex + (10000 * this.props.zIndex) //TODO: Find a better way to separate out layer zIndexes. Right now we are defautling to 10000K features in a GeoJson schema. It works, but there should be a better way.
switch(type) {
case 'Polygon':
var polyOptions = {
strokeWeight : 1,
strokeColor,
fillColor,
fillOpacity
} //Potential Enhancement: Polyoptions could have different defaults. For now, we will leave this.
if(typeof visible !== 'undefined')
polyOptions.visible = true;
if(typeof zIndex !== 'undefined');
polyOptions.zIndex = zIndex;
return polyOptions;
default:
return {}
}
}
componentWillMount() {
if(this.props.maps && this.props.map) {
this.initDataLayer();
this.checkPropVisibility(this.props);
}
else
console.error(new Error("You must put this compenent in a <Map /> context component or provide the maps and map props manually."))
}
componentWillUnmount() {
this.state.data.setMap(null);
this.setState({data : null})
}
componentDidUpdate(prevProps, prevState) {
}
componentWillReceiveProps(nextProps) {
if(typeof nextProps.visible !== 'undefined') {
this.checkPropVisibility(nextProps);
}
}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
}
render() {
var children = []
if(this.state.data) {
children = React.Children.map(this.props.children, child => React.cloneElement(child, {
maps : this.props.maps,
map : this.props.map,
data : this.state.data
}));
}
return <div>{children}</div>;
}
}
DataLayer.propTypes = {
maps : PropTypes.object,
map : PropTypes.object,
dataOptions : PropTypes.object,
geoJson : PropTypes.object,
visible : PropTypes.bool,
onChange : PropTypes.func,
styleFeatures : PropTypes.func,
zIndex : PropTypes.number.isRequired,
fillOpacity : PropTypes.number
}
export default DataLayer;
</pre>
</article>
</section>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="modal fade" id="searchResults">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Search results</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<footer>
<span class="copyright">
This is a Austin Hunt project.
</span>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a>
on Tue May 30th 2017
using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>
<script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( ".tutorial-section pre, .readme-section pre" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
lang = langClassMatch ? langClassMatch[1] : "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : true,
showMenu : true,
enableDoclinks : true
} );
$.catchAnchorLinks( {
navbarOffset: 10
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
var id = $( heading ).attr( "id" );
return id && id.replace(/\~/g, '-inner-').replace(/\./g, '-static-') || ( prefix + i );
},
selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
showAndHide : false,
smoothScrolling: true
} );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( "table" ).each( function () {
var $this = $( this );
$this.addClass('table');
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>