Location Scores
for Every Listing Page

Embed neighborhood score badges anywhere on your real estate website — on a listing detail page, a property card, or even a static HTML email. No map required.

See Live Examples HTML Embed Docs
Live widget preview

Scores load once a valid token is present.

Get started in
2 lines of HTML.

The fastest integration path — no JavaScript required in your page:

  • Add one <script> tag to your <head> (or via CMS script injection).
  • Place a data-mpl-widget container wherever you want the badges.
  • The bundle auto-initialises at DOMContentLoaded — scores appear without writing any JS.

Need dynamic coordinates or event callbacks? Use the renderWidget() JS API instead — see the live examples below.

HTML Embed Reference 
<!-- 1. Load Mapalizer (once per page, in <head>) -->
<script src="https://cdn.mapalizer.com/re/toolbar/v1.0.6/mapalizer.min.js"></script>

<!-- 2. Place the container anywhere on your listing page -->
<div data-mpl-widget
     data-token="mpl_pk_live_..."
     data-lat="52.52"
     data-lng="13.405"
     data-show-top="4"
     data-exclude-categories="HEALTH,CULTURE"
     data-theme="light"></div>

<!-- 3. Done. Widget renders automatically at DOMContentLoaded. -->

Live Examples

Pick an integration pattern and try it live below.

Zero-JS HTML embed

data-mpl-widget
Live preview

Add data-mpl-widget to any container and the Mapalizer bundle initialises it automatically at DOMContentLoaded. No additional code is required in your page.

The widget on the right was rendered via the HTML embed. It uses data-show-top="4" together with data-exclude-categories="HEALTH,CULTURE" to keep Health and Culture out of this curated highlights example.

A valid data-token is required for the live preview to render scores.

Snippet
<!-- 1. Load Mapalizer (once per page, in <head>) -->
<script src="https://cdn.mapalizer.com/re/toolbar/v1.0.6/mapalizer.min.js"></script>

<!-- 2. Place the container wherever you want the widget -->
<div data-mpl-widget
     data-token="mpl_pk_live_..."
     data-lat="52.52"
     data-lng="13.405"
     data-language="en"
     data-theme="light"
     data-show-top="4"
     data-exclude-categories="HEALTH,CULTURE"></div>
Supported data-* attributes
AttributeRequiredDescription
data-tokenYesYour publishable site token (mpl_pk_live_...).
data-latYesLatitude of the location to score.
data-lngYesLongitude of the location to score.
data-languageNoBCP 47 language code (default: en). Supported language code list: .
data-themeNolight or dark (default: light).
data-verticalNoData vertical key (default: re).
data-categoriesNoComma-separated category keys to show (e.g. TRANSIT,ESSENTIALS,HEALTH).
data-show-topNoShow only the top N categories by score.
data-exclude-categoriesNoComma-separated category keys to exclude. Especially meaningful with data-show-top; this demo uses HEALTH,CULTURE for Health and Culture.
data-titleNoWidget heading. Empty string suppresses the title.

For SPA route changes or CMS-injected content, call mapalizer.initWidgets(containerEl) after injecting new HTML to initialise any new [data-mpl-widget] elements.

Standalone widget — no map required

renderWidget()

Provide a siteToken and a coordinate. The widget renders into any container element — no map instance needed.

Click "Render Widget" to see the result here. 
const result = await mapalizer.renderWidget(
    document.getElementById('my-widget'),
    { lat: 52.52, lng: 13.405 },
    {
        auth: { siteToken: 'mpl_pk_live_...' },
        language: 'en',
        theme: 'light',
    }
);

if (result.ok) {
    console.log('scores:', result.scores);
} else {
    console.error('error:', result.error);
}
Waiting for render call...

Top highlights — show the best categories

showTopCategories

Use showTopCategories to display only the top N categories sorted by score. Pair it with excludeCategories when you want a curated highlights panel that skips lessly used categories such as Health and Culture.

Useful with showTopCategories to skip lessly used categories like Health and Culture.
Click "Render Widget" to see the result here. 
const result = await mapalizer.renderWidget(
    document.getElementById('my-widget'),
    { lat: 48.8566, lng: 2.3522 },
    {
        auth: { siteToken: 'mpl_pk_live_...' },
        showTopCategories: 4,
        excludeCategories: ['HEALTH', 'CULTURE'],
        title: 'Location Highlights',
    }
);
// Only the 4 highest-scoring non-excluded categories are shown

Custom category subset

categories

Pass a categories array to show only specific categories. Useful when your listing page already highlights certain features (e.g. commute + parks for a family-oriented listing).

Enter category keys from the Mapalizer data vertical (e.g. TRANSIT,ESSENTIALS,HEALTH).
Click "Render Widget" to see the result here. 
const result = await mapalizer.renderWidget(
    document.getElementById('my-widget'),
    { lat: 51.5074, lng: -0.1278 },
    {
        auth: { siteToken: 'mpl_pk_live_...' },
        categories: ['TRANSIT', 'ESSENTIALS', 'HEALTH', 'NATURE'],
    }
);
// Only the specified categories are scored and displayed