pcs4kids / basic-custom-map Goto Github PK

Images may not always be in square dimensions so it might be worth adding in logic to take in the dimensions of the pins from the user so it is as they expect it

Circle component should take in a colour and then find a lighter version for it to use. This is for future maps where we might have a different colour scheme.

For the map title, we need a separate font size as compared to normal font size. For this, the TextCanvasComponent can be extended to take in a font size and also having a default value without.

All the required features for the first launch have been added, just need to clean up the code to make it easier to follow and break it up.

Allow user to hover over a circle near the activity image which should also show some information on hover

After continuing experimentation with the canvas API, it is apparent that Canvas is not the correct technology to use for our map. Instead, it would be better to switch to use svg, and possibly make use of the snap svg library

Should be using tslint to follow some code standards

We should be able to do this by creating a foreign object with html and having constraints on it to allow for word wrapping and passing that into the svg object and then calling its visibility function based on hover or not

We should be able to do this by creating a foreign object with html and having constraints on it to allow for word wrapping and passing that into the svg object and then calling its visibility function based on hover or not

The initial demo would just use a hardcoded map data JSON, but we want a demo where users can dynamically choose and place content on the map, which renders every time they ask it to.

Add basic components resembling the map and its content/activity components

We want the width and height of our svg component to be flexible. That way, it can change depending on what the length of the screen is. To handle this, we can define a co-ordinate space in our map and then scale the co-ordinates of the activities in the map accordingly to whatever height we and width we have in our space

Instead of returning promises, which seems a bit more complicated, it might be easier and better to pre-load the images at the beginning. This will mean going over the map object we receive and creating an array of promises. Once all of them have been resolved, we can then draw images without worrying about anything.

Need to add documentation on how to set up the project as well as how to run the demo etc.

This will mean that we should not be pushing the generated versions to the dist folder in our PRs

We need to add functionality to attach the callback function which will be attached to MapPinCanvasComponents

Make sure to thoroughly test our code

The map pin/activity component should be animated when it is hovered upon to show that is is being selected. This can be a slight scaling from the normal size.