Skip to content
Permalink
Browse files

added map route and component

- installed esri-loader
- added map component
- added new map route
- show map component in map route
  • Loading branch information...
tomwayson committed Dec 30, 2017
1 parent d63dcf8 commit a513b7fe207a809105fcb621a26a687cc47918b4
@@ -14,6 +14,7 @@
"classnames": "^2.2.5",
"cookie-parser": "^1.4.3",
"core-js": "^2.5.3",
"esri-loader": "^1.6.0",
"express": "^4.16.2",
"express-graphql": "^0.6.11",
"express-jwt": "^5.3.0",
@@ -0,0 +1,5 @@
@import url('https://js.arcgis.com/3.23/esri/css/esri.css');

.root {
height: 400px;
}
@@ -0,0 +1,38 @@
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { loadModules } from 'esri-loader';
import s from './EsriMap.css';

class EsriMap extends React.Component {
componentDidMount() {
const options = {
url: 'https://js.arcgis.com/3.23/',
};
loadModules(['esri/map'], options)
.then(([Map]) => {
// create map with the given options at a DOM node w/ id 'mapNode'
const map = new Map(this.mapNode, {
center: [-118, 34.5],
zoom: 8,
basemap: 'dark-gray',
});
this.map = map;
})
.catch(err => {
// handle any script or module loading errors
console.error(err);
});
}
render() {
return (
<div
ref={c => {
this.mapNode = c;
}}
className={s.root}
/>
);
}
}

export default withStyles(s)(EsriMap);
@@ -0,0 +1,6 @@
{
"name": "EsriMap",
"version": "0.0.0",
"private": true,
"main": "./EsriMap.js"
}
@@ -17,6 +17,9 @@ class Navigation extends React.Component {
render() {
return (
<div className={s.root} role="navigation">
<Link className={s.link} to="/map">
Map
</Link>
<Link className={s.link} to="/about">
About
</Link>
@@ -43,6 +43,10 @@ const routes = {
path: '/admin',
load: () => import(/* webpackChunkName: 'admin' */ './admin'),
},
{
path: '/map',
load: () => import(/* webpackChunkName: 'admin' */ './map'),
},

// Wildcard routes, e.g. { path: '(.*)', ... } (must go last)
{
@@ -0,0 +1,21 @@
/**
* React Starter Kit (https://www.reactstarterkit.com/)
*
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/

@import '../../components/variables.css';

.root {
padding-left: 20px;
padding-right: 20px;
}

.container {
margin: 0 auto;
padding: 0 0 40px;
max-width: var(--max-content-width);
}
@@ -0,0 +1,43 @@
/**
* React Starter Kit (https://www.reactstarterkit.com/)
*
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Map.css';
import EsriMap from '../../components/EsriMap';

class Map extends React.Component {
static propTypes = {
title: PropTypes.string.isRequired,
};

render() {
return (
<div className={s.root}>
<div className={s.container}>
<h1>{this.props.title}</h1>
<EsriMap />
<p>
The above <code>&lt;EsriMap /&gt;</code> component uses the{' '}
<code>componentDidMount()</code> lifecyle hook to ensure that the
following only happen once the user navigates to this route{' '}
<em>in a browser</em>:
</p>
<ul>
<li>The ArcGIS API for JavaScript is lazy loaded</li>
<li>The above map is rendered</li>
</ul>
</div>
</div>
);
}
}

export default withStyles(s)(Map);
@@ -0,0 +1,28 @@
/**
* React Starter Kit (https://www.reactstarterkit.com/)
*
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/

import React from 'react';
import Map from './Map';
import Layout from '../../components/Layout';

const title = 'Esri Map';

function action() {
return {
chunks: ['map'],
title,
component: (
<Layout>
<Map title={title} />
</Layout>
),
};
}

export default action;
@@ -2854,6 +2854,10 @@ esrecurse@^4.1.0:
estraverse "^4.1.0"
object-assign "^4.0.1"

esri-loader@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/esri-loader/-/esri-loader-1.6.0.tgz#37acc09fbb6e69aa09b9767f237cb24cd3f6c5ad"

estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"

0 comments on commit a513b7f

Please sign in to comment.
You can’t perform that action at this time.