<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pintura</title> <!-- https://developers.google.com/speed/libraries/ links: https://connieguan.github.io/YellowCow/ NOTE: this map.html is for prototyping front-end, server map page is in view/map.hbs which uses handlebars template --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavBar"> <ul class="nav navbar-nav"> <li><a href="index.html">Pintura Catalog</a></li> <li class="active"><a href="#">Map</a></li> <li><a href="posts.html">Post A Pintura!</a></li> <li><a href="#">Help</a></li> <li><a href="#">Log Out</a></li> </ul> </div> </div> </div> <h1>Pintura Map</h1> <br> <br> <div id="map" style="height: 500px; width: auto;"></div> </body> <script> /* //Back button function goBack() { window.history.back(); } */ // initialize the map var ucsd_coor = [32.87822, -117.24152]; var graf_coor = [32.87851, -117.24187]; var map = L.map('map',{ center: graf_coor, // at UCSD zoom: 20 }); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); let marker = L.marker(ucsd_coor).addTo(map); var polygon = L.polygon([ [32.882, -0.08], [32.822, -0.06], [32.892, -0.047] ]).addTo(map); var circle = L.circle(ucsd_coor, { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 70 }).addTo(map); marker.bindPopup("<b>Current Location</b>").openPopup(); var popup = L.popup() .setLatLng([32.88070, -117.23685]) .setContent("I am a standalone popup.") .openOn(map); var popup = L.popup(); var LeafIcon = L.Icon.extend({ options: { shadowUrl: 'leaf-shadow.png', iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] } }); var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}), redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}), orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'}); // var customPopup = "Mozilla Toronto Offices<br/>" + // "<img src='http://joshuafrazier.info/images/maptime.gif' alt='maptime logo gif' width='350px'/>"; // var imgSrc = 'http://joshuafrazier.info/images/maptime.gif'; var imgSrc = 'http://inthesetimes.com/images/articles/trump_flicker_face_yess.jpg'; // var cusImg = $("p").text('sadfadsfasd').append('</br>').$("img").attr('src', imgSrc); var imgPop = $('<img class="popup" src="'+imgSrc+'" />'); var btnUpVote = $('<input type="button" value="Upvote"/>'); var btnDnVote = $('<input type="button" value="Downvote"/>'); var customPopup = $("<div></div>").html( "asdasdsadas</br>asdsafas" ) .append( imgPop ) .append(btnUpVote) .append(btnDnVote); // var customPopup = document.createElement("img").attr('src', imgSrc); var customOptions = { 'maxWidth': '500', 'className' : 'custom' }; L.marker(graf_coor, {icon: greenIcon}).bindPopup("<b>Graffiti Location</b>") .addTo(map); function onMapClick(e) { } map.on('click', onMapClick); </script> </html>