<commit_before>import React, { PropTypes } from 'react';
import {
	Map,
	GeoJson,
	TileLayer
} from 'react-leaflet';
import leaflet from 'leaflet';

import appConfig from '../../static/appConfig.json';

class GeoJsonMap extends React.Component {

	constructor (props) {

		super(props);
		this.state = {};
		this.onMapLayerAdd = this.onMapLayerAdd.bind(this);

	}

	static propTypes = {
		path: PropTypes.string.isRequired,
		fetchJSON: PropTypes.func.isRequired
	}

	componentWillMount () {

		let { path } = this.props;

		this.props.fetchJSON(path)
		.then(

			response => {
				
				this.setState({
					geoJson: response
				});
			},

			error => {
				this.setState({
					loadError: `Could not fetch/read GeoJSON from ${ path }`
				});
			}

		);

	}

	render () {

		let body = '';

		if (this.state.geoJson) {

			let mapConfig = {
				zoom: 8,
				center: [0, 0],
				zoomSnap: 0.0,
				zoomControl: false,
				attributionControl: false,
				keyboard: false,
				dragging: false,
				touchZoom: false,
				scrollWheelZoom: false,
				doubleClickZoom: false,
				boxZoom: false
			};

			body = (
				<Map { ...mapConfig } ref='leafletMap' className='map-container' onLayeradd={ this.onMapLayerAdd }>
					{ this.renderTileLayers() }
					<GeoJson className='geojson-layer' data={ this.state.geoJson } />
				</Map>
			);

		} else if (this.state.loadError) {

			body = (
				<div className='load-error'>
					{ this.state.loadError }
				</div>
			);

		}

		return (
			<div className='geojson-map'>
				{ body }
			</div>
		);

	}

	renderTileLayers () {

		let layers = [];

		if (appConfig.map.tileLayers) {
			layers = layers.concat(appConfig.map.tileLayers.map((item, i) => {
				return (
					<TileLayer
						key={ 'tile-layer-' + i }
						url={ item.url }
					/>
				);
			}));
		}

		return layers;

	}

	onMapLayerAdd (event) {

		if (event.layer.feature) {
			console.log(">>>>> onMapLayerAdd");
			// fit map bounds to GeoJSON layer once it loads
			this.refs.leafletMap.leafletElement.fitBounds(
				event.layer.getBounds(),
				{
					animate: false,
					padding: [20, 20]
				}
			);
		}

	}

}<commit_msg>Zoom geojson map to bounds correctly<commit_after>import React, { PropTypes } from 'react';
import {
	Map,
	GeoJson,
	TileLayer
} from 'react-leaflet';
import leaflet from 'leaflet';

import appConfig from '../../static/appConfig.json';

class GeoJsonMap extends React.Component {

	constructor (props) {

		super(props);
		this.state = {};

	}

	static propTypes = {
		path: PropTypes.string.isRequired,
		fetchJSON: PropTypes.func.isRequired
	}

	componentWillMount () {

		let { path } = this.props;

		this.props.fetchJSON(path)
		.then(

			response => {
				
				this.setState({
					geoJson: response
				});
			},

			error => {
				this.setState({
					loadError: `Could not fetch/read GeoJSON from ${ path }`
				});
			}

		);

	}

	componentDidUpdate () {

		let map = this.refs.leafletMap && this.refs.leafletMap.leafletElement;
		if (map) {

			let numFeatures = this.state.geoJson.features.length,
				numFeaturesLoaded = 0,
				geojsonLayer = L.geoJson(null, {
					onEachFeature: (feature, layer) => {

						if (++numFeaturesLoaded >= numFeatures) {
							map.fitBounds(geojsonLayer.getBounds(), {
								animate: false,
								padding: [20, 20]
							});
						}

					},
					className: 'geojson-layer'
				}).addTo(map);

			// add geojson after setting up handlers to ensure layer is available
			geojsonLayer.addData(this.state.geoJson);

		}

	}

	render () {

		let body = '';

		if (this.state.geoJson) {

			let mapConfig = {
				zoom: 8,
				center: [0, 0],
				zoomControl: false,
				attributionControl: false,
				keyboard: false,
				dragging: false,
				touchZoom: false,
				scrollWheelZoom: false,
				doubleClickZoom: false,
				boxZoom: false
			};

			body = (
				<Map { ...mapConfig } ref='leafletMap' className='map-container'>
					{ this.renderTileLayers() }
				</Map>
			);

		} else if (this.state.loadError) {

			body = (
				<div className='load-error'>
					{ this.state.loadError }
				</div>
			);

		}

		return (
			<div className='geojson-map'>
				{ body }
			</div>
		);

	}

	renderTileLayers () {

		let layers = [];

		if (appConfig.map.tileLayers) {
			layers = layers.concat(appConfig.map.tileLayers.map((item, i) => {
				return (
					<TileLayer
						key={ 'tile-layer-' + i }
						url={ item.url }
					/>
				);
			}));
		}

		return layers;

	}

}
{'fraction_non_alphanumeric': 0.1480152500560664, 'fraction_numerical': 0.0038125140165956493, 'mean_word_length': 2.4898278560250393, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3281546', 'n_tokens_mistral': 2010, 'n_tokens_neox': 1526, 'n_words': 312}