Skip to content

Instantly share code, notes, and snippets.

@garoyeri

garoyeri/index.html

Created Apr 16, 2020
Embed
What would you like to do?
Sample Map Application Frontend Part 1
<!DOCTYPE html>
<html>
<head>
<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: https://leafletjs.com/examples/quick-start/ -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
/* 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;
}
</style>
</head>
<body>
<!-- the mapcontainer will hold the whole page layout -->
<div class="mapcontainer">
<div>
<!--
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>
</form>
</div>
<div id="map"></div>
</div>
<!--
Firebase initialization and useful functions, we'll use these
later when setting up authentication and database
-->
<script>
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(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
//
// // πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯
try {
let app = firebase.app();
} catch (e) {
console.error(e);
}
});
</script>
<!-- map related JavaScript functions -->
<script>
// 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 = L.map('map').setView([29.8435839,-94.8521422], 12);
// use the OpenStreetMap tiles: https://leafletjs.com/
L.tileLayer('https://{s}.tile.openstreetmap.org/{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="https://openstreetmap.org/copyright">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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
// it lets you call a function against each element
markers.forEach(m => {
// remove the marker from the map
m.remove();
});
// 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
Parameters:
* 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(): https://leafletjs.com/reference-1.6.0.html#marker
// latLng(): https://leafletjs.com/reference-1.6.0.html#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
markers.push(newMarker);
}
/*
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(): https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
// Nominatim Search: https://nominatim.org/release-docs/develop/api/Search/
fetch(`https://nominatim.openstreetmap.org/search?format=jsonv2&countrycodes=us&bounded=1&viewbox=${location.toBBoxString()}&q=${encodeURIComponent(document.getElementById('search').value)}`)
.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
console.log(r);
// remove all the markers from the map
removeMarkers();
// 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. https://osm.org/copyright",
"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": "https://nominatim.openstreetmap.org/images/mapicons/poi_place_city.p.20.png",
"address": {
"city": "London",
"state_district": "Greater London",
"state": "England",
"postcode": "SW1A 2DU",
"country": "United Kingdom",
"country_code": "gb"
},
"extratags": {
"capital": "yes",
"website": "http://www.london.gov.uk",
"wikidata": "Q84",
"wikipedia": "en:London",
"population": "8416535"
}
}
*/
addMarker(spot.lat, spot.lon, spot.display_name);
})
}
})
.catch(err => {
// something went wrong, `err` will have some error information
console.log('error');
// just log it for now.
console.log(err);
});
}
</script>
</body>
</html>
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.