Skip to content

Instantly share code, notes, and snippets.

@apollolm

apollolm/map.html

Created October 7, 2014 04:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save apollolm/e0536e463885967382a8 to your computer and use it in GitHub Desktop.
Save apollolm/e0536e463885967382a8 to your computer and use it in GitHub Desktop.
Download ZIP
A map template for the API workshop
Raw
map.html
<!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>
@ranchodeluxe
Copy link

This is for Raymond:

<!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>
    <button id="resp_btn">Show Responses</button>

    <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">

        window.markers = [];
        var add_to_map = function( result ) {

            //After the API is successfully called, the flow comes here.
            $.each(result, function(idx, item){
                //Add map marker
                if(item.latitude && item.longitude){
                    window.markers.push( L.marker([item.latitude, item.longitude]).addTo(map) );
                }
            });


        }
        //Use jQuery to call the API and get results
        $(document).ready(function(){

            $( 'button#resp_btn' ).on ( 'click' , function( e ) {
                for ( var indx = 0; indx < window.markers.length; indx++ ) {
                    var marker = window.markers[ indx ];
                    map.removeLayer( marker );
                }
                add_to_map( window.resp );
            });

            //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){

                    add_to_map( result );

                    // my function
                    window.resp = [];
                    $.each(result, function(idx, item){
                        if ( item.type === 'Aid Response' ) {
                            window.resp.push( item );
                        }
                    });

            });

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment