https://github.com/poetic/fancy-maps
React components for creating Leaflet maps
https://github.com/poetic/fancy-maps
Last synced: about 2 months ago
JSON representation
React components for creating Leaflet maps
- Host: GitHub
- URL: https://github.com/poetic/fancy-maps
- Owner: poetic
- License: mit
- Created: 2015-08-14T20:00:47.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-03T01:06:52.000Z (over 9 years ago)
- Last Synced: 2025-03-24T20:22:58.042Z (3 months ago)
- Language: JavaScript
- Homepage: http://poetic.github.io/fancy-maps/
- Size: 3.4 MB
- Stars: 8
- Watchers: 11
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fancy-maps [](https://david-dm.org/poetic/fancy-maps#info=devDependencies)
React components for creating Leaflet maps. [DEMO](http://poetic.github.io/fancy-maps/).
Quick Start
-----------
To use the Fancy Maps components in your project:
- Include [`dist/fancy-maps.min.js`](https://rawgit.com/poetic/fancy-maps/master/dist/fancy-maps.min.js)
- Include [`dist/fancy-maps.min.css`](https://rawgit.com/poetic/fancy-maps/master/dist/fancy-maps.min.css)
- Include the [JSXTransformer](https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js)
- Start using Fancy Maps components (see the demo) or full example below
Note that you will need to include the in-browser [JSXTransformer](https://facebook.github.io/react/docs/tooling-integration.html#in-browser-jsx-transform) while developing your maps and then [precompile](https://facebook.github.io/react/docs/tooling-integration.html#productionizing-precompiled-jsx) the JSX when you're ready for production, if you choose to use JSX.
Development
-----
- Install dependencies with `npm install`
- Start the live reload server using `gulp`
- Point your browser to [http://localhost:8000](http://localhost:8000)
See `gulpfile.js` for more gulp tasks.
Components
----------
#### `LeafletMap`
Instantiates a new Leaflet map.
Example: ``
#### `LeafletLayer`
Adds a new layer containing polygons to a Leaflet map.
Example: ``
Note: Must be a child of ``
#### `LeafletLegend`
Adds a legend control to a Leaflet map.
Example: ``{`
Key
`}``
Note: Must be a child of ``
#### `Tiles`
You can set the background tiles you perfer. Some good ones to choose from are here: https://leaflet-extras.github.io/leaflet-providers/preview/
The default tile is ``http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png``
Full Example
------------
Full working example is located at examples/basic-map.html
```javascript
React.render(
<LeafletMap lat="29.817178"
lon="-95.4012915"
minZoom="10"
maxZoom="17"
zoom="10"
maxBounds={[[29.9150, -95.7314], [29.9533, -95.6901]]}
tileProvider='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'>
<LeafletLegend>
{`
<h2>Legend</h2>
<div class="body">
<div class="water">Water</div><br />
<div class="polygon">Polygon</div><br />
</div>
`}
</LeafletLegend>
<LeafletLayer showThreshold="10" hideThreshold="12" dataSource="communities.geojson">
{"Community address is {{address}}."}
</LeafletLayer>
<LeafletLayer showThreshold="13" hideThreshold="14" dataSource="sections.geojson" />
<LeafletLayer showThreshold="10" hideThreshold="17" disableClusteringAtZoom="16"
dataSource="https://dl.dropboxusercontent.com/u/46535302/Section%2012.geojson"
cluster="true" className="real-section"
featureClassPrefix="block" featureClassName="Block">
{`
<h2>{{Address}}</h2>
{{#if-eq Lot 20}}
<h4>Lot is 20</h4>
{{else}}
<h4>Lot is not 20</h4>
{{/if-eq}}
<ul>
<li>Lot: {{Lot}}</li>
<li>Block: {{Block}}</li>
<li>Section: {{Section}}</li>
</ul>
`}
</LeafletLayer>
</LeafletMap>, document.getElementById('container')
);
```
Resources
---------
Further reading:
- http://facebook.github.io/react/
- http://leafletjs.com/
For example usage, see examples/basic-map.html.