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.


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.


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.


- 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

Compétences : AJAX, HTML5, Java, jQuery / Prototype

en voir plus : autocad floor plan drawing files, java display floor plan, floor plan modern house autocad files, sample house floor plan files, example dwg files floor plan, png floor plan, free dwg files floor plan, cad floor plan example files, actionscript floor plan files, autocad floor plan files render, floor plan transparent png, autocad drawings floor plan files, floor plan vector files, sample floor plan autocad dwg files, autocad floor plan files

Concernant l'employeur :
( 126 commentaires ) Canoga Park, United States

Nº du projet : #12720323

Décerné à:


Hi, I can start work on your project immediately once you confirm me and i am also open for further discussion if you want. I have 7+ years in web designing & development with good experience in following skills Plus

%selectedBids___i_sum_sub_7% %project_currencyDetails_sign_sub_8% USD en 10 jours
(2 Commentaires)

4 freelance font une offre moyenne de $987 pour ce travail


Dear Client, Greetings from Flowgica technologies, I have experience with these skills. We do have similar experience doing something similar to yours therefore I am looking forward to discuss and move ahead. Our late Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 12 jours
(7 Commentaires)

Hi, I can deliver this project within 2 - 3 days. I would need to ask a few questions to clarify the scope. Please send me a message if you're interested. Thank you.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 0 jours
(7 Commentaires)
%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 10 jours
(1 Évaluation)