Scribd
Upload
77 views

Building An Openlayers 3 Map Viewer With React: @pirminkalberer Sourcepole Ag, Switzerland

The document discusses building a map viewer using OpenLayers 3 and React. It introduces React concepts like components, props, state, and the virtual DOM. It then shows how to integrate React and OpenLayers 3 by updating the React state from map events and updating the map from state changes in React components. The document provides a complete code example and encourages the use of Redux and hot reloading for state management and development.

Uploaded by

Makhlouf Rejeb
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
77 views

Building An Openlayers 3 Map Viewer With React: @pirminkalberer Sourcepole Ag, Switzerland

The document discusses building a map viewer using OpenLayers 3 and React. It introduces React concepts like components, props, state, and the virtual DOM. It then shows how to integrate React and OpenLayers 3 by updating the React state from map events and updating the map from state changes in React components. The document provides a complete code example and encourages the use of Redux and hot reloading for state management and development.

Uploaded by

Makhlouf Rejeb
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

FOSS4G 2015

Building an OpenLayers 3 map


viewer with React

@PirminKalberer
Sourcepole AG, Switzerland
www.sourcepole.com

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Map/Table Example

> https://github.com/pka/ol3-react-example
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
The „JQuery way“

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


The „JQuery way“ more complex

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


The MVC way

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


The MVC way – more complex

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


The React way

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


React

> http://facebook.github.io/react/
> The V in MVC
> Components, not templates
> Display logic and markup are thighly coupled
> Re-render, don't mutate the DOM
> Fast Virtual DOM
> Components are reusable, composable, unit
testable
> Concepts: https://youtu.be/x7cQ3mrcKaY

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


React Component

var MyComponent = React.createClass({


render: function(){
return (
<h1>Hello {this.props.name}!</h1>
);
}
});

React.render(<MyComponent name="World" />,


document.getElementById('myDiv'));

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


JSX

> JSX:

render () {
return (
<h1>Hello {this.props.name}!</h1>
);

> Javascript:

render () {
return React.createElement("div", null, "Hello ",
this.props.name);
}

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Lists and events

var PlaceList = React.createClass( {


render: function() {
var placeNodes = this.props.places.map(function (place) {
return (
<li onClick={onSelectClick}>{place}</li>;
};
return (
<ul>
{placeNodes}
</ul>
);
}
});

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Composing components

> CommentBox
> CommentList
> Comment
> CommentForm

var CommentBox = React.createClass({


render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Props / State

> Props
> Read-only attributes
> State
> State is set using the setState method.
Calling setState triggers UI updates.
> Re-render the whole app once the state
changes
> Unidirectional Data Flow
> Data is guaranteed up to date
> Virtual DOM: makes re-rendering on every
change fast

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Virtual DOM

> On every update React builds a new virtual


DOM subtree
> … diffs it with the old one
> … computes the minimal set of DOM
mutations and puts them in a queue
> … and batch executes all updates

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Redux

> Flux: application architecture


> Pattern rather than framework
> Unidirectional data flow
> http://facebook.github.io/flux/
> Redux: “Reduced” Flux implementation
> http://rackt.github.io/redux/
> Single store
> Central state → State history, etc.
> Middleware (Logging, etc.)

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


React with OpenLayers

> HTML:
<body>
<div id="olmap"/>
<div id="reactcomponents"/>
</body>

> React state:


> visible places
> selected place

> React component:


var PlaceList = React.createClass( {
render: function() {
return (
<ul>{...}</ul>
);

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Updating state

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Updating State

> OL → React State


function updateVisiblePlaces() {
var visiblePlaces =
placeLayer.getSource().getFeaturesInExtent(extent) ...
store.dispatch(visiblePlacesAction(visiblePlaces))
}
placeLayer.on('change', updateVisiblePlaces);

> React Component → State + OL update


onSelectClick: function(e) {
dispatch(selectAction(itemId));
// Update map
updateSelection(itemId)
}
> Alternative approach: use Redux middleware for
updating state in OL
FOSS4G Seoul 17.9.15 OpenLayers 3 + React
Hot reloading

> Presentation at ReactEurope 2015:


https://youtu.be/xsSnOQynTHs
> Save change in source (JS, CSS, …) →
Updated view in browser
> Keeps application state
> State history: Undo/Redo
> State snapshots for unit testing

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


Complete code example

> https://github.com/pka/ol3-react-example

FOSS4G Seoul 17.9.15 OpenLayers 3 + React


FOSS4G 2015

Thank you! - Questions?

@PirminKalberer
@sourcepole

FOSS4G Seoul 17.9.15 OpenLayers 3 + React

You might also like