feat: Add comprehensive documentation suite and reorganize project structure
- Created complete documentation in docs/ directory - Added PROJECT_OVERVIEW.md with feature highlights and getting started guide - Added ARCHITECTURE.md with system design and technical details - Added SECURITY.md with comprehensive security implementation guide - Added DEVELOPMENT.md with development workflows and best practices - Added DEPLOYMENT.md with production deployment instructions - Added API.md with complete REST API documentation - Added CONTRIBUTING.md with contribution guidelines - Added CHANGELOG.md with version history and migration notes - Reorganized all documentation files into docs/ directory for better organization - Updated README.md with proper documentation links and quick navigation - Enhanced project structure with professional documentation standards
This commit is contained in:
SamiAhmed7777
225
f_offline/assets/js/map.js
Normal file
225
f_offline/assets/js/map.js
Normal file
@@ -0,0 +1,225 @@
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
'use strict';
|
||||
//set your google maps parameters
|
||||
var $latitude = 39.742043,
|
||||
$longitude = -104.991531,
|
||||
$map_zoom = 14;
|
||||
|
||||
//google map custom marker icon - .png fallback for IE11
|
||||
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
|
||||
var $marker_url = ( is_internetExplorer11 ) ? 'img/map-marker.png' : 'assets/img/map-marker.png';
|
||||
|
||||
//define the basic color of your map, plus a value for saturation and brightness
|
||||
var $main_color = '#2d313f',
|
||||
$saturation= -20,
|
||||
$brightness= 5;
|
||||
|
||||
//we define here the style of the map
|
||||
var style= [
|
||||
{
|
||||
//set saturation for the labels on the map
|
||||
elementType: "labels",
|
||||
stylers: [
|
||||
{saturation: $saturation}
|
||||
]
|
||||
},
|
||||
{ //poi stands for point of interest - don't show these lables on the map
|
||||
featureType: "poi",
|
||||
elementType: "labels",
|
||||
stylers: [
|
||||
{visibility: "off"}
|
||||
]
|
||||
},
|
||||
{
|
||||
//don't show highways lables on the map
|
||||
featureType: 'road.highway',
|
||||
elementType: 'labels',
|
||||
stylers: [
|
||||
{visibility: "off"}
|
||||
]
|
||||
},
|
||||
{
|
||||
//don't show local road lables on the map
|
||||
featureType: "road.local",
|
||||
elementType: "labels.icon",
|
||||
stylers: [
|
||||
{visibility: "off"}
|
||||
]
|
||||
},
|
||||
{
|
||||
//don't show arterial road lables on the map
|
||||
featureType: "road.arterial",
|
||||
elementType: "labels.icon",
|
||||
stylers: [
|
||||
{visibility: "off"}
|
||||
]
|
||||
},
|
||||
{
|
||||
//don't show road lables on the map
|
||||
featureType: "road",
|
||||
elementType: "geometry.stroke",
|
||||
stylers: [
|
||||
{visibility: "off"}
|
||||
]
|
||||
},
|
||||
//style different elements on the map
|
||||
{
|
||||
featureType: "transit",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "poi",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "poi.government",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "poi.sport_complex",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "poi.attraction",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "poi.business",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "transit",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "transit.station",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "landscape",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
|
||||
},
|
||||
{
|
||||
featureType: "road",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "road.highway",
|
||||
elementType: "geometry.fill",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
},
|
||||
{
|
||||
featureType: "water",
|
||||
elementType: "geometry",
|
||||
stylers: [
|
||||
{ hue: $main_color },
|
||||
{ visibility: "on" },
|
||||
{ lightness: $brightness },
|
||||
{ saturation: $saturation }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
//set google map options
|
||||
var map_options = {
|
||||
center: new google.maps.LatLng($latitude, $longitude),
|
||||
zoom: $map_zoom,
|
||||
panControl: false,
|
||||
zoomControl: false,
|
||||
mapTypeControl: false,
|
||||
streetViewControl: false,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
scrollwheel: false,
|
||||
styles: style,
|
||||
}
|
||||
//inizialize the map
|
||||
var map = new google.maps.Map(document.getElementById('conatiner-map'), map_options);
|
||||
//add a custom marker to the map
|
||||
var marker = new google.maps.Marker({
|
||||
position: new google.maps.LatLng($latitude, $longitude),
|
||||
map: map,
|
||||
visible: true,
|
||||
icon: $marker_url,
|
||||
});
|
||||
|
||||
//add custom buttons for the zoom-in/zoom-out on the map
|
||||
function CustomZoomControl(controlDiv, map) {
|
||||
//grap the zoom elements from the DOM and insert them in the map
|
||||
var controlUIzoomIn= document.getElementById('cd-zoom-in'),
|
||||
controlUIzoomOut= document.getElementById('cd-zoom-out');
|
||||
|
||||
}
|
||||
|
||||
var zoomControlDiv = document.createElement('div');
|
||||
var zoomControl = new CustomZoomControl(zoomControlDiv, map);
|
||||
|
||||
//insert the zoom div on the top left of the map
|
||||
map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
|
||||
});
|
||||
Reference in New Issue
Block a user