Feature - Go to current location

README.md

@@ -20,7 +20,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map
  - [ ] Shape file through uploads (from local system)
  - [X] Format available - TopoJson
  - [ ] More formats required (Geojson etc)
- - [ ] Auto fit to shape file location (on file load)
+ - [X] Auto fit to shape file location (on file load)
 - [ ] Color selector 
  - [X] Add colors
  - [X] Remove colors
@@ -30,7 +30,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map
  - [ ] Download color format for ASE, GIMP/Inscape color scheme
 - [ ] Mobile version 
 - [ ] Search bar to search places 
-- [ ] Go to current location
+- [X] Go to current location
 
 ## Installation
 clone repo and install using - 

src/components/main-app/ol-init.js

@@ -4,6 +4,7 @@ import 'ol/ol.css';
 import { URL_SHAPE, URL_TILES, URL_COLORS, URL_OPACITY } from 'config';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { usePrevious } from 'react-use';
+import { unByKey } from 'ol/Observable';
 
 export default function OlInit() {
  const [shape] = useQueryParam(URL_SHAPE, StringParam);
@@ -25,6 +26,15 @@ export default function OlInit() {
  if (olInstances.shapeSource && shape && prevShape !== shape) {
  olInstances.shapeSource.setUrl(shape);
  olInstances.shapeSource.refresh();
+
+ let source = olInstances.shapeSource;
+ var listenerKey = source.on('change', function (e) {
+ if (source.getState() === 'ready') {
+ var extent = source.getExtent();
+ olInstances.map.getView().fit(extent, { padding: [20, 20, 20, 420] });
+ unByKey(listenerKey);
+ }
+ });
  }
 
  if (olInstances.rasterLayer) {

src/components/main-app/ol/init-map.js

@@ -2,10 +2,22 @@ import Map from 'ol/Map';
 import XYZ from 'ol/source/XYZ';
 import { Tile as TileLayer } from 'ol/layer';
 import View from 'ol/View';
+import { Control, defaults as defaultControls } from 'ol/control';
+
+export default function initMap({
+ rasterLayer,
+ clipLayer,
+ boundaryLayer,
+ position,
+}) {
+ var element = document.createElement('div');
+ element.innerHTML = '<i class="fa fa-map-marker iconButton"></i>';
+ element.className = 'current-location-button';
+ element.addEventListener('click', position);
 
-export default function initMap({ rasterLayer, clipLayer, boundaryLayer }) {
  return new Map({
  target: 'map',
+ controls: defaultControls().extend([new Control({ element })]),
  view: new View({ center: [0, 0], zoom: 0 }),
  layers: [
  new TileLayer({

src/components/main-app/ol/main.js

@@ -1,5 +1,6 @@
 import { clipRasterLayer, dragMap, initMap, loadRasterLayer } from './';
 import { getColorsArray, getRgbColorsArray } from 'utils';
+import { fromLonLat } from 'ol/proj';
 
 let map = null;
 let rasterSource = null;
@@ -30,6 +31,23 @@ export default function olMain({ shape, tiles, colors, opacity }) {
  tiles,
  });
 
+ const position = async () => {
+ try {
+ if (map) {
+ await navigator.geolocation.getCurrentPosition(position => {
+ map
+ .getView()
+ .setCenter(
+ fromLonLat([position.coords.longitude, position.coords.latitude])
+ );
+ map.getView().setZoom(11);
+ });
+ }
+ } catch (error) {
+ throw new Error(error);
+ }
+ };
+
  rasterLayer = loadRaster.rasterLayer;
  rasterSource = loadRaster.rasterSource;
  rasterColorSource = loadRaster.rasterColorSource;
@@ -39,7 +57,7 @@ export default function olMain({ shape, tiles, colors, opacity }) {
  const boundaryLayer = clipRaster.boundaryLayer;
  shapeSource = clipRaster.shapeSource;
 
- map = initMap({ rasterLayer, clipLayer, boundaryLayer });
+ map = initMap({ rasterLayer, clipLayer, boundaryLayer, position });
  dragMap(map);
  return { map, rasterSource, rasterLayer, shapeSource, rasterColorSource };
 }

src/sass/_app.sass

@@ -88,6 +88,10 @@
  font-size: 15px
  border-radius: 6px
 
+.current-location-button
+ position: absolute
+ bottom: 20px
+ right: 20px
 
 @media only screen and (max-width: 1440px)
  .sidebar
@@ -99,4 +103,9 @@
 
 @media only screen and (max-width: 1280px)
  .sidebar
- width: 360px
+ width: 360px
+
+@media only screen and (max-width: 769px)
+ .current-location-button
+ top: 150px
+ right: 14px