anthonyblackham / floorplans

Using leaflet to create floorplans using a simple coordinate system
https://anthonyblackham.com/floorplans/
GNU General Public License v3.0
61 stars 17 forks source link

Provide some documentation on how to draw maps #5

Open adds68 opened 3 years ago

adds68 commented 3 years ago

Hi,

This is the best floorplan example i have seen for leaflet! Thanks so much for open sourcing it.

I wanted to ask if you could provide some documentation on how to draw custom maps, i'm trying to figure out for my use case how i could draw items within a room, for example you could click the "cooker" and it would show information or the "tv" etc.

Any help would be appreciated

anthonyblackham commented 3 years ago

I went into more detail step by step on the process here:

https://anthonyblackham.com/indoor-maps/

But essentially I created my floorplans in graph paper and manually typed out the coordinates for each room and feature. To simplify my life I just made all the shapes square since I didn't want to mentally calculate any curves on a grid. Since fixtures were non interactive in my example I just grouped them and didn't implement any pop-ups eg:

https://github.com/anthonyblackham/floorplans/blob/main/index.html#L93-179

But you could separate them out into individual features like the rooms like I did in my final example.

I also added a temporary tool that labeled the coordinates at the cursor that was helpful for doing changes on the fly:

https://github.com/anthonyblackham/floorplans/blob/main/index.html#L641-672

If you are starting with CAD files or want to create more complex shapes it may be worth looking at using something like QGIS for processing your data but that process will look different than the rudimentary method I used for this proof of concept.

Would be interested to see what you come up with.

natheeshsunway commented 1 year ago

Hi @adds68 Did you find any way to create these coordinates easily ?

cc: @anthonyblackham