leaflet09-geojsonurldata.html


<!DOCTYPE html>
<html>
<head>
        <title>Map</title>

        <!-- Load Leaflet.js and styles from a CDN -->
        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />

        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <style type="text/css">
            #map {width: 100%; height: 600px;}
        </style>
</head>
<body>

    <!-- The div where the map goes -->
    <div id="map"></div>

    <!-- Map javascript -->
    <script type="text/javascript">

        // Create a map
        var map = L.map('map')
            .setView([52.2015, 0.127], 14);    // Easy way to work out lat/lon/zoom is http://www.openstreetmap.org/

        // Add tile background
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Add the GeoJSON data in the file to the map
        var url = 'https://api.cyclestreets.net/v2/photomap.locations';

        var params = {
            key: 'b2b70892933aa9a8',
            limit: 50,
            bbox: '0.10549,52.19501,0.14565,52.21079'
        };

        // Obtain over AJAX
        $.ajax({
            type: "GET",
            data: params,
            url: url,
            dataType: 'json',
            success: function (data) {
                L.geoJson(data).addTo(map);
            }
        });

    </script>

</body>
</html>