clear
  • Introduction
  • HTML
  • Html Structure
    • Header
    • Left Side Menu
    • Right Side Menu
    • Main Content
      • Buttons
      • Font Icons
      • Progress Bars
      • Maps
      • Lock Screen
  • FAQ's
  • SCSS
  • CSS Files
  • Javascript Files
  • Plugins
  • Start New Page
    • Menu Bar Fold
    • Boxed and Moveable Header
    • Moveable Header
    • Boxed and Fixed Header
    • Fixed Header and Menu
  • Vue Version
    • Basic Installation
      • Clear 1.7 installation
    • Basic Structure
      • Layout structure
      • Leftmenu structure
      • Start New Page
      • Changing layouts
  • Changing Color Scheme
  • Laravel Spark Skin
    • Spark Installation
    • Using .vue files
    • Adding External Plugins
  • Laravel Version
    • Changing skin
    • Changing Layouts
Powered by GitBook
On this page

Was this helpful?

  1. Html Structure
  2. Main Content

Maps

PreviousProgress BarsNextLock Screen

Last updated 5 years ago

Was this helpful?

There are three divergent maps used included in this template.

1) Google Maps :

We can find different styles of this kind in the page .

It has the following structure:

<div id="gmap-top" class="map">
</div>

parameters:

i) zoom - This attribute sets the scale of the map (by default - '8').This option is available is in the js file.

zoom : 8

ii) center [lat , lng] - these attributes set the coordinates of the center of the map and the point of the map (by default - '17.400408 and '78.507905'). This option is available in Js file.

center : [17.400408, 78.507905]

iii) hue - sets the hue of the feature to match the hue of the color supplied. Note that the saturation and lightness of the feature is conserved, which means that the feature will not match the color supplied exactly. Valid values: An RGB hex string, i.e. '#ff0000'. This opion is available in the js file.

hue : '#0075c2'

iv) Address - This feature allows us to mention the current location. This option is available in the js file.

address : "nallakunta,hyderabad"

v) Marker - This feature allows the user to explicitly indicate the location. This option is available in the js file.

icon : "images/location-mark.png"

2) Vector Maps :

It has the following Structure

<div id="vmapworld" class="map_size">
    <svg>...</svg>
    ....
    ....
</div>

3) Advanced Maps :

It has the following Structure

<div id="advanced_map" class="gmap leaflet-container leaflet-fade-anim leaflet-grab leaflet-touch-drag">
   ...
</div>

We can find different styles of this kind in the page .

Vector Maps
Google Maps