Skip to content

Local Maps

Stable
Available in the US and Canada

Screenshot of an example of the Local Maps widget

Example

<!DOCTYPE html>
<html>
<head>
<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="https://cdn.locallogic.co/favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet'/>
<script src="https://maps.googleapis.com/maps/api/js?key={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 {
height:600px;
width: 100%;
}
</style>
</head>
<body>
<!-- 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');
div.appendChild(d);
}
var heatmapsControlDiv = document.createElement('div');
var heatmapsControlComponent = new HeatmapsMapControl(heatmapsControlDiv, map);
heatmapsControlDiv.index = 1;
map.controls[google.maps.ControlPosition.LEFT_TOP].push(heatmapsControlDiv);
</script>
<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']
});
}
</script>
<!-- Load the Local Logic SDK with your Local Logic token -->
<script async defer
src="https://cdn.locallogic.co/sdk/?token={YOUR_TOKEN}&callback=initLocallogic">
</script>
</body>
</html>

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

Options

ParameterStatusDescription
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: []

Methods

isReady ()

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

mapsWidget.isReady();

destroy ()

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

mapsWidget.destroy();

categories ()

Returns an array of categories, containing arrays of available scores

mapsWidget.categories();
> [{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

mapsWidget.show(['transit_friendly', 'groceries', 'quiet']);

selectionAdd (scoreString)

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

mapsWidget.selectionAdd('cafes');

selectionRemove (scoreString)

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

mapsWidget.selectionRemove('groceries');

selection ()

Returns an array of currently selected scores

mapsWidget.selection();
> ["pedestrian_friendly", "cafes", "quiet"]

selectionHas (scoreString)

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

mapsWidget.selectionHas('groceries');

disable ()

Disable the heatmap overlays on the map

mapsWidget.disable();

enable ()

Enable the heatmap overlays on the map

mapsWidget.enable();

isEnable ()

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

mapsWidget.isEnable();

Events

ll-heatmaps-exceeded-max-viewport

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') });

ll-heatmaps-within-max-viewport

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 July 20, 2020