FSM + Free Stuff Map
By Oki Wan Ben0bi @ 2015, 2025
jaeggiben at gmail dot com
http://ben0bi.homenet.org

------ Version 3 -----------------------------------------------------------------------------------------------------------------------
Located in V3 directory.
This is the result of what I learned with V2.

Made with Microsoft Visual Studio Code

INSTALLING:

!-> Needs Node.js
I downloaded it from https://node.js and installed it manually.
It's Version 22.xxx

After installing NodeJs, try (in V3 directory):

npm install

If that not works, look below for manual install.

Then Install Database File & Structure with DB_Install.js in the V3 directory.

node DB_Install.js

RUNNING:
Finally run it with:

node SERVER2.js

V3 Manual Install

!-> needs SQLite (Database Module)

npm install sqlite3

!-> needs sha1 (Password encryption)

npm install js-sha1

!-> needs Express (Server Routing Module)

npm install express

!-> needs ejs (Template Engine Module)

npm install ejs

!-> needs flash (To pass variables on redirect)
npm install express-session
npm install cookie-parser
npm install connect-flash

Skip That below. ;)

------ Version 2 -----------------------------------------------------------------------------------------------------------------------
Located in V2 directory.

Made with Microsoft Visual Studio Code

INSTALLING:

!-> Needs Node.js
I downloaded it from https://node.js and installed it manually.
It's Version 22.xxx

After installing NodeJs, try (in V2 directory):

npm install

If that not works, look below for manual install.

Then Install Database File & Structure with DB_Install.js in the V2 directory.

node DB_Install.js

RUNNING:

Finally start the server.

node SERVER.js

You can now access the web page on port 3000
in your browser, type

localhost:3000/map

And have Fun!

------ Version 2 Manual Install --------------------------------------------------------------------------------------------------------
V2 Manual Install

!-> needs SQLite

npm install sqlite3 (Database Module)

!-> needs Express (Server Routing Module)

npm install express

!-> needs flash (To pass variables on redirect)
npm install express-session
npm install cookie-parser
npm install connect-flash

!-> needs Express Fileupload (For uploading the images)
npm install express-fileupload

!-> needs Morgan (Logger)

npm install morgan

!-> needs ejs (Template Engine Module)

npm install ejs

!-> needs sha1
npm install js-sha1 (Password encryption)

Skip That below. ;)

------ Version 1 -----------------------------------------------------------------------------------------------------------------------

HOWTO:

0. Create a DB with phpmyadmin or such.
0.1. Use the login from the created DB in values.php
0.2. Call _install in the php folder.
(0.3.) To reset your DBs autoincrement value, call resetdb.php in the php folder.

JAVASCRIPT USE (Not Needed)

1. Include fsm_mapview.js and its needed files (see below) - at least ol.js, that one is really needed.
2. Create a div with the id "map" and inside of that a div with the id "popup".
3. Maybe create some checkboxes to hide and show the layers, as described below.


4. create your map in JavaScript:
    call 
        createItemLayer(desiredLayerName, pathToIcon);
    for each item layer you want to create in the right function
    at the top of the fsm_*.js file in the javascript folder.
    Call that function somewhere in your file, above point 4.1.

4.1 AFTER THAT call 
    createMap();

4.2 eventually you have to add the items with
    addItem(layerName, coordX, coordY, title, info, imageName, isWorking);


5. For your images, create an image folder [root]/images.
The images will be stored there, named after the unique ID of the item.

(the adding part can also be done with some SQL stuff, you know...)

That's all you have to do for a base map.

------ Version 1 Dependencies ------------------------------------------------------------------------------------------------

This stuff is needed for javascript/map.js to work properly:
css/bootstrap.min.css <-- popup layout and div arrangement
css/ol.css <-- popup layout (all other ol stuff works without that.)
javascript/jquery-2.1.4.min.js <-- you know...for the popup (I don't use it but it's needed somewhere, sorry.)
javascript/bootstrap.min.js"> <-- ok, I use that for the overall div arrangement, but it was not intended to use it.
popup stuff needs it.
javascript/ol.js <-- That is the only thing I WISH to use.
Without popup and "left-side" div arrangement, you could only use that one.

Special IDs:
divs:
map: contains the map.
popup: (inside the map div) -> the popup over the mouseover item.
info_description: div with info about the mouseover item.
image_description: div for the image for the mouseover item.
info_clcoords: shows the click coords.
info_mocoords: shows the mouseover coords.

Special CLASSES (used in script):
infoimage: the properties of the image for the image_description-div.
should be:
width: 100%;
height: auto;

layerselector:      used to distinguish if a checkbox is used to show or hide layers.

Layer Names:
Border layer: BORDERS
Satellite layer: MQ_SAT
Map layer: OSM

To make the user show or hide some layers, create checkboxes () with the following properties:

input type: checkbox (script checks for "checked")
class: layerselector
value: title (name) of the specific layer.
onclick: activateLayers() <-- checks all boxes with the given classname "layerselector" and updates the layer visibility.