dp-map-builder-ui

Map builder implentation

Usage no npm install needed!

<script type="module">
  import dpMapBuilderUi from 'https://cdn.skypack.dev/dp-map-builder-ui';
</script>

README

dp-map-builder-ui

react component ui for map builder

Make sure you have the latest Stable or LTS version of Node.js installed.

  1. git clone git@github.com:ONSdigital/dp-map-builder-ui.git
  2. Run npm install
  3. Start the dev server using npm start
  4. Open http://localhost:8080

Available Commands

  • npm start - start the dev server
  • npm clean - delete the dist folder
  • npm run production - create a production ready build in dist folder
  • npm run lint - execute an eslint check
  • npm test - run all tests
  • npm run test:watch - run all tests in watch mode
  • npm run coverage - generate code coverage report in the coverage folder

Notes

  • The map builder is only as good as the topology files it offers. These are obtained via the github api from github.com/ONSvisual/topojson_boundaries
  • The map builder calls the github api without authentication to retrieve the list of topology files (every time it starts - so once for every map). The api has a rate limit of 60 requests/hour unless you're authenticated: developer.github.com/v3/#rate-limiting. You may hit this limit if multiple people are creating maps at the same time.
  • There are a lot of options in the map-renderer service that this builder hides away from the user and hard-codes.
    • the position of the legends. These are hard-coded at the top and right of the map.
    • width: The map width at which the visibility of the legends switches from horizontal to vertical. 400.
    • min_width & max_width: The minimum and maximum sizes of the map - it is responsive within these limits. 300 - 500.
    • The ID and Name properties used in the topology files. These are AREACD and AREANM respectively - and this holds true for all topologies currently in the repository.
  • The colour options for the map are those published at colorbrewer2.org, filtered to remove those that are not colour-blind safe. They have been renamed to give them slightly more descriptive names in the drop down.