Interactive-Map

An interactive map with custom overlay, marker description and data table.

(Notice: The pictures above don't share confidential business information.)

Description

This is my first HTML and Javascript project and was build for Naturschutz-Tierpark Görlitz e.V.. It was first designed as digital archiving of all signs within the zoo. After I will have finished the project, i'm going to expand it as an "easy-to-create" interactive map for any usage.

To try this map:

Create a Google API Key and replace '' (sign-map.html) ...

<script src="https://maps.googleapis.com/maps/api/js?key= <Google API Key> "></script>

For more information, see "Get API Key"...

Go to Firebase
Login with a Google account
"GO TO CONSOLE"
Create a new project
Create a Firebase Realtime Database
Change "Rules" to:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

For more information, see "Firebase Documentation"...

Replace all required <information> (sign-map.html)

var config = {
				apiKey: "<Google API Key>",
				authDomain: "<Firebase Project Domain>",
				databaseURL: "<Firebase Database URL>",
				projectId: "<Firebase Project ID>",
				storageBucket: "",
				messagingSenderId: "<Firebase Messaging ID>"
};

Open the file (sign-map.html) and add your first marker

Features

map

custom overlay-picture
adjustable zoom-level, center-position

marker

add one by clicking on the map
clickable (opens the info-window of this marker)
every marker has it's own settings and informations (icon, typ ...)

table

DataTables API
- sortable, clickable, searchable
click on dataset opens the info-window of the appropriated marker
contains the information of all markers

database

Firebase Realtime Database

Todo-List

filter for markers
styling with CSS
different maps in one file
add more comments

m-lukas/interactive-map