LocalSignal Maps

LocalSignal Maps

LocalSignal Maps is a jQuery library that is intended to make displaying a stylized Google Map painless. The data attributes used to explain how to render the map to the library. LocalSignal Maps is also available as a plugin on GitHub. 

Using LocalSignal Maps

localsignal-maps.min.js

LocalSignal Starter Sites come with LocalSignal Maps installed. All you need in order to install it on a new LocalSignal Web Capsule is to add the localsignal-maps.min.js and set up your Google API.

  1. Add LocalSignal Maps CDN in the Scripts portions of a client website.
  2. Obtain and add a Google Maps API Key to the Scripts as well.
  3. In the map's Panel, select LocalSignal Maps and Google Maps API Key to be included as external scripts.
  4. Save the Panel to view the map. To set the maps values, edit the map on the page it is used.

Google Maps API

https://maps.googleapis.com/maps/api/js?key=1234567890

Google Maps requires developers to setup an API key in order to use Google Maps on their web projects.

  1. Visit Google Maps's Javascipt API page and Get a Key.
  2. Select or create a project to Enable the API Key

  3. In LocalSignal Client Account, add the External Script https://maps.googleapis.com/maps/api/js?key=1234567890.
    Update the API Key with the Key provided by Google.

    To improve your app's security, restrict this key's usage in the API Console. When restricting the limit the usage to HTTP referrers. Add both LocalSignal (*.localsignal.com/*) and your clients domain(*.yourclientsdomain.com/*) to the list.

Code Example

cms-type="map"

Menus and examples are used with the Menu Section. The example code is shown until the client selects a menu for the CMS to use. The cms-global allows for the same menu to be globally selected on every instance of the panel. This is useful to update headers and footers consistently.

Map

Attribute Example Value Notes
cms-global N/A Used to make a cms item global across every instance of the panel
data-map-simple true, false Changes the map style
data-map-lat 29.763544 Sets the default latitude
data-map-lng -95.461800 Sets the default longitude
data-map-color #002130 Default map color
data-map-water #00cefd Map water color
data-map-zoom 1, 10, 20 1 is farthest, 20 is closest
data-map-light true Inverses the text color
data-map-marker /marker.png Sets the map marker URL.
Map


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



<div 
 class="map-canvas"

 cms-global

 cms-name="Address"
 cms-type="map" 
 cms-id="address"

 data-map-simple="true"
 data-map-lat="29.763544"
 data-map-lng="-95.461800"
 data-map-color="#002130"
 data-map-water="#00cefd"
 data-map-zoom="10"
 data-map-marker="/marker.png">
</div>

With Marker

Example LocalSignal Map with a Marker

LocalSignal Maps with Marker

Map With Marker


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



<div 
 class="map-canvas"

 cms-global

 cms-name="Address"
 cms-type="map" 
 cms-id="address"

 data-map-simple="true"
 data-map-lat="29.763544"
 data-map-lng="-95.461800"
 data-map-color="#002130"
 data-map-water="#00cefd"
 data-map-zoom="10"
 data-map-marker="/marker.png">
</div>

No Marker

Example LocalSignal Map without a Marker

No Marker

Map without Marker


1
2
3
4
5
6
7
8
9
10
11
12
13
14



<div 
 class="map-canvas"

 cms-name="Address"
 cms-type="map" 
 cms-id="address"

 data-map-lat="29.763544"
 data-map-lng="-95.461800"
 data-map-color="#00cefd"
 data-map-water="#333333"
 data-map-zoom="10"
 data-map-light="true">
</div>

Red

Example Red LocalSignal Map

Red Map

Map With Color


1
2
3
4
5
6
7
8
9
10
11
12
13
14



<div 
 class="map-canvas"

 cms-name="Area"
 cms-type="map" 
 cms-id="area"

 data-map-lat="29.763544"
 data-map-lng="-95.461800"
 data-map-color="#990000"
 data-map-water="#002130"
 data-map-zoom="10"
 data-map-light="true">
</div>