Skip to content

Commit e21b5bc

Browse files
sampreethamithkumarsampreethamithkumar
authored
Add files via upload
1 parent c1f90e5 commit e21b5bc

File tree

9 files changed

+1025
-0
lines changed

9 files changed

+1025
-0
lines changed

‎ReadMe.txt

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
Travel Diaries
2+
3+
Description:
4+
5+
* Travel diaries helps travel enthusiasts to explore places with trusted reviews given by their friends in the application.
6+
* An initiative to help people explore places without any difficulties as the suggestions will be based on the people they follow.
7+
* User can make his own travel diary and let others in their contacts explore by their reviews and add-ons.
8+
9+
Content:
10+
11+
* One can add marker to the places he/she has visited and review it based on their experience.
12+
* User can access their friends travel diaries to plan their trips based on their friends reviews about places which they have visited.
13+
* Based on particular location user can come to know who all among their list have visited that place and reviewed it.
14+
15+
Hosting the Application:
16+
17+
* Open the file mapex.html and you have access to travel diaries.

‎TRAVEL DIARY.pptx

38.4 KB
Binary file not shown.

‎Travelmate.html

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en">
3+
<head>
4+
<title>MapmyIndia Maps API: Map properties and events</title>
5+
<link rel="icon" href="http://mapmyindia.com/images/favicon.ico" type="image/x-icon" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7+
<style type="text/css">
8+
html {
9+
height: 100%;
10+
}
11+
body {
12+
height: 100%;font-family:Verdana,sans-serif, Arial;color:#000;margin: 0; font-size:14px; padding: 0;
13+
}
14+
#map {
15+
position: absolute;left: 310px; top: 44px; right: 0px; bottom: 0px; border: 0px solid #cccccc;
16+
}
17+
#result {
18+
position: absolute;
19+
left: 0px; top: 44px;
20+
width: 309px;
21+
bottom: 0px;
22+
border: 0px solid #494848;
23+
background-color: rgb(49, 48, 48);
24+
overflow: auto;
25+
}
26+
button{
27+
width: 220px;font-family:Verdana,sans-serif, Arial;font-size:12px;padding:2px 0;color:#333
28+
}
29+
.top-div{
30+
border-bottom: 0px solid rgb(117, 113, 113);background-color: rgb(173, 173, 173); padding:10px 12px;
31+
}
32+
.top-div-span1{
33+
font-size: 20px; color:rgb(27, 27, 27);
34+
}
35+
.top-div-span2{
36+
font-size:16px;color:#777
37+
}
38+
.btn-div{
39+
padding: 16px 12px 6px 38px;
40+
}
41+
.msg-cont{
42+
padding:6px 12px 1px; border-bottom:1px solid #e9e9e9;
43+
}
44+
.msg-list{
45+
line-height: 20px; font-size: 12px; color: #555;
46+
}
47+
48+
.map_marker{
49+
position:relative;width:34px;height:48px
50+
}
51+
marker text span css/
52+
.my-div-span{
53+
position: absolute;left:1.5em;right: 1em;top:1.4em;bottom:2.5em;font-size:9px;font-weight:bold;width:1px;color:black;
54+
}
55+
button{
56+
border-radius: 15px 25px 15px 25px; border-width:0px;
57+
}
58+
.a{ text-decoration:none; font-size: 15px; color:white }
59+
</style>
60+
61+
<!--put your map api javascript url with key here-->
62+
<script src="https://apis.mapmyindia.com/advancedmaps/v1/9iujzmlmabip2c5s6wdjd3gud2tv1oe9/map_load?v=1.3"></script>
63+
<!--<script src="js/leaflet.rotatedMarker.js"></script>-->
64+
65+
</head>
66+
<body>
67+
<div class="top-div">
68+
<a href="mapex.html" style="text-decoration: none;"><span class="top-div-span1">Travel Diaries </span></a>
69+
<span class="top-div-span2">Your friends Diaries</span>
70+
</div>
71+
<div id="result">
72+
<h4 style="color:aquamarine">Wander Buddies ;)</h4>
73+
<div class="btn-div"><a class='a' href="samp.html">Sampreeth Amith</a></div>
74+
<div class="btn-div"><a class='a' href="raks.html">Rakshith</a></div>
75+
76+
<div class="msg-cont">
77+
<ul class="msg-list">
78+
<li>Double click anywhere on the map to add a marker.</li>
79+
<li>Click/drag marker to see events.</li>
80+
</ul>
81+
</div>
82+
83+
</div>
84+
<div id="map"></div>
85+
<script>
86+
var map = null;
87+
var marker = [];
88+
var latitudeArr = [13.384810,13.418172,13.136777,12.998922,12.886142,12.934924];
89+
var longitudeArr = [77.672536,77.683026,77.563155,77.591905,77.582394,77.611349];
90+
var pth = window.location.href;/get path of image folder/
91+
var full_path = pth.replace(pth.substr(pth.lastIndexOf('/') + 1), '');
92+
var mk1,mk2,mk3,mk4,mk5;
93+
window.onload = function () {
94+
var pt1 = new L.latLng(13.0033, 76.1004);/WGS location object/
95+
var pt2 = new L.latLng(13.1623, 75.8679);/WGS location object/
96+
var pt3 = new L.latLng(15.3350, 76.4600);/WGS location object/
97+
98+
var pt4 = new L.latLng(15.2993, 74.1240);/WGS location object/
99+
var pt5 = new L.latLng(12.2958, 76.6394);/WGS location object/
100+
var pt6 = new L.latLng(13.3161, 75.7720);/WGS location object/
101+
102+
map = new MapmyIndia.Map('map', {center: [12.934987, 77.614086], zoomControl: true,zoom:6, hybrid: true});
103+
/*
104+
1. Create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passing it a html div id, all other parameters are optional...
105+
2. All leaflet mapping functions can be called simply by using "L" object.
106+
3. In future, MapmyIndia may extend the customised/forked Leaflet object to enhance mapping functionality for developers,
107+
which will be clearly documented in the MapmyIndia API documentation section.
108+
*/
109+
/**map-events*/
110+
map.on("dblclick", function (e) {
111+
var title = "Text marker sample!";
112+
marker.push(addMarker(e.latlng, "", title));
113+
});
114+
var cont1 = "<div><h2 style=\"font: bold 16px arial helvetica\">Hassan</h2>" +
115+
"<p style=\"font: italic 14px/20px times\">180km from Bangalore.</p>" +
116+
"<p style=\"font: 12px/14px Verdana\;padding-top: 10px;text-indent: 30px\">" +
117+
"Nandi Hills (Anglicised forms include Nandidurg and Nandydoorg) is an ancient hill fortress built by,<br>" +
118+
"Ganga Dynasty and later enlarged and strengthened by Tipu Sulthan in southern India, in the Chikkaballapur district of Karnataka state.<br>" +
119+
"It is 10 km from Chickballapur town and approximately 60 km from the city of Bengaluru </p>";
120+
121+
var cont2 = "<div><h2 style=\"font: bold 16px arial helvetica\">Belur</h2>" +
122+
"<p style=\"font: italic 14px/20px times\">Best Night Trek Hill.</p>" +
123+
"<p style=\"font: 12px/14px Verdana\;padding-top: 10px;text-indent: 30px\">" +
124+
"The alluring Skandagiri Hills are open to tourists for all parts of the year. However, the best time to visit Skandagiri is between the winter months of November to January as <br>" +
125+
"the surrounding greenery and hills offer picturesque views in the winter dawn. One can visit the hills for trekking also during the summer months.</p>";
126+
127+
var cont3 = "<div><h2 style=\"font: bold 16px arial helvetica\">Hampi</h2>" +
128+
"<p style=\"font: italic 14px/20px times\"></p>" +
129+
"<p style=\"font: 12px/14px Verdana\;padding-top: 10px;text-indent: 30px\">" +
130+
"Avalahalli Off Sarjapur Road is a bustling residential location in western Bengaluru. It is popular owing to the presence of Gavi Gangadhareshwara Temple. Ganapathi Nagar, New BDA Layout, Srinagar , Telecom Colony, Muneshwara Block and Girinagar are some popular localities situated in the neighbourhood. The locality enjoys superb connectivity to all parts of the city." +
131+
"But guess what, this paragraph also has custom style.</p>";
132+
133+
134+
135+
136+
var cont4 = "<div><h2 style=\"font: bold 16px arial helvetica\">Goa</h2>" +
137+
"<p style=\"font: 12px/14px Verdana\;padding-top: 10px;text-indent: 30px\">" +
138+
"Nandi Hills (Anglicised forms include Nandidurg and Nandydoorg) is an ancient hill fortress built by,<br>" +
139+
"Ganga Dynasty and later enlarged and strengthened by Tipu Sulthan in southern India, in the Chikkaballapur district of Karnataka state.<br>" +
140+
"It is 10 km from Chickballapur town and approximately 60 km from the city of Bengaluru </p>";
141+
142+
var cont5 = "<div><h2 style=\"font: bold 16px arial helvetica\">Mysuru</h2>" +
143+
"<p style=\"font: italic 14px/20px times\">Best Trek Hill. </p>" +
144+
"<p style=\"font: 12px/14px Verdana\;padding-top: 10px;text-indent: 30px\">" +
145+
"The alluring Skandagiri Hills are open to tourists for all parts of the year. However, the best time to visit Skandagiri is between the winter months of November to January as <br>" +
146+
"the surrounding greenery and hills offer picturesque views in the winter dawn. One can visit the hills for trekking also during the summer months.</p>";
147+
148+
var cont6 = "<div><h2 style=\"font: bold 16px arial helvetica\">Chikkamagaluru</h2>" +
149+
"<p style=\"font: italic 14px/20px times\"></p>" +
150+
"<p style=\"font: 12px/14px Verdana\;padding-top: 10px;text-indent: 30px\">" +
151+
"Avalahalli Off Sarjapur Road is a bustling residential location in western Bengaluru. It is popular owing to the presence of Gavi Gangadhareshwara Temple. Ganapathi Nagar, New BDA Layout, Srinagar , Telecom Colony, Muneshwara Block and Girinagar are some popular localities situated in the neighbourhood. The locality enjoys superb connectivity to all parts of the city." +
152+
"But guess what, this paragraph also has custom style.</p>";
153+
154+
155+
mk1 = addMarker(pt1, '', "Rakshith").addTo(map);
156+
mk2 = addMarker(pt2, '', "Rakshith").addTo(map);
157+
mk3 = addMarker(pt3, '', "Rakshith").addTo(map);
158+
159+
160+
mk1.bindPopup(cont1);
161+
mk2.bindPopup(cont2);
162+
mk3.bindPopup(cont3);
163+
164+
mk4 = addMarker(pt4, '', "Sampreeth").addTo(map);
165+
mk5 = addMarker(pt5, '', "Sampreeth").addTo(map);
166+
mk6 = addMarker(pt6, '', "Sampreeth").addTo(map);
167+
168+
169+
mk4.bindPopup(cont4);
170+
mk5.bindPopup(cont5);
171+
mk6.bindPopup(cont6);
172+
173+
};
174+
function addMarker(position, icon, title, draggable) {
175+
/* position must be instance of L.LatLng that replaces current WGS position of this object. Will always return current WGS position.*/
176+
var event_div = document.getElementById("event-log");
177+
if (icon == '') {
178+
var mk = new L.Marker(position, {draggable: draggable, title: title});/*marker with a default icon and optional param draggable, title */
179+
mk.bindPopup(title);
180+
} else {
181+
var mk = new L.Marker(position, {icon: icon, draggable: draggable, title: title});/*marker with a custom icon */
182+
mk.bindPopup(title);
183+
}
184+
map.addLayer(mk);/add the marker to the map/
185+
/* marker events:*/
186+
mk.on("click", function (e) {
187+
event_div.innerHTML = "Marker clicked<br>" + event_div.innerHTML;
188+
});
189+
return mk;
190+
}
191+
function mapmyindia_fit_markers_into_bound() {
192+
var maxlat = Math.max.apply(null, latitudeArr);
193+
var maxlon = Math.max.apply(null, longitudeArr);
194+
var minlat = Math.min.apply(null, latitudeArr);
195+
var minlon = Math.min.apply(null, longitudeArr);
196+
var southWest = L.latLng(maxlat, maxlon);/south-west WGS location object/
197+
var northEast = L.latLng(minlat, minlon);/north-east WGS location object/
198+
var bounds = L.latLngBounds(southWest, northEast);/This class represents bounds on the Earth sphere, defined by south-west and north-east corners/
199+
map.fitBounds(bounds);/Sets the center map position and level so that all markers is the area of the map that is displayed in the map area/
200+
}
201+
/function to remove markers from map/
202+
function mapmyindia_removeMarker() {
203+
var markerlength = marker.length;
204+
if (markerlength > 0) {
205+
for (var i = 0; i < markerlength; i++) {
206+
map.removeLayer(marker[i]);/* deletion of marker object from the map */
207+
}
208+
}
209+
delete marker;
210+
marker = [];
211+
document.getElementById("event-log").innerHTML = "";
212+
}
213+
214+
/function to make number appear on marker/
215+
function mapmyindia_number_on_marker() {
216+
mapmyindia_removeMarker();
217+
for (var i = 0; i < latitudeArr.length; i++) {
218+
var title = "Number marker Sample!";
219+
var icon = L.divIcon({
220+
className: 'my-div-icon',
221+
html: "<img class='map_marker' src=" + "'https://maps.mapmyindia.com/images/2.png'>" + '<span class="my-div-span">' + (i + 1) + '</span>',
222+
iconSize: [10, 10],
223+
popupAnchor: [12, -10]
224+
});/function that creates a div over a icon and display content on the div/
225+
var postion = new L.LatLng(latitudeArr[i], longitudeArr[i]);/WGS location object/
226+
marker.push(addMarker(postion, icon, title));
227+
}
228+
mapmyindia_fit_markers_into_bound();
229+
}
230+
var mapmyindia_custom_info_window = function () {
231+
232+
mk3.openPopup();
233+
}
234+
</script>
235+
</body>
236+
</html>

0 commit comments

Comments
 (0)