Skip to content

Instantly share code, notes, and snippets.

@apollolm

apollolm/map.html

Created October 7, 2014 04:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save apollolm/e0536e463885967382a8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save apollolm/e0536e463885967382a8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Ryan Whitley created this gist Oct 7, 2014.
    70 changes: 70 additions & 0 deletions map.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    <!doctype html>
    <html lang="en">

    <head>
    <meta charset="utf-8">

    <title>TechDiversified Worshop - The Power of APIs</title>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

    <style>

    #mapContainer { height: 380px; width: 50%; }

    </style>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
    </head>

    <body>
    <h1>Map of 911 Responses</h1>

    <div id="mapContainer">

    </div>
    <div id="myResults">

    </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <script type="text/javascript">
    //initialize the map
    var map = L.map('mapContainer').setView([47.65, -122.4], 11);

    //Add a basemap
    L.tileLayer('http://{s}.tiles.mapbox.com/v3/spatialdev.map-c9z2cyef/{z}/{x}/{y}.png').addTo(map);
    </script>


    <script type="text/javascript">
    //Use jQuery to call the API and get results
    $(document).ready(function(){

    //This is the URL (address) to the API endpoint you're interested in
    var URL = "http://data.seattle.gov/resource/kzjm-xkqj.json";

    $.getJSON(URL, function(result){

    //After the API is successfully called, the flow comes here.
    $.each(result, function(idx, item){
    //Write the item to a list
    $("#myResults").append(item.type);
    $("#myResults").append("<br>");

    //Add map marker
    if(item.latitude && item.longitude){
    L.marker([item.latitude, item.longitude]).addTo(map);
    }
    });

    });

    });
    </script>
    </body>
    </html>