HTMAPL: Oakland Crimespotting

This example shows the 20 most recent crime reports on Oakland Crimespotting, using its GeoJSON API. Markers are generated using jQuery templates, and mouse events (captured using .live() so we don't have to wait for the data to load first) show and hide markers with the same data-crime_type attribute.

<div class="map" id="oakland"
    data-provider="bing"
    data-center="37.804,-122.252"
    data-zoom="12">
    <div class="layer crimes"
        data-type="geojson"
        data-template="#oak-marker"
        data-set_extent="true"
        data-url="http://oakland.crimespotting.org/crime-data?count=20&amp;format=json">
        <script id="oak-marker" type="text/x-jquery-tmpl">
            <a class="report ${getCrimeGroup(properties.crime_type)}"
                data-crime_type="${properties.crime_type}"
                data-crime_group="${getCrimeGroup(properties)}"
                href="http://oakland.crimespotting.org/${getHref(properties, id)}">
                <span class="group">${abbreviate(properties.crime_type)}</span>
                <span class="desc">
                    ${properties.description}
                    <span class="date">@ ${properties.date_time.substr(0,16)}</span>
                </span>
            </a>
        </script>
    </div>
    <h2>Oakland</h2>
</div>