Skip to content

GitLab

Commit 6aa128a8 authored by Florent Chehab's avatar Florent Chehab
Browse files

API link established for displaying data on map

parent 695b2f07
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 629 deletions
frontend/src/actions/index.js deleted 100644 → 0
View file @ 695b2f07
import { ADD_ARTICLE } from "../constants/action-types";
export const addArticle = article => ({ type: ADD_ARTICLE, payload: article });
\ No newline at end of file
frontend/src/actions/universities.js 0 → 100644
View file @ 6aa128a8
import {UNIVERSITIES_HAS_ERROR, UNIVERSITIES_IS_LOADING, UNIVERSITIES_FETCH_DATA_SUCCESS} from "../constants/action-types";
export function universitiesHasError(bool) {
return {
type: UNIVERSITIES_HAS_ERROR,
hasError: bool
};
}
export function universitiesIsLoading(bool) {
return {
type: UNIVERSITIES_IS_LOADING,
isLoading: bool
};
}
export function universitiesFetchDataSuccess(universities) {
return {
type: UNIVERSITIES_FETCH_DATA_SUCCESS,
universities
};
}
export function universitiesFetchData(url) {
return (dispatch) => {
dispatch(universitiesIsLoading(true));
fetch(url)
.then((response) => {
if (!response.ok) {
throw Error(response.statusText);
}
dispatch(universitiesIsLoading(false));
return response;
})
.then((response) => response.json())
.then((universities) => dispatch(universitiesFetchDataSuccess(universities)))
.catch(() => dispatch(universitiesHasError(true)));
};
}
\ No newline at end of file
frontend/src/components/App.js
View file @ 6aa128a8
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "../store/index";
import Dashboard from "./Dashboard";
......
frontend/src/components/UnivMap.js
View file @ 6aa128a8
......@@ -2,62 +2,92 @@ import React, { Component } from 'react';
import { connect } from "react-redux";
import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, LayerGroup } from 'react-leaflet';
// import MarkerClusterGroup from 'react-leaflet-markercluster';
import { universitiesFetchData } from '../actions/universities';
const mapStateToProps = state => {
return { universities: state.universities };
class UnivMap extends Component {
componentDidMount() {
this.props.fetchData('http://127.0.0.1:8000/api/university');
}
render() {
if (this.props.hasError) {
return <p>Sorry! There was an error loading the items</p>;
}
if (this.props.isLoading) {
return <p>Loading…</p>;
}
return (
<Map center={[51, 0]} zoom={2} style={{ height: "800px" }}>
<LayersControl position="topright">
<LayersControl.BaseLayer name="OpenStreetMap France" checked={false}>
<TileLayer
attribution='&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
maxZoom={20}
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Stamen Watercolor" checked={true}>
<LayerGroup>
<TileLayer
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png"
minZoom={1}
maxZoom={18}
subdomains='abcd'
/>
<TileLayer
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.png"
minZoom={1}
subdomains='abcd'
maxZoom={18}
/>
</LayerGroup>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Esri WorldImagery">
<TileLayer
attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
/>
</LayersControl.BaseLayer>
</LayersControl>
{
this.props.universities.map((el) => (
<Marker position={[el.univCampus[0].lat, el.univCampus[0].lon]}>
<Popup>
{el.name}
</Popup>
</Marker>
))
}
</Map>
);
}
}
const mapStateToProps = (state) => {
return {
universities: state.universities,
hasError: state.universitiesHasError,
isLoading: state.universitiesIsLoading
};
};
const mapDispatchToProps = (dispatch) => {
return {
fetchData: (url) => dispatch(universitiesFetchData(url))
};
};
const ToConnectUnivMap = ({ universities }) => (
<Map center={[51, 0]} zoom={13} style={{ height: "500px" }}>
<LayersControl position="topright">
<LayersControl.BaseLayer name="OpenStreetMap France" checked={false}>
<TileLayer
attribution='&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
maxZoom={20}
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Stamen Watercolor" checked={true}>
<LayerGroup>
<TileLayer
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png"
minZoom={1}
maxZoom={18}
subdomains='abcd'
/>
<TileLayer
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.png"
minZoom={1}
subdomains='abcd'
maxZoom={18}
/>
</LayerGroup>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Esri WorldImagery">
<TileLayer
attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
/>
</LayersControl.BaseLayer>
</LayersControl>
{universities.map(el => (
<Marker position={[el.univCampus[0].lat, el.univCampus[0].lon]}>
<Popup>
{el.name}
</Popup>
</Marker>
))}
</Map>
)
const UnivMap = connect(mapStateToProps)(ToConnectUnivMap);
export default UnivMap;
export default connect(mapStateToProps, mapDispatchToProps)(UnivMap);
frontend/src/constants/action-types.js
View file @ 6aa128a8
export const ADD_ARTICLE = "ADD_ARTICLE";
\ No newline at end of file
export const UNIVERSITIES_HAS_ERROR = 'UNIVERSITIES_HAS_ERROR'
export const UNIVERSITIES_IS_LOADING = 'UNIVERSITIES_IS_LOADING'
export const UNIVERSITIES_FETCH_DATA_SUCCESS = 'UNIVERSITIES_FETCH_DATA_SUCCESS'
frontend/src/index.js
View file @ 6aa128a8
import 'babel-polyfill';
import App from "./components/App";
\ No newline at end of file
frontend/src/reducers/index.js
View file @ 6aa128a8
import { ADD_ARTICLE } from "../constants/action-types";
import { combineReducers } from 'redux';
import { universities, universitiesHasError, universitiesIsLoading } from './universities';
const initialState = {
universities: [
{
"name": "Technische Universitat Ilmenau",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 1,
"univCampus": [
{
"id": 1,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Technische Universitat Ilmenau",
"comment": null,
"lat": "50.683868",
"lon": "10.932905",
"city": 1,
"university": 1
}
]
},
{
"name": "Universidad Del Salvador",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 2,
"univCampus": [
{
"id": 2,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidad Del Salvador",
"comment": null,
"lat": "-34.556265",
"lon": "-58.730054",
"city": 2,
"university": 2
}
]
},
{
"name": "Swinburne University Of Technology",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 3,
"univCampus": [
{
"id": 3,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Swinburne University Of Technology",
"comment": null,
"lat": "-37.852408",
"lon": "144.991823",
"city": 3,
"university": 3
}
]
},
{
"name": "Technische Universitat Graz",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 4,
"univCampus": [
{
"id": 4,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Technische Universitat Graz",
"comment": null,
"lat": "47.058210",
"lon": "15.460196",
"city": 4,
"university": 4
}
]
},
{
"name": "Universiteit Gent",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 5,
"univCampus": [
{
"id": 5,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universiteit Gent",
"comment": null,
"lat": "51.045041",
"lon": "3.725557",
"city": 5,
"university": 5
}
]
},
{
"name": "Universidade Federal De Minas Gerais",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 6,
"univCampus": [
{
"id": 6,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Federal De Minas Gerais",
"comment": null,
"lat": "-19.871890",
"lon": "-43.963093",
"city": 6,
"university": 6
}
]
},
{
"name": "Universidade Federal De Campina Grande",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 7,
"univCampus": [
{
"id": 7,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Federal De Campina Grande",
"comment": null,
"lat": "-6.762874",
"lon": "-38.228158",
"city": 7,
"university": 7
}
]
},
{
"name": "Universidade Estadual De Campinas (Unicamp)",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 8,
"univCampus": [
{
"id": 8,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Estadual De Campinas (Unicamp)",
"comment": null,
"lat": "-22.822478",
"lon": "-47.064260",
"city": 8,
"university": 8
}
]
},
{
"name": "Universidade Caxias Do Sul",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 9,
"univCampus": [
{
"id": 9,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Caxias Do Sul",
"comment": null,
"lat": "-29.162535",
"lon": "-51.148365",
"city": 9,
"university": 9
}
]
},
{
"name": "Pontificia Universidade Catolica Do Parana",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 10,
"univCampus": [
{
"id": 10,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Pontificia Universidade Catolica Do Parana",
"comment": null,
"lat": "-23.299078",
"lon": "-51.210269",
"city": 10,
"university": 10
}
]
},
{
"name": "Universidade Federal Do Parana",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 11,
"univCampus": [
{
"id": 11,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Federal Do Parana",
"comment": null,
"lat": "-23.598446",
"lon": "-51.673289",
"city": 10,
"university": 11
}
]
},
{
"name": "Universidade Tecnologica Federal Do Parana",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 12,
"univCampus": [
{
"id": 12,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Tecnologica Federal Do Parana",
"comment": null,
"lat": "-25.052164",
"lon": "-50.131186",
"city": 10,
"university": 12
}
]
},
{
"name": "Universidade Federal De Santa Catarina",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 13,
"univCampus": [
{
"id": 13,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Federal De Santa Catarina",
"comment": null,
"lat": "-27.603374",
"lon": "-48.522463",
"city": 11,
"university": 13
}
]
},
{
"name": "Universidade Federal De Itajuba",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 14,
"univCampus": [
{
"id": 14,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Federal De Itajuba",
"comment": null,
"lat": "-22.413797",
"lon": "-45.450273",
"city": 12,
"university": 14
}
]
},
{
"name": "Universidade Federal Da Paraiba",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 15,
"univCampus": [
{
"id": 15,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Federal Da Paraiba",
"comment": null,
"lat": "-6.750559",
"lon": "-35.645450",
"city": 13,
"university": 15
}
]
},
{
"name": "Universidade Federal Juiz De Fora",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 16,
"univCampus": [
{
"id": 16,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Federal Juiz De Fora",
"comment": null,
"lat": "-21.776894",
"lon": "-43.369181",
"city": 14,
"university": 16
}
]
},
{
"name": "Universidad Estadual De Maringa",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 17,
"univCampus": [
{
"id": 17,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidad Estadual De Maringa",
"comment": null,
"lat": "-23.779030",
"lon": "-53.325268",
"city": 15,
"university": 17
}
]
},
{
"name": "Universidade Federal De Pernambuco",
"acronym": null,
"logo": "http://127.0.0.1:8000/media/path/to/my/default/image.jpg",
"id": 18,
"univCampus": [
{
"id": 18,
"modified_by": null,
"modified_date": null,
"usefull_links": [],
"is_main_campus": true,
"name": "Campus Universidade Federal De Pernambuco",
"comment": null,
"lat": "-8.052543",
"lon": "-34.951029",
"city": 16,
"university": 18
}
]