Socrata Example

by Alex Azuero

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<title>SF311 Sign Finder</title>
<body>
    <div id="container">
        <form id="search">
            <input type="text" id="address" name="address" />
            <input type="submit" value="Search" />
        </form>
        <div id="map"></div>
        <table id="results">
            <thead>
                <tr>
                    <th>Case ID</th>
                    <th>Opened</th>
                    <th>Details</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</body>

CSS

#map {
     height: 480px;
     width: 640px
 }
 #container {
     width: 700px;
 }

JavaScript

$(document).ready(function () {
    // Intialize our map
    var center = new google.maps.LatLng(37.7748699, -122.4186111);
    var mapOptions = {
        zoom: 12,
        center: center,
        draggable: false
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var geocoder = new google.maps.Geocoder();

    // Initialize our data table
    $('#results').dataTable();

    $("#search").submit(function (event) {
        event.preventDefault();

        // Geocode our address
        var address = $("#address").val();
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                map.setZoom(17);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    icon: {
                        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                        scale: 4
                    }
                });

                // Construct the catalog query string
                url = 'http://data.sfgov.org/resource/vw6y-z8j6.json?' + 'category=Temporary Sign Request' + '&status=Open' + '&$where=within_circle(point, ' + results[0].geometry.location.lat() + ', ' + results[0].geometry.location.lng() + ', 300)' + '&$$app_token=MmFqykL8mygeptjRHvgrmqcHL';

                // Retrieve our data and plot it
                $.getJSON(url, function (data, textstatus) {
                    // Add em!
                    $.each(data, function (i, entry) {
                        // Construct a flyout
                        var content = '<div class="flyout">' + '<ul>' + '<li><em>Case ID:</em> ' + entry.case_id + '</li>' + '<li><em>Opened:</em> ' + entry.opened + '</li>' + '<li><em>Details:</em> ' + entry.request_details + '</li>' + '<li><em>Address:</em> ' +...