Helper widget to render Socrata location data on a Google Map.
HTML JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
resources
LICENSE
README.md
master.html
socratadata.html

README.md

socrata-googlemaps.js (v1.0)

This library allows developers to embed google map with a simple interface to view features directly from Socrata tables https://www.socrata.com.

Note that the Socrata table being used must have a location field in order for this library to work or a latitude/longitude columns.

Screenshot

Getting Started

  1. Add js and css to your site:

    <!-- needed with the library -->
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
    <script src='https://maps.googleapis.com/maps/api/js?sensor=true'></script>
    
    <link rel="stylesheet" href="./resources/css/socrata-googlemaps.css" />
    <script src="./resources/js/socrata-googlemaps.js"></script>
  2. Create the map and load the data

    sgm = new SocrataGoogleMaps({
                baseUrl: 'https://soda.demo.socrata.com',
                table: '6yvf-kk3n',
                formatData: false,
                zoom: 2,
                latitude: 'location.coordinates[1]',
                longitude: 'location.coordinates[0]',
                center: {
                    lat: 26.273714,
                    lng: -3.339844
                },
                enableDirections: false,
                tplInfowindow: '<b>Earthquake Id: {%=o.earthquake_id%}</b><br>{% if(o.region) { %} Region: {%=o.region%}<br>{% } %}{% if(o.depth) { %} Depth: {%=o.depth%}<br> {% } %}{% if(o.magnitude) { %} Magnitude: {%=o.magnitude%}<br> {% } %}{% if(o.source) { %} Source: {%=o.source%} {% } %}', 
                tplDirections: '{% if(o.location && o.location.coordinates && o.location.coordinates[0] && o.location.coordinates[1]) { %}{%=o.location.coordinates[1]%}, {%=o.location.coordinates[1]%}{% } %}',
                tplListing: '{%=o.region%}<br>{% if(o.depth) { %} Depth: {%=o.depth%}&nbsp;{% } %}{% if(o.magnitude) { %} Magnitude: {%=o.magnitude%}<br>{% } %}'
            }).render('sgm').load({
                $order: 'region'
            }, function(el) {
                console.log("done", sgm.getRecords().length);
            });
        });
    

Stylesheet

The stylesheet can be easily modified to add needed changes. The namespace is .sgm-... see the resources/css/socrata-googlemaps.css for more details on classes.

Properties

  • baseUrl (required) - This is the url to the Socrata server. ie. https://soda.demo.socrata.com
  • table (required) - This is the 4x4 socrata table id.
  • tplInfowindow - You will need to define your tpl that you will want to see when you click on a marker on the map. The text here will be rendered inside the popup info window. See Template Engine below for details on how to use define this value.
  • enableListings - This flag is used to render the listings portion of the component. Defaults to true.
  • enalbleDirections - This flag is used to render the directions routing feature of the component. Defaults to true.
  • center - Object of lat/lng that will be the starting point of the map. Defaults to: { lat: 39.4, lng: -104.9 }
  • zoom - The zoom level the map will start on. Defaults to 10.
  • clickZoom - Zoom level the map will zoom too when the icon or row is selected. Defaults to 15.

  • tplListing - It will define the data format in the listing section. See Template Engine below for details on how to use define this value.

  • tplDirections - You will need to define your tpl, to show the data format to be used in the Source/Destination address to get direction. See Template Engine below for details on how to use define this value.
  • formatData - If the database contains any data to be parsed then "formatData" is used.

Methods

  • constructor( { properties } ) - Returns pointer to the instance.
  • render( divId ) - This is the html <div id="sgm" class="sgm"></div> tag that would be use to render the component.
  • load( options, callback ) - This will make a request to the Socrata table and load the information.
  • getRecords() - Returns the records that where returned from the Socrata table

Events

  • load - Event on the map load. Returns the filtered data set used in the map.
  • locationSelected - Event on selecting a location. Returns the selected location data and list of all the locations.

Demos


Template Engine

This library makes use of the "JavaScript-Templates" engine https://github.com/blueimp/JavaScript-Templates

License MIT