Skip to content

Instantly share code, notes, and snippets.

@garoyeri garoyeri/index.html

Created Apr 16, 2020
What would you like to do?
Sample Map Application Frontend Part 1
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Map Application</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/7.14.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<!-- <script defer src="/__/firebase/7.14.0/firebase-auth.js"></script> -->
<!-- <script defer src="/__/firebase/7.14.0/firebase-database.js"></script> -->
<!-- <script defer src="/__/firebase/7.14.0/firebase-messaging.js"></script> -->
<!-- <script defer src="/__/firebase/7.14.0/firebase-storage.js"></script> -->
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<!-- Maps Initialization: -->
<link rel="stylesheet" href="" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
<script src="" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
/* set a default font */
html {
font-family: sans-serif;
/* the page should take up the entire height of the window, edge to edge */
html, body {
height: 100%;
margin: 0;
padding: 0;
/* the map should grow to fix its container */
#map {
flex-grow: 1;
/* layout the components in the window vertically, taking up the entire height */
.mapcontainer {
display: flex;
flex-direction: column;
min-height: 100vh;
/* set the form margins */
.mapcontainer div form {
/* margin: top, right, bottom, left */
margin: 1em 0 1em 1em;
/* note: 'em' is the size of the letter 'm' in the current font */
/* space out all the components inside the mapcontainer form */
.mapcontainer form * {
margin-right: 0.5em;
<!-- the mapcontainer will hold the whole page layout -->
<div class="mapcontainer">
we don't want the form to reload the page, so we set the action
to "#" and override the onsubmit event
<form action="#" onsubmit="searchMap()">
<label for="search">Search:</label>
<input type="text" id="search" />
<button type="submit">Search</button>
<div id="map"></div>
Firebase initialization and useful functions, we'll use these
later when setting up authentication and database
document.addEventListener('DOMContentLoaded', function() {
// // πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯
// // The Firebase SDK is initialized and available here!
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
//'/path/to/ref').getDownloadURL().then(() => { });
// // πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯
try {
let app =;
} catch (e) {
<!-- map related JavaScript functions -->
// create the map, default the location to Barbers Hill HS, zoom level 12
// the 'map' here is the 'id' of the <div> that should contain the map
// the library will then draw the map onto that <div> element
// you'll see the `L` character on its own, this is created by Leaflet (the map library)
var mymap ='map').setView([29.8435839,-94.8521422], 12);
// use the OpenStreetMap tiles:
L.tileLayer('https://{s}{z}/{x}/{y}.png', {
// don't zoom higher (closer) than this
maxZoom: 19,
// we need to add attribution when using this map data (part of the usage terms)
attribution: '&copy; <a href="">OpenStreetMap contributors</a>'
}).addTo(mymap); // add it to the map
// an array to keep track of map markers, we need to remember them so we can clear them each time
var markers = [];
remove all the markers from the map and clear the array
Parameters: none
Returns: none
function removeMarkers() {
// this is a Array.forEach syntax:
// it lets you call a function against each element
markers.forEach(m => {
// remove the marker from the map
// empty out the markers array by resetting it to an empty array
markers.length = 0;
add a new marker to the map at the coordinates
* latitude: the latitude of the coordinate
* longitude: the longitude of the coordinate
* description: the description of the marker
Returns: none
function addMarker(latitude, longitude, description) {
// create a new marker with the given latitude / longitude
// marker():
// latLng():
const newMarker = L.marker(L.latLng(latitude, longitude))
.bindPopup(description) // make a popup that just shows the description
.addTo(mymap); // add it to the map
// add the marker to the end of the array
Search the map for an address
Parameters: none
Returns: none
function searchMap() {
// determine the coordinates that are displayed in the map right now
const location = mymap.getBounds();
// search the open street map for the address in the USA, with the bounding box
// fetch():
// Nominatim Search:
.then(r => r.json()) // converts the successful response to JSON (returns a Promise)
.then(r => {
// log the output to the console so we can see what it looks like
// remove all the markers from the map
// if there's a valid response at this point (just a safety feature)
if (r) {
// go through the response array
r.forEach(spot => {
// add a marker to the map
spot at this point will look like this (but not everything will be available):
"place_id": "100149",
"licence": "Data Β© OpenStreetMap contributors, ODbL 1.0.",
"osm_type": "node",
"osm_id": "107775",
"boundingbox": ["51.3473219", "51.6673219", "-0.2876474", "0.0323526"],
"lat": "51.5073219",
"lon": "-0.1276474",
"display_name": "London, Greater London, England, SW1A 2DU, United Kingdom",
"class": "place",
"type": "city",
"importance": 0.9654895765402,
"icon": "",
"address": {
"city": "London",
"state_district": "Greater London",
"state": "England",
"postcode": "SW1A 2DU",
"country": "United Kingdom",
"country_code": "gb"
"extratags": {
"capital": "yes",
"website": "",
"wikidata": "Q84",
"wikipedia": "en:London",
"population": "8416535"
addMarker(, spot.lon, spot.display_name);
.catch(err => {
// something went wrong, `err` will have some error information
// just log it for now.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.