web app to do mapping of a JPG store floorplan & to display other PNG files dynamically over the floor plan to show positioning

First explanation =========================== We have have an JPG image of a store layout. TOP VIEW. SEE ATTACHED PHOTO The goal is to highlight the location of products from the backend of the application. To be highlighted and displayed in the designated area of the floor map (which is presently in JPEG). We will need to highlight the area with a yellow transparent circle. Dynamically. with out refreshing the screen. The map needs to be responsive so that the area is marked properly even when the screens size reduced, or enlarged. You are free to use any open source library. The solution should be a generic one so that we can replicate it in future, with less time involved. for example we need to send a value to the map, so that it dynamically makes 5 yellow circles, in various areas of the map. example Circle 1 x=500 y=500 radius=50px Circle 2 x=32 y=230 radius=100px Circle 3 x=150 y=450 radius=50px Circle 4 x=540 y=1020 radius=50px second explanation ============================= We need a web based gui to display a JPG floor map of store, and to be able to send commands to highlight Yellow circles on the floormap. Example-command- Highlight={x=300,y=550}{antenna=303} But it also gets more complicated. We also need an setup gui interface so we can overlay PNG elements over it. The elements will be grouped together (aka cluster). Each cluster can be dragged around on the floor map, and the new position can be saved and remembers. The cluster's elements, are locked and anchored to it. so when the cluster moves, all of it's elements move as a whole. But the Element can also be selected, its elements can be unlocked, and individually moved around, and their new positions will be saved and remembered. Additional Notes: - web based gui to manage floor map's with objects overlay-ed on top of the floor-map. - when the page loads, it needs to read a config file, or values form a DB to load up the floor-map images, elements images, and the position of the elements. - in the example screenshot, there are 12 readers (aka groups). - Each group consist of 1 to 8 items. In the screenshot example group # 3 is selected, with a single mouse click. - The user can drag the group to a new position on the image, and save it. which will update the settings values. - in the center of each group, the group number is displayed. example "3" with a red colored border around it. - when a group is selected, it displays on the top grey area. (ajax) - in the grey area, additional controls will be available, to rotate the whole group, resize the whole group, lock sub-items positions, show antenna numbers, show circles..etc.. - the position of the sub-items, can also be changed. first they must unchecked "Lock Antenna Positions" and then they can drag a single antenna to a different position. - when a sub-item is selected. Example "6" the user can see additional options to manage "6" - example the user can rotate the sub-item 6 - example the user can change the antenna style - i created a sample of a how a potential config file will look like. see attachment. once the saved button is pressed, the group (aka clusters) information is saved. Requirements: - must be compatible with chrome, IE, Firefox - the floor-map and its elements must be responsive, so if the browser width is more, it uses the whole space. - circles and layers, should dynamically be added and removed, with out the web browser reloading. Other Requirements: ______________________________ - i will work with a designer/programmer directly. I will not work with middlemen and project managers - Review hours - must be available USA, California time for review via skype VOICE 9am to 5pm California time. - Must have a stable, fast internet / power - Must have a cell phone for emergency - must have skype with voice calling - must speak basic English