├── spherical_formulas.js ├── gmapsDistanceMarkers.js ├── tests ├── distanceMarkersTest.html └── gmapsDistanceMarkersTest.html └── distanceMarkers.js /spherical_formulas.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shane-tomlinson/Distance-Markers/master/spherical_formulas.js -------------------------------------------------------------------------------- /gmapsDistanceMarkers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Written by Shane Tomlinson 2010 3 | * http://www.shanetomlinson.com 4 | * Released under Creative Commons Attribution Licence 3.0 5 | * http://creativecommons.org/licenses/by/3.0/ 6 | * Uses LatLon, Spherical formulas from Chris Veness 7 | * http://www.movable-type.co.uk/scripts/latlong.html 8 | */ 9 | 10 | /** 11 | * This is a subclass of DistanceMarkerPointsCalculator that can 12 | * work with GMaps API v3. It's loadLine takes a Polyline 13 | * and places GMarkers at the specified interval. 14 | * 15 | * @class GMapsDistanceMarkers 16 | */ 17 | function GMapsDistanceMarkers() { 18 | DistanceMarkerPointsCalculator.apply( this, arguments ); 19 | } 20 | GMapsDistanceMarkers.prototype = new DistanceMarkerPointsCalculator(); 21 | 22 | 23 | GMapsDistanceMarkers.prototype.init = function( config ) { 24 | this.map = config.map; 25 | 26 | DistanceMarkerPointsCalculator.prototype.init.apply( this, arguments ); 27 | }; 28 | 29 | 30 | /** 31 | * Load an object that represents a line and convert each point to 32 | * a LatLon. For each point in the line, call this.addLatLon with 33 | * the LatLon version of the point 34 | * @method loadLine 35 | * @param {object} line - line to load. 36 | */ 37 | GMapsDistanceMarkers.prototype.loadLine = function( line ) { 38 | var path = line.getPath(); 39 | var me=this; 40 | 41 | path.forEach( function( latLng, index ) { 42 | var latLon = new LatLon( latLng.lat(), latLng.lng() ); 43 | me.addLatLon( latLon ); 44 | } ); 45 | 46 | this.currMarker = 0; 47 | }; 48 | 49 | /** 50 | * This method converts a LatLon used by the calculator to a point 51 | * that can be used by the user of the calculator. This could be 52 | * to convert it to a user defined point for storage or to a point 53 | * to place on a map. 54 | * @method latLonToDistanceMarker 55 | * @param {object} latLon - a LatLon object. 56 | * @return {object} an object that represents a point. 57 | */ 58 | GMapsDistanceMarkers.prototype.latLonToDistanceMarker = function( latLon ) { 59 | var latLng = new google.maps.LatLng( latLon.lat(), latLon.lon() ); 60 | 61 | this.currMarker++; 62 | var marker = new google.maps.Marker( { 63 | map: this.map, 64 | position: latLng, 65 | visible: true, 66 | title: this.currMarker 67 | } ); 68 | 69 | return marker; 70 | }; 71 | -------------------------------------------------------------------------------- /tests/distanceMarkersTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Distance Markers Unit Test 4 | 5 | 6 | 7 | 8 | 9 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /distanceMarkers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Written by Shane Tomlinson 2010 3 | * http://www.shanetomlinson.com 4 | * Released under Creative Commons Attribution Licence 3.0 5 | * http://creativecommons.org/licenses/by/3.0/ 6 | * Uses LatLon, Spherical formulas from Chris Veness 7 | * http://www.movable-type.co.uk/scripts/latlong.html 8 | */ 9 | 10 | /** 11 | * Finds distance distanceMarkers on a line defined by a series of points. 12 | * @class DistanceMarkerPointsCalculator 13 | */ 14 | function DistanceMarkerPointsCalculator() { 15 | } 16 | 17 | DistanceMarkerPointsCalculator.prototype = { 18 | init: function( config ) { 19 | this.latLons = []; 20 | if( config && config.line ) { 21 | this.loadLine( config.line ); 22 | } 23 | }, 24 | 25 | loadLine: function( line ) { 26 | // overload for specific source like GMaps, Yahoo maps, etc. 27 | // overridden function should create a LatLng and add it via addLatLon 28 | }, 29 | 30 | /** 31 | * Add a LatLon point representing a point on the line. 32 | * @method addLatLon 33 | * @param {object} latLon - LatLon object 34 | */ 35 | addLatLon: function( latLon ) { 36 | this.latLons.push( latLon ); 37 | }, 38 | 39 | /** 40 | * convert a LatLon to a point that we can use in our own application. 41 | * @method latLonToDistanceMarker 42 | * @param {object} latLon - LatLon object 43 | * @return {object} - point we can use in our application. 44 | */ 45 | latLonToDistanceMarker: function( latLon ) { 46 | // overload to convert from a LatLon to create a distance marker point. 47 | return latLon; 48 | }, 49 | 50 | /** 51 | * Gets the distance marker points, each point having a lat and lng field. 52 | * @method getDistanceMarkerPoints 53 | * @param {number} distanceBetweenMarkers - distance in kilometers between distanceMarkers. 54 | */ 55 | getDistanceMarkerPoints: function( distanceBetweenMarkers ) { 56 | var distanceMarkers = []; 57 | 58 | 59 | var startLatLon = this.latLons[ 0 ]; 60 | var distanceSinceLastMarker = 0; 61 | 62 | // Basic idea is to keep passing points until we have gone too far. 63 | // Once we have gone too far, fill in all the points up to the current 64 | // location. Repeat. 65 | for( var index = 1, latLon; latLon = this.latLons[ index ]; ++index ) { 66 | distanceSinceLastMarker += parseFloat( startLatLon.distanceTo( latLon, 6 ) ); 67 | 68 | var currPoint = latLon; 69 | 70 | var bearingToStartLatLon = currPoint.bearingTo( startLatLon ); 71 | while( distanceSinceLastMarker > distanceBetweenMarkers ) { 72 | var distanceToMarker = distanceSinceLastMarker - distanceBetweenMarkers; 73 | 74 | var markerLatLon = currPoint.destinationPoint( bearingToStartLatLon, distanceToMarker ); 75 | var distanceMarker = this.latLonToDistanceMarker( markerLatLon ); 76 | distanceMarkers.push( distanceMarker ); 77 | 78 | distanceSinceLastMarker = distanceToMarker; 79 | } 80 | 81 | startLatLon = latLon; 82 | } 83 | 84 | return distanceMarkers; 85 | } 86 | }; -------------------------------------------------------------------------------- /tests/gmapsDistanceMarkersTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Distance Markers Unit Test 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 89 | 90 | 91 |
92 |
93 | 94 | --------------------------------------------------------------------------------