This code started out as richardhills/ol-react for ol3 and brian32768 rewrote it for ol7
This version is written for OpenLayers 7.
There is a version of the code samples running HERE. I don't know how many of the services I used are firewalled, I need to look at that! But you should be able to see maps, some layers will not be available, that's all.
I have to figure out how best to deploy the api keys for Mapbox and Bing etc without revealing them in this repo.
This is a wrapper for OpenLayers in React.
The goal is to be able to write applications using OpenLayers maps in a declarative way. For example, the following is JSX, which can be returned by the render() method on a React component, to generate a map with a square near the equator.
To understand what each element does, read the OpenLayers API documentation.
I experimented for months with making the source a property of the layer component and just went back! So I don't even have to change this documentation!
Someone sent me a link to allenhkim/react-openlayers, which looks good too. I noticed it has not been updated in 4 years though. If you know of others let me know.
The examples at this point rely pretty heavily on data that I host for my own development. They will still run but there will be layers missing.
Note that OL6 wants you to install pbf, pixelworks, and rbush yourself (via npm).
The project uses npm and the parcel bundler. You need to install npm globally To launch a parcel development server and open a browser on http://localhost:1234/
npm install npm audit fix # if needed npm start
The original richardhills version of ol-react had a way to generate styles in JSX notation but I decided that it's not worth writing and maintaining extra wrapper code, so currently I write the styles using JavaScript and pass an OpenLayers Style object in to ol-react. It takes about the same amount of code either way.
See examples/example1.js for more code.
Write the JavaScript to generate an OpenLayers Style object then pass the object to a Feature component.
JavaScript style declaration
import {Style, Circle, Fill, Stroke} from 'ol/style'
const cStyle = new Style(
new Circle({ radius: 10,
fill: new Fill({color: rgba(100,100,100,0.5)}),
stroke: new Stroke({color: "green"})
}))
JSX snippet using the style
<Feature id="C2" style={cStyle}>
<geom.Circle transform={ transformfn } >{[6000,0]}</geom.Circle>
</Feature>
This does not work anymore, I am leaving it here in case I resurrect it next week. :-)
Styles used to be declared using a JSON object, passing through the properties you'd like on the final object. For example, when creating a Circle, a type
parameter must be present,
with the value of circle
. Like this:
image: {
type: 'circle',
radius: 10,
fill: { color: [100,100,100, 0.5] },
stroke: { color: 'green', width: 1 }
}
When a map source needs a key you need to put the key into an environment variable.
I keep my keys in a file called ".env". The file looks like this (with real keys, of course):
MAPBOX_KEY="N0SeynB28iOx7U04i7OTz0xPqqgCU3vOs0tcLwws5" BINGMAPS_KEY="SeynB28iOx7U04i7OTz0xPqqgCU3vOs0tcLww" THUNDERFOREST_KEY="89ausduhasd898asduyuhadha0s9djd"
I just ran across this article on testing that is very useful. Partly because of testing :-) and partly because it shows me how to solve some little React problems in ways I have not seen before.
I use Visual Studio Code, so I have a .vscode/launch.json file set up. First in a shell window start the app running "yarn start". Then you can launch the debug session in VSCode with F5. Official instructions are here: https://parceljs.org/debugging.html
The command npm start
will launch the demo setup in a browser. Currently that is where I do my testing.
Do this before sending a new version of the package up to npmjs.com. It will build the package and then run a simple app that uses the package. I need to learn how to do real tests...
npm run build-package
npm run test
This will publish the contents of the src/ folder as a new release. To install it for use in your own project, use "yarn add @wildsong/ol-react".
# Save all changes to github
git commit -a
git push
# Move to master branch
git checkout master
# Merge changes from development branch
git merge dev
git commit -a
git push
I had to wrestle for an hour before finding I had to do this to make "yarn version" work.
eval $(ssh-agent -s) && ssh-add ~/.ssh/id_rsa_github_bwilsoncc
or at home,
eval $(ssh-agent -s) && ssh-add ~/.ssh/id_rsa_github
Get the current version number from package.json. Insert it for "NEWVERSION".
yarn login
tasks/publish.sh NEWVERSION
Do NOT run "yarn publish" yourself in the top level folder. It will publish too much! The publish script will build and publish for you.
This should end up with "master" checked out unless something fails.
Install in your project with
npm add @wildsong/ol-react
The original Richard Hills OL3 version available on github and npm. my fork at github