Skip to content

Local Maps

Available in the US and Canada

Screenshot of an example of the Local Maps widget


<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/png" href="">
<link href='' rel='stylesheet'/>
<script src="{YOUR_GOOGLE_KEY}"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro';
font-size: 14px;
#mapContainer {
padding: 100px;
margin: auto;
#map {
width: 100%;
<!-- Google Maps DOM element -->
<div id="map"></div>
<!-- Create a Google Maps Control to mount the widget -->
<script type="text/javascript">
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 45.50717558, lng: -73.5780121 },
zoom: 13
var HeatmapsMapControl = function (div, map) {
var d = document.createElement('div');
d.setAttribute('id', 'local-maps');
var heatmapsControlDiv = document.createElement('div');
var heatmapsControlComponent = new HeatmapsMapControl(heatmapsControlDiv, map);
heatmapsControlDiv.index = 1;
<script type="text/javascript">
// Callback that is called when the SDK is ready to be used
function initLocallogic() {
var mapsWidget = new locallogic.LocalMaps('local-maps', {
googleMapsMap: map,
locale: 'en',
color: '#017f8f',
asMapControl: true,
hiddenScores: ['primary_schools', 'high_schools']
<!-- Load the Local Logic SDK with your Local Logic token -->
<script async defer

To test this example live, make sure to replace the {YOUR_TOKEN} placeholder with the token we provided to you.


googleMapsMapoptionalThe Google Maps map instance you want the Local Maps widget to be associated with. (You must include either this or leafletMap)
leafletMapoptionalThe Leaflet map instance you want the Local Maps widget to be associated with. (You must include either this or googleMapsMap)
localeoptionalString value that specifies the language of the widget.
Available: fr (French), en (English).
Default: en
coloroptionalHexadecimal value of the main color.
Default: #017f8f
countryoptionalString value that specifies the country which the Local Maps are overlaying.
Available: CA (Canada), US (United States of America)
Default: CA
showZoomButtonoptionalBoolean value that specifies if the Zoom In button is visible.
Default: true
maxViewportSizeoptionalNumber value that specifies maximum viewport size at which the heatmaps overlays will be displayed.
Default: 2000000000
asMapControloptionalBoolean value that specifies if you are mounting the widget as a Custom Map Control.
Default: false
hiddenScoresoptionalArray of the scores you want to hide in the Score Selector.
Important: When using the Local Schools with the Local Maps, you have to specify ['high_schools', 'primary_schools'] to remove the Schools related scores from the Local Maps.
Example: ['groceries', 'car_friendly']
Default: []


isReady ()

Returns a boolean. Don’t call any other methods unless this is true.


destroy ()

Use this method to remove from the page and the map all elements related to the instance


categories ()

Returns an array of categories, containing arrays of available scores

> [{title: "transportation",
scores: ["pedestrian_friendly", "transit_friendly", "car_friendly"]},
{title: "services",
scores: ["groceries", "primary_schools", "high_schools", "daycares", "restaurants", "cafes", "nightlife", "shopping"]},
{title: "character",
scores: ["quiet", "vibrant"]}]

show (scoresArray)

Specify an array for scores to be shown on the map['transit_friendly', 'groceries', 'quiet']);

selectionAdd (scoreString)

Add a single score to the scores currently showing on the map


selectionRemove (scoreString)

Remove a single score from the scores currently showing on the map


selection ()

Returns an array of currently selected scores

> ["pedestrian_friendly", "cafes", "quiet"]

selectionHas (scoreString)

Returns a boolean expressing whether or not the specified score is in the current selection


disable ()

Disable the heatmap overlays on the map


enable ()

Enable the heatmap overlays on the map


isEnable ()

Returns a boolean expressing whether or not the map overlays are enabled




Dispatched when the map viewport is too large to display the Local Maps.

document.addEventListener('ll-heatmaps-exceeded-max-viewport', function () { console.log('some action') });


Dispatched when the map viewport is small enough to display the Local Maps.

document.addEventListener('ll-heatmaps-within-max-viewport', function () { console.log('some action') });
Edit this page on GitHub
1 contributorjpvalery
Last edited by jpvalery on December 9, 2020