google-react-maps
Version:
A more powerfully custom version of the Google Maps Javascript API built for React. Multiple Datalayer support. GEOJSON Enabled.
330 lines (250 loc) • 11.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Google React Maps Index</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-8">
<div id="main">
<section class="readme-section">
<article><h1>google-react-maps</h1><p>version 1.1.20</p>
<p>A new approach to the google maps api using react.</p>
<p>To install <code>npm install google-react-maps</code></p>
<p>Things you can import:</p>
<pre class="prettyprint source lang-javascript"><code>import {
Map,
KmlLayer,
DataLayer,
Feature,
InfoWindow,
CustomOverlay,
Marker,
MapControl,
SearchBox
} from 'google-react-maps';</code></pre><h1>Usage</h1><p>Using the map is fairly simple. Most commonly you would set it up like this:</p>
<pre class="prettyprint source lang-javascript"><code>import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
return (
<Map
api-key='your api url'
onMount={(map, maps) => {
this.map = map; //Store the google map instance for custom actions. (Outside the react components.)
this.maps = maps; //Store a reference to the google maps javascript api in case we need some of it's helper methods.
}}
optionsConstructor={function(maps) {
//Options Constructor always has a this context of the options object. To override the default options do the following:
Object.assign(this, {
zoom : 4,
mapTypeId : maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl : true,
zoomControlOptions : {
position: maps.ControlPosition.LEFT_CENTER
},
keyboardShortcuts : true,
panControl: true,
panControlOptions : {
position : maps.ControlPosition.BOTTOM_RIGHT
},
mapTypeId : maps.MapTypeId.HYBRID,
mapTypeControl : true,
mapTypeControlOptions : {
position: maps.ControlPosition.LEFT_BOTTOM
},
fullscreenControlOptions : {
position: maps.ControlPosition.RIGHT_BOTTOM
},
fullscreenControl: true
});
}}
>
//Any components passed as children get the maps and map props passed to them.
</Map>
)
}
}</code></pre><p>See main.js inside the git project to understand how to implement everything. (Uncomment some components to see everything)</p>
<p>To run the dev mode... <code>webpack-dev-server</code> after doing a <code>npm install</code></p>
<p><a href="https://nomadgraphix.github.io/google-react-maps">Documentation</a></p>
<p>##General Goals</p>
<p>So, the general goals for this project would be to see:</p>
<ul>
<li>A truly component driven google maps api integration into react in which each component is a black-box (or not completely library interdependent). In theory, a component could be just as easily added to a "non-react or partial-react" implementation of Google maps. </li>
<li>A useful mapping of react components that reflects the powerfully layered nature of the google maps api. (<a href="https://developers.google.com/maps/documentation/javascript/layers">See layers</a>)</li>
<li>A specifically engineered DataLayer component that maps to and edits any GeoJSON object in the react way. (state + action => new state) The DataLayer is a key for this project because we want specific control over minute pieces of a GeoJSON object. </li>
</ul>
<h2>Contributing Rules</h2><ul>
<li>You are welcome to contribute!</li>
<li>I will approve all changes that fit within the vision for this project. Make sure that you do not try to add specific-to-you changes that don't help enhance the general project. </li>
<li>I will handle versioning and npm. We use <a href="https://docs.npmjs.com/getting-started/semantic-versioning">Semver</a></li>
</ul>
<h2>To-dos</h2><p>Below are the list of things we need to get done. They don't necessarily need to happen in order.</p>
<h3>Implementation</h3><p>For v2.0.0:</p>
<ul>
<li>Add ability for icons to change size depending on map zoom-level. (For instance when zoomed way out, I would like the icon to be slightly bigger than when zoomed all the way in.) <a href="https://developers.google.com/maps/documentation/javascript/markers#complex_icons">See this section of the google docs</a></li>
<li>Add all possible GeoJSON shapes to the DataLayer component. (Polygon is the only implemented one right now.)</li>
<li>Create all Shape components. <a href="https://developers.google.com/maps/documentation/javascript/shapes">See Shapes</a></li>
<li>Add a CustomOverlay class/component that allows us to do things similar to InfoWindows but with completely custom styles. <a href="https://developers.google.com/maps/documentation/javascript/customoverlays">See Custom Overlays</a> <---- Started this. First iteration done!</li>
</ul>
<h3>Documentation</h3><ul>
<li>Finish documenting exisiting features.</li>
<li>Create a wiki for documenting here on github.</li>
<li>Create example files and folders.</li>
<li>Create testing environment and test components using mochajs or some other good framework. (My bad for not starting this as test driven.)</li>
</ul></article>
</section>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-3">
<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
</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>