Merge pull request #109 from acelaya/feature/map-center

Fixed initial zoom and center on maps
This commit is contained in:
Alejandro Celaya 2019-03-03 11:54:44 +01:00 committed by GitHub
commit 220d634f80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions

View file

@ -25,7 +25,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
#### Fixed #### Fixed
* *Nothing* * [#104](https://github.com/shlinkio/shlink-web-client/issues/104) Fixed blank page being showed when not-found paths are loaded.
* [#94](https://github.com/shlinkio/shlink-web-client/issues/94) Fixed initial zoom and center on maps.
## 2.0.0 - 2019-01-13 ## 2.0.0 - 2019-01-13

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Modal, ModalBody } from 'reactstrap'; import { Modal, ModalBody } from 'reactstrap';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { map, prop } from 'ramda';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import './MapModal.scss'; import './MapModal.scss';
@ -25,6 +26,8 @@ const OpenStreetMapTile = () => (
/> />
); );
const calculateMapBounds = map(prop('latLong'));
const MapModal = ({ toggle, isOpen, title, locations }) => ( const MapModal = ({ toggle, isOpen, title, locations }) => (
<Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content"> <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
<ModalBody className="map-modal__modal-body"> <ModalBody className="map-modal__modal-body">
@ -32,7 +35,7 @@ const MapModal = ({ toggle, isOpen, title, locations }) => (
{title} {title}
<button type="button" className="close" onClick={toggle}>&times;</button> <button type="button" className="close" onClick={toggle}>&times;</button>
</h3> </h3>
<Map center={[ 0, 0 ]} zoom="3"> <Map bounds={calculateMapBounds(locations)}>
<OpenStreetMapTile /> <OpenStreetMapTile />
{locations.map(({ cityName, latLong, count }, index) => ( {locations.map(({ cityName, latLong, count }, index) => (
<Marker key={index} position={latLong}> <Marker key={index} position={latLong}>