Basic openlayers3 support

karma.conf.continuous-test.js

@@ -9,8 +9,7 @@ module.exports = function karmaConfig(config) {
 
         files: [
             'tests.webpack.js',
-            { pattern: './web/client/test-resources/**/*', included: false },
-            'http://maps.google.com/maps/api/js?v=3&sensor=false' // required for tests with leaflet google background
+            { pattern: './web/client/test-resources/**/*', included: false }
         ],
 
         preprocessors: {
@@ -40,7 +39,7 @@ module.exports = function karmaConfig(config) {
             devtool: 'inline-source-map',
             module: {
                 loaders: [
-                    { test: /\.jsx?$/, loader: 'babel-loader' }
+                    { test: /\.jsx?$/, exclude: /ol\.js$/, loader: 'babel-loader' }
                 ],
                 postLoaders: [ ]
             },

karma.conf.single-run.js

@@ -9,8 +9,7 @@ module.exports = function karmaConfig(config) {
 
         files: [
             'tests.webpack.js',
-            { pattern: './web/client/test-resources/**/*', included: false },
-            'http://maps.google.com/maps/api/js?v=3&sensor=false' // required for tests with leaflet google background
+            { pattern: './web/client/test-resources/**/*', included: false }
         ],
 
         preprocessors: {
@@ -40,7 +39,7 @@ module.exports = function karmaConfig(config) {
             devtool: 'inline-source-map',
             module: {
                 loaders: [
-                    { test: /\.jsx?$/, loader: 'babel-loader' }
+                    { test: /\.jsx?$/, exclude: /ol\.js$/, loader: 'babel-loader' }
                 ],
                 postLoaders: [
                     {

package.json

@@ -41,16 +41,17 @@
     "es6-promise": "^2.3.0",
     "keymirror": "~0.1.1",
     "leaflet": "^0.7.3",
+    "leaflet-plugins": "https://github.com/Polyconseil/leaflet-plugins/tarball/master",
     "object-assign": "^3.0.0",
+    "openlayers": "^3.8.2",
     "proj4": "~2.3.6",
     "react": "^0.13.3",
     "react-bootstrap": "^0.24.3",
     "react-intl": "^1.2.0",
     "react-redux": "^2.0.0",
     "redux": "^2.0.0",
     "redux-thunk": "^0.1.0",
-    "url": "~0.10.3",
-    "leaflet-plugins": "https://github.com/Polyconseil/leaflet-plugins/tarball/master"
+    "url": "~0.10.3"
   },
   "scripts": {
     "clean": "rm -Rf ./web/client/dist",
@@ -60,7 +61,7 @@
     "continuoustest": "karma start ./karma.conf.continuous-test.js",
     "mvntest": "karma start ./karma.conf.single-run.js --reporters junit,dots,coverage",
     "lint": "eslint web/client --ext .jsx,.js",
-    "travis": "eslint web/client --ext .jsx,.js && karma start ./karma.conf.single-run.js --browsers Firefox --reporters junit,coverage,coveralls"
+    "travis": "eslint web/client --ext .jsx,.js && karma start ./karma.conf.single-run.js --browsers Firefox --reporters dots,junit,coverage,coveralls"
   },
   "author": "GeoSolutions",
   "license": "BSD-2-Clause"

web/client/actions/maps.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var GeoStoreApi = require('../api/GeoStoreDAO');
+
+const MAPS_LIST_LOADED = 'MAPS_LIST_LOADED';
+const MAPS_LIST_LOAD_ERROR = 'MAPS_LIST_LOAD_ERROR';
+
+function mapsLoaded(maps) {
+    return {
+        type: MAPS_LIST_LOADED,
+        maps: maps
+    };
+}
+
+function loadError(e) {
+    return {
+        type: MAPS_LIST_LOAD_ERROR,
+        error: e
+    };
+}
+
+function loadMaps() {
+    return (dispatch) => {
+        GeoStoreApi.getResourcesByCategory("MAP", "*", {start: 0, limit: 20}).then((response) => {
+            dispatch(mapsLoaded(response));
+        }).catch((e) => {
+            dispatch(loadError(e));
+        });
+    };
+}
+
+module.exports = {MAPS_LIST_LOADED, MAPS_LIST_LOAD_ERROR, loadMaps};

web/client/components/I18N/Message.jsx

@@ -23,8 +23,11 @@ var Message = React.createClass({
     render() {
         var locale = this.props.locale || this.context.locale;
         var messages = this.props.messages || this.context.messages;
-
-        return <FormattedMessage locales={locale} message={messages[this.props.msgId]} {...this.props.msgParams}/>;
+        let message = messages;
+        this.props.msgId.split('.').forEach(part => {
+            message = message[part];
+        });
+        return <FormattedMessage locales={locale} message={message} {...this.props.msgParams}/>;
     }
 });
 

web/client/components/InfoButton/InfoButton.jsx

@@ -37,7 +37,7 @@ var About = React.createClass({
     },
     getDefaultProps() {
         return {
-            id: undefined,
+            id: "mapstore-infobutton",
             title: "Info",
             body: "",
             style: undefined,

web/client/components/InfoButton/__tests__/InfoButton-test.jsx

@@ -23,7 +23,7 @@ describe('This test for InfoButton', () => {
 
         const aboutDom = React.findDOMNode(about);
         expect(aboutDom).toExist();
-        expect(aboutDom.id).toNotExist();
+        expect(aboutDom.id).toExist();
 
         const btnList = aboutDom.getElementsByTagName('button');
         expect(btnList.length).toBe(1);

web/client/components/LangSelector/LangSelector.jsx

@@ -13,14 +13,17 @@ var LocaleUtils = require('../../utils/LocaleUtils');
 
 var LangSelector = React.createClass({
     propTypes: {
+        id: React.PropTypes.string,
         locales: React.PropTypes.object,
         currentLocale: React.PropTypes.string,
         onLanguageChange: React.PropTypes.func
     },
     getDefaultProps() {
         return {
+            id: "mapstore-langselector",
             locales: LocaleUtils.getSupportedLocales(),
-            currentLocale: 'en-US'
+            currentLocale: 'en-US',
+            onLanguageChange: function() {}
         };
     },
     render() {
@@ -35,9 +38,11 @@ var LangSelector = React.createClass({
             }
         }
         return (
-            <Input value={this.props.currentLocale} type="select" bsSize="small" onChange={this.launchNewLangAction}>
-                {list}
-            </Input>
+            <div id={this.props.id}>
+                <Input value={this.props.currentLocale} type="select" bsSize="small" onChange={this.launchNewLangAction}>
+                    {list}
+                </Input>
+            </div>
         );
     },
     launchNewLangAction() {

web/client/components/LangSelector/__tests__/LangSelector-test.jsx

@@ -26,7 +26,7 @@ describe('LangSelector', () => {
 
         const cmpDom = React.findDOMNode(cmp);
         expect(cmpDom).toExist();
-        expect(cmpDom.id).toNotExist();
+        expect(cmpDom.id).toExist();
 
         const select = cmpDom.getElementsByTagName("select").item(0);
         const opts = select.childNodes;

web/client/components/MapManager/MapItem.jsx

@@ -21,11 +21,12 @@ var MapItem = React.createClass({
         name: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         description: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
         attributes: React.PropTypes.object,
-        viewerUrl: React.PropTypes.string
+        viewerUrl: React.PropTypes.string,
+        mapType: React.PropTypes.string
     },
     renderButtons: function() {
         if (this.props.viewerUrl) {
-            const previewURL = this.props.viewerUrl + "?mapId=" + this.props.id;
+            const previewURL = this.props.viewerUrl + "?type=" + this.props.mapType + "&mapId=" + this.props.id;
             const tooltip = <Tooltip>Open map in a new tab</Tooltip>;
             return (<div>
                 <OverlayTrigger placement="right" overlay={tooltip}>

web/client/components/MapManager/MapList.jsx

@@ -7,31 +7,35 @@
  */
 
 var React = require('react');
-var BootstrapReact = require('react-bootstrap');
-var ListGroup = BootstrapReact.ListGroup;
-var Panel = BootstrapReact.Panel;
+var {ListGroup, Panel} = require('react-bootstrap');
 var MapItem = require('./MapItem');
 
 var MapList = React.createClass({
     propTypes: {
         panelProps: React.PropTypes.object,
-        data: React.PropTypes.array,
-        viewerUrl: React.PropTypes.string
+        maps: React.PropTypes.array,
+        viewerUrl: React.PropTypes.string,
+        mapType: React.PropTypes.string,
+        locale: React.PropTypes.string
     },
-    getInitialState: function() {
-        return {maps: this.props.data || []};
+    getDefaultProps() {
+        return {
+            onChangeMapType: function() {},
+            mapType: 'leaflet',
+            maps: []
+        };
     },
-    renderMaps: function(maps) {
+    renderMaps: function(maps, mapType) {
         const viewerUrl = this.props.viewerUrl;
         return maps.map(function(map) {
-            return <MapItem viewerUrl={viewerUrl} key={map.id} {...map} />;
+            return <MapItem viewerUrl={viewerUrl} key={map.id} mapType={mapType} {...map} />;
         });
     },
     render: function() {
         return (
             <Panel {...this.props.panelProps}>
                 <ListGroup>
-                    {this.renderMaps(this.state.maps)}
+                    {this.renderMaps(this.props.maps, this.props.mapType)}
                 </ListGroup>
             </Panel>
         );

web/client/components/MapManager/__tests__/MapItem-test.jsx

@@ -49,10 +49,10 @@ describe('This test for MapItem', () => {
     it('test viewer url', () => {
         const testName = "test";
         const testDescription = "testDescription";
-        var component = TestUtils.renderIntoDocument(<MapItem id={1} name={testName} description={testDescription} viewerUrl="viewer"/>);
+        var component = TestUtils.renderIntoDocument(<MapItem id={1} name={testName} mapType="leaflet" description={testDescription} viewerUrl="viewer"/>);
         var a = TestUtils.findRenderedDOMComponentWithTag(
            component, 'a'
         );
-        expect(a.props.href).toBe("viewer?mapId=1");
+        expect(a.props.href).toBe("viewer?type=leaflet&mapId=1");
     });
 });

web/client/components/MapManager/__tests__/MapList-test.jsx

@@ -51,7 +51,7 @@ describe('This test for MapList', () => {
     it('checks data', () => {
         var map1 = {id: 1, name: "a", description: "description"};
         var map2 = {id: 2, name: "b", description: "description"};
-        const mapList = React.render(<MapList data={[map1, map2]}/>, document.body);
+        const mapList = React.render(<MapList maps={[map1, map2]}/>, document.body);
         expect(mapList).toExist();
         const dom = React.findDOMNode(mapList);
         expect(dom).toExist();

web/client/components/leaflet/Map.jsx

@@ -13,7 +13,8 @@ var LeafletMap = React.createClass({
         id: React.PropTypes.string,
         center: React.PropTypes.object,
         zoom: React.PropTypes.number,
-        onMapViewChanges: React.PropTypes.function
+        projection: React.PropTypes.string,
+        onMapViewChanges: React.PropTypes.func
     },
     getDefaultProps() {
         return {

web/client/components/leaflet/__tests__/Layer-test.jsx

@@ -136,10 +136,30 @@ describe('Leaflet layer', () => {
             "type": "google",
             "name": "ROADMAP"
         };
+        var google = {
+            maps: {
+                MapTypeId: {
+                    HYBRID: 'hybrid',
+                    SATELLITE: 'satellite',
+                    ROADMAP: 'roadmap',
+                    TERRAIN: 'terrain'
+                },
+                Map: function() {
+                    this.setMapTypeId = function() {};
+                    this.setCenter = function() {};
+                    this.setZoom = function() {};
+                },
+                LatLng: function() {
+
+                }
+            }
+        };
+        window.google = google;
+
         // create layers
-        var layer = React.render(
+        let layer = React.render(
             <LeafLetLayer type="google" options={options} map={map}/>, document.body);
-        var lcount = 0;
+        let lcount = 0;
 
         expect(layer).toExist();
         // count layers

web/client/components/leaflet/__tests__/Map-test.jsx

@@ -131,20 +131,4 @@ describe('LeafletMap', () => {
         expect(leafletMap.getCenter().lat).toBe(44);
         expect(leafletMap.getCenter().lng).toBe(10);
     });
-
-    it('check if the map changes when receive new props', () => {
-        const map = React.render(
-            <LeafletMap
-                center={{lat: 43.9, lng: 10.3}}
-                zoom={11}
-            />
-        , document.body);
-
-        const leafletMap = map.map;
-
-        map.setProps({zoom: 12, center: {lat: 44, lng: 10}});
-        expect(leafletMap.getZoom()).toBe(12);
-        expect(leafletMap.getCenter().lat).toBe(44);
-        expect(leafletMap.getCenter().lng).toBe(10);
-    });
 });

web/client/components/openlayers/Layer.jsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2015, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var React = require('react');
+var Layers = require('../../utils/openlayers/Layers');
+
+const OpenlayersLayer = React.createClass({
+    propTypes: {
+        map: React.PropTypes.object,
+        mapId: React.PropTypes.string,
+        type: React.PropTypes.string,
+        options: React.PropTypes.object
+    },
+
+    componentDidMount() {
+        if (this.props.options && this.props.options.visibility !== false) {
+            this.createLayer(this.props.type, this.props.options);
+        }
+    },
+
+    componentWillUnmount() {
+        if (this.layer && this.props.map) {
+            this.props.map.removeLayer(this.layer);
+        }
+    },
+    render() {
+        if (this.props.options && this.props.options.visibility !== false) {
+            return Layers.renderLayer(this.props.type, this.props.options, this.props.map, this.props.mapId);
+        }
+        return null;
+    },
+    createLayer(type, options) {
+        if (type) {
+            this.layer = Layers.createLayer(type, options, this.props.map, this.props.mapId);
+
+            if (this.layer) {
+                this.props.map.addLayer(this.layer);
+            }
+        }
+    }
+});
+
+module.exports = OpenlayersLayer;