Bulut Deneme

by bulutkartal

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry"></script>

    <div id="map"></div>
    <div id="info-box">
        <h1> A* polygon path finder </h1>
    </div>
    <canvas id="render-output"></canvas>
    <script type='text/javascript' src="https://cdn.rawgit.com/nikolaiartemiev/polygon-shortest-path/master/vec.js"></script>
    <script type='text/javascript' src="https://cdn.rawgit.com/nikolaiartemiev/polygon-shortest-path/master/render.js"></script>
    <script type='text/javascript' src="https://cdn.rawgit.com/nikolaiartemiev/polygon-shortest-path/master/polygon.js"></script>
    <script type='text/javascript' src="https://cdn.rawgit.com/nikolaiartemiev/polygon-shortest-path/master/heap-queue.js"></script>
    <script type='text/javascript' src="https://cdn.rawgit.com/nikolaiartemiev/polygon-shortest-path/master/search.js"></script>
    <script type='text/javascript' src="https://cdn.rawgit.com/nikolaiartemiev/polygon-shortest-path/master/app.js"></script>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

        #info-box {
            position: absolute;
            right: 0;
            background-color: rgba(30, 30, 30, 0.8);
            border: 1px solid #555;
            font-family: sans-serif;
            font-weight: lighter;
            color: #FFF;
            text-align: center;
            padding: 10px;
            pointer-events: none;
            user-select: none;
        }

        h1 {
            font-size: 20px;
        }

JavaScript

var map = new google.maps.Map(document.getElementById('map'), {
		  zoom: 2,
		  minZoom: 1,
		  center: {
		    lat: -6,
		    lng: 2
		  },
		  streetViewControl: false,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		});
    
    var coordinates = [[[[6.743,53.578],[6.75,53.572],[6.757,53.563],[6.748,53.566],[6.735,53.575],[6.727,53.577],[6.716,53.576],[6.702,53.571],[6.696,53.57],[6.678,53.575],[6.664,53.587],[6.66,53.599],[6.672,53.604],[6.748,53.618],[6.785,53.62],[6.799,53.604],[6.776,53.602],[6.741,53.593],[6.723,53.591],[6.723,53.584],[6.734,53.582],[6.743,53.578]]],[[[7.086,53.687],[6.874,53.672],[6.911,53.683],[7.048,53.694],[7.086,53.687]]]]; // incomplete

var paths = map(coordinates, function(entry) {
    return _.reduce(entry, function(list, polygon) {
        // This map() only transforms the data.
        _.each(map(polygon, function(point) {
            // Important: the lat/lng are vice-versa in GeoJSON
            return new google.maps.LatLng(point[1], point[0]);
        }), function(point) {
            list.push(point);
        });

        return list;
    }, []);
});

var polygon = new google.maps.Polygon({
    paths: paths,
});

// given "map" is defined, this will display the polygon on the map
polygon.setMap(map);